Webp format not displaying

Bugs
1

Hi everyone!

I have a problem that I wanted to know if it’s a bug or not, but there is a problem!

When using the builder image component, the image used on the front is always the source, not the webp file that builder generate.

On the dom, we have something like that (I replace the image url by “imageUrl” for better reading)

<picture>
        <source
          srcset="imageUrl?format=webp&amp;width=100 100w,
          imageUrl?format=webp&amp;width=200 200w,
          imageUrl?format=webp&amp;width=400 400w,
          imageUrl?format=webp&amp;width=800 800w,
          imageUrl?format=webp&amp;width=1200 1200w,
          imageUrl?format=webp&amp;width=1600 1600w,
          imageUrl?format=webp&amp;width=2000 2000w,
          **imageUrl**"
          type="image/webp"
        />
        <img
          alt=""
          role="presentation"
          loading="lazy"
          class="builder-image css-1hbf805"
          src="imageUrl"
          srcset="imageUrl?width=100 100w,
          imageUrl?width=200 200w,
          imageUrl?width=400 400w,
          imageUrl?width=800 800w,
          imageUrl?width=1200 1200w,
          imageUrl?width=1600 1600w,
          imageUrl?width=2000 2000w,
          imageUrl"
          sizes="(max-width: 767px) 100vw, 100vw"
        />
      </picture>

The thing is, I don’t know why we have, in the source tag, a fallback with the default url image (the line I put between *, juste after width=2000 2000w,). If I remove this line, the picture display in webp format.

I don’t know if we do something wrong, but we use builder’s image component, so I don’t know why webp format are not used.

I’ve made a codepen to illustrate my words, in which I put the code with and without the line.

We can see we have both format loading in the page.

image
image734×51 8.95 KB

Builder content link

Prod link

Thank you for your help.

Etienne.

2

Hello @eDenys,

Builder uses the Modern formats with the picture tag
 .

You may have noticed we’re using a .png . Because png is supported by any browser, but is almost never the most optimal image format.

This is where adding the picture around our img can allow us to specify more modern and optimal formats, such as webp, and supported browsers will favor those, via the source tag:

<picture>
  <source 
    type="image/webp"
    srcset="
      /image.webp?width=100 100w,
      /image.webp?width=200 200w,
      /image.webp?width=400 400w,
      /image.webp?width=800 800w
    " />
  <img ... />
</picture>

If your browser supports webp then webp format will be used otherwise it will fall back to png.

When using your codepen, if I right click and save, both images are saved as webp

Screenshot 2024-02-12 at 6.42.36 PM
Screenshot 2024-02-12 at 6.42.36 PM698×730 100 KB

3

Thank you for your answer!

I keep looking for my problem, and I discover that on my macbook, I have both webp image like you, but when I switch my chrome on a second screen, I have the problem, one webp, one png (cf. my previous screenshot).

I wondering if the retina screen is for something. I’ve made a test on this page :Comment jouer à Fall Guys sur Android et iOS ?

I’ve not load same assets accroding to the screen I use.

Capture d’écran 2024-02-14 à 10.01.56
Capture d’écran 2024-02-14 à 10.01.561897×950 291 KB

4

Hello @eDenys,

Are you using the latest version of Chrome?

5

Yes, I’ve test on several computers, I’ve got the same behaviour.

6

Hello @eDenys,

You’re experiencing inconsistency in image rendering between your MacBook’s built-in Retina display and an external monitor when using Google Chrome. This could be due to several factors:

  • Retina displays have a higher pixel density compared to many external monitors. As a result, images may appear differently between the two screens, especially when builder images are optimized for high-DPI displays.

  • Chrome might be set to display WebP images only on high-DPI displays. When you move Chrome to the external monitor, which may not be a high-DPI display, Chrome may default to displaying PNG images instead of WebP.

  • The external monitor might not support WebP images, or Chrome might not recognize it as a high-DPI display, causing it to default to PNG images.

To troubleshoot this issue, you could try the following:

  • Check Chrome’s settings to see if there are any preferences related to image format rendering and high-DPI displays.

  • Verify the capabilities of your external monitor to ensure it supports WebP images and is recognized as a high-DPI display by Chrome.

  • Experiment with different image formats (WebP, PNG, JPEG) to see if the issue persists across all formats or is specific to WebP images.

7

Hi @manish-sharma,

Sorry for my late reply!

I want to be more precise about one thing I think I wasn’t clear. On my setup, I have no problem to display webp image in my chrome.

For exemple, on this page from google documentation, I can see both webp and png image, on my macbook screen AND on my other screen. I have exactly the same images loaded on my both screen.

So, the problem does not come from my configuration, my screens or my browser.

Can you test this page from our website:

  • Test on a Retina screen, see if you load some webp in your network. I have 11 webp, 1 jpeg, 4 png, 10 svg = total 26 images
  • Test on a classic screen, see if you load some webp in your network. I have 0 webp, 3jpg, 9 png , 14 svg = total 26 images

Thank you a lot!

8

Hi @manish-sharma,

were you able to test what I told you about? It’s a big issue for us for pages with very big load time when webp are not used.

Thank you,

Etienne

9

Hello @eDenys!

I’m unable to reproduce the issue you mentioned. I’ve tested this on a non-retina screen and didn’t encounter any problems loading webp images. While classic screens can technically display webp images if the browser supports it, it’s worth noting that webp images are primarily optimized for higher-resolution displays like Retina screens. However, compatibility might be an issue with older browsers or devices that don’t fully support the webp format, potentially leading to slower loading times or display errors. So, while classic screens can indeed support webp images, it might not be as seamless or efficient compared to screens designed specifically for higher resolutions.