Picture Type doesn't appear to be picked up

Picture Type doesn't appear to be picked up
0

#1

I have the following code.

 <picture>
              <source type="image/webp" 
                                 srcset="https://www.mydomain.com/images/snake.webp">

              <img class="img-fluid rounded-circle mb-3" 
                                   src="https://www.mydomain.com/images/snake.jpg" alt="Image of snake">
</picture>

Even on Chrome with .webp support the .jpg image always seems to come up. Anyone know why / what I’m doing wrong?


#2

Do you have a codepen or jsfiddle with the code above in it? If so, we could take a look and see if there are any other issues which could be causing your issue.

I was able to create the following JSFiddle with the same thing you are attempting and it works fine.

https://jsfiddle.net/8mhtcjwd/

Also, my Fiddle does not even need the type=“image/webp” to work on Chrome.


#3

I thought type was only for video formats.

Supported types are listed here: http://www.iana.org/assignments/media-types/media-types.xhtml

But I don’t see webp on it.