Browsers always ignoring webp version of image

Wappler General
1

Hello all,

I have the below code for one of my images and hope that most modern browsers would use the webp version so that the image is optimised but on every browser it just uses the fallback png version.

Any advice on why this could be?

<picture>
    <source srcset="/assets/images/The Real Life Money Promise.webp" type="image/webp">
    <img src="/assets/images/The Real Life Money Promise.png" class="img-fluid" id="i_howdoesitwork_rlmpromise" alt="Real Life Money Promise Image">
</picture>

Thanks,

Leo

2

Your code is correct, what is not working?
You know you can check which image is loaded in the browser, by checking the dev tools > network > img, right?

Screenshot 2023-08-23 at 15.57.02
Screenshot 2023-08-23 at 15.57.022329×731 321 KB

And remember to never use spaces in file names on the web. Use underscores or dashes instead!

3

Hi Teodor - thanks for your reply.

Yeah this is what is showing in the network tab of the dev console so it seems to be the png version loading but I’m not sure why.

image

Any suggestions?

And yes you are right, I need to go through and rename lots of my images!

Thanks,

Leo

4

What browser are you using?

5

Chrome version 116.0

6

I just copied your code and added paths to my own images and it always loads the webp image in Version 116.0.5845.111

7

Sorry just tried to deploy my latest version of the site and got this error - do you know a quick fix or should I post in a new thread?

WARN[0003] buildx: failed to read current commit information with git rev-parse --is-inside-work-tree
failed to solve: rpc error: code = Unknown desc = failed to solve with frontend dockerfile.v0: failed to create LLB definition: failed to authorize: rpc error: code = Unknown desc = failed to fetch anonymous token: Get “https://auth.ipv6.docker.com/token?scope=repository%3Alibrary%2Fnode%3Apull&service=registry.docker.io”: dial tcp [2600:1f18:2148:bc02:4bf0:3a98:55ae:e3d5]:443: connect: no route to host

8

Sorry but that’s another issue, not related to the initial question asked here. Please post different issues in different topics …
So - are you sure your webp image can be loaded in your browser by going to: https:/yoursite.com/assets/images/The Real Life Money Promise.webp

9

Yeah it does load

https://cashflow.reallifemoney.co.uk/assets/images/The%20Real%20Life%20Money%20Promise.webp

10

I have no idea what the problem can be, a lot of other webp images on your page load properly and not this one.

11

For the others I have only given webp as an option to make sure they do load and see how they look, just can’t get any webp to show when I give a fallback source

12

Can you please try fixing the image names to not use spaces to see if that fixes the problem?

13

I am having the issue previously mentioned with deploying but tried this on my local dev server and it didn’t fix the problem

14

Then most probably your server needs to be configured for webp support. Without the necessary configuration, the server won’t be able to detect whether a user’s browser supports webp or not, and it won’t provide the webp version of the image even if the browser is capable of displaying it.

15

What server are you deploying to? I had the same type of issue on IIS. I had to add the mime type and set it to image for the browser to be able to open it correctly. Not sure how to do it on other servers, but I think @teodor is right that its a configuration error on the server. Its not an error but lack of configuration on how to handle a .webp

https://www.itnota.com/serving-webp-image-iis/

16

I am using digital ocean - going to have a look now if I can set it to support webp

17

Maybe try this?

https://www.digitalocean.com/community/tutorials/how-to-create-and-serve-webp-images-to-speed-up-your-website