使用 <picture> 对旧版浏览器的 WEBP 支持
WEBP support for legacy browsers using <picture>
我使用以下代码希望支持 IE11 和 Safari (iOS11)。期望的行为是在支持 ita 的浏览器上加载 WEBP 图像，在 IE11/iOS11 中加载 PNG（不支持 WEBP。）我在这里使用（稍微）类似的 answer 作为参考。
<picture>
<source srcset="image.png" type="image/png">
<source srcset="image.webp" type="image/webp">
<img src="image.png">
</picture>
如果要Chrome显示webp图片，IE11显示png图片，需要先放webp源。你可以参考下面的代码，它在IE 11中显示玫瑰（png图片），在Chrome中显示树（webp图片）：
<picture>
<source type="image/webp" srcset="https://www.gstatic.com/webp/gallery/4.sm.webp">
<source type="image/png" srcset="https://www.gstatic.com/webp/gallery3/1.sm.png">
<img src="https://www.gstatic.com/webp/gallery3/1.sm.png">
</picture>
我使用以下代码希望支持 IE11 和 Safari (iOS11)。期望的行为是在支持 ita 的浏览器上加载 WEBP 图像，在 IE11/iOS11 中加载 PNG（不支持 WEBP。）我在这里使用（稍微）类似的 answer 作为参考。
<picture>
<source srcset="image.png" type="image/png">
<source srcset="image.webp" type="image/webp">
<img src="image.png">
</picture>
如果要Chrome显示webp图片，IE11显示png图片，需要先放webp源。你可以参考下面的代码，它在IE 11中显示玫瑰（png图片），在Chrome中显示树（webp图片）：
<picture>
<source type="image/webp" srcset="https://www.gstatic.com/webp/gallery/4.sm.webp">
<source type="image/png" srcset="https://www.gstatic.com/webp/gallery3/1.sm.png">
<img src="https://www.gstatic.com/webp/gallery3/1.sm.png">
</picture>