Webp and <picture><source will not work for me on chrome

7
votes

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.

2
htmlwebp

2 Answers

1
votes

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?

0
votes

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.