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.

Hello @lburtness,

We are no longer able to reproduce the issue on our end. Recently, we made some changes to our automatic conversion algorithm, which previously converted certain image types to JPEG based on compression.

For your space, we’ve now disabled this conversion option. Please let us know if you are still experiencing the issue.

Thanks,

Hi @manish-sharma

I am still seeing the issue. The original image is still downloaded as jpeg and the image I manually converted to webp is downloaded as webp.

Would I need to reupload the image for the fix to take effect?

Thanks

Hello @lburtness,

Yes, could you please try re-uploading the image? Also, are you experiencing similar issues with any other images?

Thanks,

Hi @manish-sharma

Reuploading fixed the issue and the jpeg image is now being downloaded as webp. Thank you! We were seeing this on other images and pages as well so I will check on those and update here if some still aren’t working.

Recently, we made some changes to our automatic conversion algorithm, which previously converted certain image types to JPEG based on compression.

For your space, we’ve now disabled this conversion option.

Could you explain this a little more? What did you disable for my space and what is the difference in the outcome?

Thanks again

Hello @lburtness,

We’ve implemented a feature that prevents certain PNG images from being converted to JPEG. This option isn’t available directly in the UI, but it can be accessed by pressing CMD + P → Toggle Developer Options.

We’re glad to hear that reuploading the image resolved the issue. Please don’t hesitate to reach out if you need any further assistance.

Thanks,