Images not served in webp format

Builder content link

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

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,

Hi @manish-sharma,

Thank you for the help!

Hello @lburtness

Thank you for sharing the additional details, including your OS, browser version, and screenshots. We have tested the scenario on our end but are still unable to reproduce the issue you’re experiencing.

We are actively investigating and reviewing possible causes, which may include:

  • Browser fallback behavior: Chrome may revert to the JPEG fallback if it detects any mismatch in headers or image format.

  • Content-Type mismatch: Even when requesting ?format=webp, if the CDN or an intermediate cache serves the image with a Content-Type: image/jpeg, the browser will ignore the WebP source.

  • CDN or cache interference: An upstream proxy, CDN, or browser cache may be serving a previously cached JPEG version instead of regenerating the WebP.

  • Optimization pipeline differences: Certain image uploads or configurations could cause Builder’s image optimization to skip automatic WebP conversion.

We’ll continue to investigate and run additional tests to pinpoint the exact cause so we can address it effectively.

I’ll keep you updated as soon as we have more information or require further input from you.

Best regards,

Thanks for the update @manish-sharma. I’ve moved the example to a new Page entry Builder.io: Visual Development Platform so you can use that for testing if needed. I’ve confirmed I’m still seeing the same issue on the new page as well.