如何使用后退图片标签- 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类型，则跳过源元素。

ex: if width <1200px和webp是不支持的，它退回到:

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

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