html - 如何在图片标签上使用后备 - Safari Webp

Question

我正在使用如下代码:

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

我希望的是，当某些版本的 Safari 浏览器不支持 Webp 图像格式时，根据媒体查询回退到以下来源，而不是直接回退到 "default_img.jpg"。
但不是这样，我得到的是直接回退:

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

有谁知道我做错了什么？

Answer 1

好吧，我看到添加类型开始正常工作:

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

如果用户代理不支持 MIME 类型，则跳过源元素。
例如:如果宽度 < 1200px 并且 webp 不受支持，它会回退到:

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

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