# Webp format not displaying

**URL:** <https://forum.builder.io/t/webp-format-not-displaying/4966>\
**Category:** Bugs\
**Tags:** bug\
**Created:** [February 12, 2024, 10:15am UTC](https://forum.builder.io/t/webp-format-not-displaying/4966 "2024-02-12T10:15:15Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![eDenys](https://avatars.discourse-cdn.com/v4/letter/e/439d5e/32.png) [@eDenys](https://forum.builder.io/u/eDenys)\
**Post date:** [February 12, 2024, 10:15am UTC](https://forum.builder.io/t/webp-format-not-displaying/4966/1 "2024-02-12T10:15:15Z")

</div>

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)

```auto
<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.  
https://codepen.io/elZephon/embed/preview/NWJLJdx?default-tabs=html%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=NWJLJdx

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

 ![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/1/151574d69fbbdc2f9a83b08d1f06ad53c64353db.png)

**Builder content link**

> **[Builder.io: Visual Development Platform](https://builder.io/content/9294461863a0461586b7701bbcfaa322_9d22bb7a3574478d9c9762a42eb7148f)**
>
> Drag and drop with your components, right within your existing site or app. Build and optimize digital experiences for any tech stack, visually..

**Prod link**

> **[How to play Fall Guys on Android and iOS?](https://shadow.tech/fr-FR/gaming/fall-guys)**
>
> Fall Guys is all about chaotic multiplayer fun and with Shadow PC, you can dive into it at any moment, from any device, including Android and iPhone and Mac!

Thank you for your help.

Etienne.

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [February 12, 2024, 1:12pm UTC](https://forum.builder.io/t/webp-format-not-displaying/4966/2 "2024-02-12T13:12:53Z")

</div>

Hello @eDenys,

Builder uses the [Modern formats with the `picture` tag  
 ](https://www.builder.io/blog/fast-images#modern-formats-with-the-code-picture-code-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](https://developers.google.com/speed/webp), and supported browsers will favor those, via the `source` tag:

```auto
<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](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/3/3bc982d8ea432c906ee778732c14d64633fc4f84.png)

---

<div class="post-metadata">

**Author:** ![eDenys](https://avatars.discourse-cdn.com/v4/letter/e/439d5e/32.png) [@eDenys](https://forum.builder.io/u/eDenys)\
**Post date:** [February 14, 2024, 9:28am UTC](https://forum.builder.io/t/webp-format-not-displaying/4966/3 "2024-02-14T09:28:47Z")

</div>

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 ?](https://shadow.tech/fr-FR/gaming/fall-guys)

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

 ![Capture d’écran 2024-02-14 à 10.01.56](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/6/6b8fd91bc17069bcd8ec6d5065e33f9faeb3bcef.png)

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [February 14, 2024, 10:01am UTC](https://forum.builder.io/t/webp-format-not-displaying/4966/4 "2024-02-14T10:01:35Z")

</div>

Hello @eDenys,

Are you using the latest version of Chrome?

---

<div class="post-metadata">

**Author:** ![eDenys](https://avatars.discourse-cdn.com/v4/letter/e/439d5e/32.png) [@eDenys](https://forum.builder.io/u/eDenys)\
**Post date:** [February 14, 2024, 12:57pm UTC](https://forum.builder.io/t/webp-format-not-displaying/4966/5 "2024-02-14T12:57:26Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [February 15, 2024, 12:42pm UTC](https://forum.builder.io/t/webp-format-not-displaying/4966/6 "2024-02-15T12:42:46Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![eDenys](https://avatars.discourse-cdn.com/v4/letter/e/439d5e/32.png) [@eDenys](https://forum.builder.io/u/eDenys)\
**Post date:** [February 21, 2024, 3:51pm UTC](https://forum.builder.io/t/webp-format-not-displaying/4966/7 "2024-02-21T15:51:16Z")

</div>

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](https://developers.google.com/speed/webp/gallery1) 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](https://shadow.tech/fr-FR/gaming/baldurs-gate-3):

- 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!

---

<div class="post-metadata">

**Author:** ![eDenys](https://avatars.discourse-cdn.com/v4/letter/e/439d5e/32.png) [@eDenys](https://forum.builder.io/u/eDenys)\
**Post date:** [February 26, 2024, 1:46pm UTC](https://forum.builder.io/t/webp-format-not-displaying/4966/8 "2024-02-26T13:46:58Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [February 27, 2024, 4:28am UTC](https://forum.builder.io/t/webp-format-not-displaying/4966/9 "2024-02-27T04:28:29Z")

</div>

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.