Images not served in webp format

[lburtness]

Builder content link

Builder.io: Visual Development Platform

Builder public api key
2fe4147bb8c843bb8ebba475c8973899

What are you trying to accomplish
Builder’s docs say that uploaded images are saved in webp format. However, my images are still being served and downloaded as their original format (typically jpeg). I am using Builder’s Image block and the following html is produced:

<picture>
    <source 
        srcset="
            https://cdn.builder.io/api/v1/image/assets%2F2fe4147bb8c843bb8ebba475c8973899%2F8410d032f80340c7b338f84626674373?format=webp&amp;width=100 100w, 
            https://cdn.builder.io/api/v1/image/assets%2F2fe4147bb8c843bb8ebba475c8973899%2F8410d032f80340c7b338f84626674373?format=webp&amp;width=200 200w, 
            https://cdn.builder.io/api/v1/image/assets%2F2fe4147bb8c843bb8ebba475c8973899%2F8410d032f80340c7b338f84626674373?format=webp&amp;width=400 400w, 
            https://cdn.builder.io/api/v1/image/assets%2F2fe4147bb8c843bb8ebba475c8973899%2F8410d032f80340c7b338f84626674373?format=webp&amp;width=800 800w, 
            https://cdn.builder.io/api/v1/image/assets%2F2fe4147bb8c843bb8ebba475c8973899%2F8410d032f80340c7b338f84626674373?format=webp&amp;width=1200 1200w, 
            https://cdn.builder.io/api/v1/image/assets%2F2fe4147bb8c843bb8ebba475c8973899%2F8410d032f80340c7b338f84626674373?format=webp&amp;width=1600 1600w, 
            https://cdn.builder.io/api/v1/image/assets%2F2fe4147bb8c843bb8ebba475c8973899%2F8410d032f80340c7b338f84626674373?format=webp&amp;width=2000 2000w, 
            https://cdn.builder.io/api/v1/image/assets%2F2fe4147bb8c843bb8ebba475c8973899%2F8410d032f80340c7b338f84626674373"
        type="image/webp">
    <img
        role="presentation"
        loading="lazy"
        fetchpriority="auto"
        class="builder-image css-12153wi" 
        src="https://cdn.builder.io/api/v1/image/assets%2F2fe4147bb8c843bb8ebba475c8973899%2F8410d032f80340c7b338f84626674373" 
        srcset="
            https://cdn.builder.io/api/v1/image/assets%2F2fe4147bb8c843bb8ebba475c8973899%2F8410d032f80340c7b338f84626674373?width=100 100w, 
            https://cdn.builder.io/api/v1/image/assets%2F2fe4147bb8c843bb8ebba475c8973899%2F8410d032f80340c7b338f84626674373?width=200 200w, 
            https://cdn.builder.io/api/v1/image/assets%2F2fe4147bb8c843bb8ebba475c8973899%2F8410d032f80340c7b338f84626674373?width=400 400w, 
            https://cdn.builder.io/api/v1/image/assets%2F2fe4147bb8c843bb8ebba475c8973899%2F8410d032f80340c7b338f84626674373?width=800 800w, 
            https://cdn.builder.io/api/v1/image/assets%2F2fe4147bb8c843bb8ebba475c8973899%2F8410d032f80340c7b338f84626674373?width=1200 1200w, 
            https://cdn.builder.io/api/v1/image/assets%2F2fe4147bb8c843bb8ebba475c8973899%2F8410d032f80340c7b338f84626674373?width=1600 1600w, 
            https://cdn.builder.io/api/v1/image/assets%2F2fe4147bb8c843bb8ebba475c8973899%2F8410d032f80340c7b338f84626674373?width=2000 2000w, 
            https://cdn.builder.io/api/v1/image/assets%2F2fe4147bb8c843bb8ebba475c8973899%2F8410d032f80340c7b338f84626674373"
        sizes="100vw">
</picture>

The tag with webp format is included but not used. Instead, the fallback is used and a jpeg is downloaded.

I think this is similar to the original issue from Webp format not displaying . The last line of the tag includes a link to the image without webp formatting. If I remove this line, then the webp version is used.

In my example page I linked, I have a jpeg image and a version of the same image that I manually downloaded from Builder, converted to webp, and reuploaded. That image is saved in Builder in webp format and is downloaded on my site as webp. This means I know my browser supports webp formatted images.

How can I go about having all of my images served in webp format automatically?

Thank you

[manish-sharma]

Hello @lburtness

I have tested the implementation on my end but have not been able to reproduce the issue you described. Could you please share some additional details so we can investigate further?

• Which browser and operating system are you using?

• Are you seeing this issue consistently or only intermittently?

• Could you provide screenshot of the image api calls being made when the issue occurs?

These details will help us narrow down the cause and determine the next steps.

Best regards,