Why is a gif image displayed when used inside a picture element?

Question

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.

Answer 1

<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>