I am trying to use a picture tag to show an animated image (gif), but it is not loading.
The same file loads fine when I use an img tag.
Why is that? What am I doing wrong?
<!-- This works -->
<img src="./some.gif" />
<!-- This does not work -->
<picture>
<source srcset="./some.gif" type="image/gif" />
</picture>
Tried specifying type="image/gif". It still didn't work.
<picture> element is typically used for responsive images and allows you to provide multiple sources for different scenarios, like different screen sizes or formats.
In your case, since you're dealing with a GIF, which is a single image file, you might not need the element. The tag should suffice. The element is more useful when dealing with multiple image sources.
Try simplifying it:
<!-- This should work -->
<img src="./some.gif" />
If you specifically need to use the element, make sure there's a fallback tag within it:
<!-- This could also work with the picture element -->
<picture>
<source srcset="./some.gif" type="image/gif" />
<img src="./some.gif" alt="Your Alternative Text">
</picture>
<picture>'s use cases, and I know I could add an <img> as a fallback. I did check MDN pages of picture/source/img. The question is still why isn't it working when I specify a single gif source?
<picture> element is generally used for more complex scenarios with multiple sources, like different resolutions or formats. therefore it's recommended to replace <picture> with img instead