htmlsafariwebpfallbackpicturefill

How to use fallback on picture tag - Safari Webp

I'm using a code like:

<picture class="image-holder">
    <source srcset="some_img.webp" media="screen and (max-width: 1200px)">
    <source srcset="some_img.webp" media="screen">
    <source srcset="some_img.jpg" media="screen and (max-width: 1200px)">
    <source srcset="some_img.jpg" media="screen">
    <img srcset="default_img.jpg" alt="">
</picture>

and what I hope is that when a browser like some versions of Safari doesn't support the Webp image format, fallback to the following source depending on media query and not directly to "default_img.jpg" .

But instead of that, what I get is a fallback direct to:

<img srcset="default_img.jpg" alt="">

Does anyone know what I'm doing wrong?

Solution

  • Well, I saw that adding the type, starts to work properly:

    <picture class="image-holder">
    <source srcset="some_img.webp" media="screen and (max-width: 1200px)" type="image/webp">
    <source srcset="some_img.webp" media="screen" type="image/webp">
    <source srcset="some_img.jpg" media="screen and (max-width: 1200px)">
    <source srcset="some_img.jpg" media="screen">
    <img srcset="default_img.jpg" alt="">
</picture>

    if the MIME-type is not supported by the user agent the source element is skipped.

    ex: if width < 1200px and the webp is unsupported, it fallback to:

    <source srcset="some_img.jpg" media="screen and (max-width: 1200px)">

    ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture