0

What's wrong with this picture tag?

<picture>
    <source type="image/webp" srcset="https://media3.giphy.com/media/8FNlmNPDTo2wE/200.webp">
    <source type="video/mp4" srcset="https://media3.giphy.com/media/8FNlmNPDTo2wE/200.mp4">
    <img src="https://media3.giphy.com/media/8FNlmNPDTo2wE/200.gif" width="356" height="200" alt="me-5sf-fickledavid-8FNlmNPDTo2wE">
</picture>

Chrome should pick up the webp image but it always uses img with gif. If I remove the img tag Chrome shows nothing.

This is the pen I made as a demo https://codepen.io/maxim-palenov/pen/oNvarZY.

The screenshot from Chrome

Maxim Palenov
  • 650
  • 7
  • 17
  • Hi there, just wondering if you discovered antything in relation to this? I'm encountering it myself at present and I'm wondering why it is happening? – Danoz Mar 31 '20 at 22:27
  • **See Also**: [Cross-browser Webp images support](https://stackoverflow.com/q/53206746/1366033) – KyleMit Oct 08 '20 at 18:48

1 Answers1

0

There is no issue in this at all. It is working as expected. In the img tag, it won't replace the webp image.

Here's what you've to do.

  • Rename the gif image to something is broken link. Still, it will keep showing the image.
  • After above, if you rename the webp image link, now you'll see the image getting broken.
Kumar
  • 47
  • 6