WebP 是一个比较强大的图片格式, 但是 Safari 完全没有要支持的迹象. 要怎么样才能同时提供多个版本的图像呢? <picture> 元素可以通过多个 <source> 提供多个图像资源, 供浏览器选择.

HTML `<picture>`

Can I Use

从 Can I Use WebP 的结果来看, 确实不太理想, 整个 Safari / Safari iOS 都完完全全不支持, 不过我们有另外一套方案来解决这个问题. <picture>, 图上自己也说了:

A responsive images method to control which image resource a user agent presents to a user, based on resolution, media query and/or support for a particular image format

Can I Use Picture

HTML `<picture>`

<picture> 内支持一个 img 元素和多个 source 元素. 浏览器通过 source 元素的 media/type 属性来选择最合适的 source, 并用 source 元素的 srcset 属性替换掉 img 的 src 属性. 而对于完全不支持 picture 的古老版本浏览器, 还有一个 img 元素可以正常工作.

<picture>
    <source type="image/webp" srcset="image.webp" />
    <img src="image.png" />
</picture>

在这里, WebP 对应的 <source> 中的 type 必须指明为 webp 的 MIME-Type, image/webp, 在这种情况下 Safari 才会因为自己不支持 WebP 而 fallback 到 PNG

HTML <picture>

Can I Use

HTML <picture>

HTML `<picture>`

HTML `<picture>`