Menu
I'm facing a problem, I just can't seem to find out what the problem is, I have:
<picture>
<source type="image/webp" srcset="/images/meh_logo.webp">
<img src="/images/meh_logo.png" type="image/png">
</picture>
On chrome, it's just defaulting to the png logo.
If I hover over the link in inspector, it shows the webp image.
If I open the webp image link in a new tab, it loads file.
My headers return:
image/webp,image/apng,image/,/*;q=0.8
If I change source srcset to img srcset - that will display the webp file.
Chrome: 70.0.3538.110
Tested locally on MAMP Pro and doesn't display.
936
According to caniuse, currently 79.2% of browsers support the WebP image format. That would include Chrome, Firefox, and Edge. Safari will support WebP in version 14, which is expected to be released in September 2020.
Webp is a image format developed by Google for web graphics, you can rename the file using file. jpeg naming to open it normally, this happens because there are many extensions like jpeg, png, bmp, webp, Google saves image in webp format because it was originally webp image not jpeg I guess. George G.
To do this: Install the chrome extension ModHeader. Use that to change the "Accept" Heder to "text/html,application/xhtml+xml,application/xml;q=0.9,image/apng,/;q=0.8". Install User-Agent Switcher and change to a browser such as Internet Explorer 9 that does not support webp.
The WEBP is a tree. The PNG is a rose. You used the code below...
<picture>
<source type="image/webp" srcset="https://www.gstatic.com/webp/gallery/4.sm.webp">
<img src="https://www.gstatic.com/webp/gallery3/1.sm.png" type="image/png">
</picture>According to this source you should repeat the source, like this:
<picture>
<source srcset="https://www.gstatic.com/webp/gallery/4.sm.webp" type="image/webp">
<source srcset="https://www.gstatic.com/webp/gallery3/1.sm.png" type="image/png">
<img src="https://www.gstatic.com/webp/gallery3/1.sm.png" alt="Image" class="tm-img">
</picture>When I run these scripts in FF and Chrome they show a tree, thus show the WEBP image. What do you see?
107
After reading through this question and answer, I was still a little confused, so I'd like to add this clarification: When you use the Chrome inspect tool on your image, it will still highlight the line with your <img> in it, which makes it seem that the larger file is loading. But, as you can see with the example given, the WEBP is actually what is loading and showing on the screen, because neither snippet shows the photograph of a rose found here.
31
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
