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

Question

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.

Manilla

Answer 1

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?

Allocution

Forgot all about this! - I guess it must have been a chrome version issue as I see a tree and I am using Chrome 78.0.3904.108 now. – Manilla

Answer 2

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.

Sit

FYI, Original question was related to Chrome 70. Chrome 80 was released yesterday. – Clypeate

Thanks for pointing that out, I just updated! Also, as far as I can tell, version 80 looks the same as it relates to this question. – Sit

Year 2022, inspecting picture with different sources still leads to img tag, which is a bit confusing – Gas

Answer 3

Unfortunately it doesn't work with picture tag any more simply use img tag for that:

Commination