如何以适当方式为不支持.webp的浏览器提供.JPG？

Question

我打算WebP在我的电子商务网站上使用，根据Lighthouse测试可以大大提高性能。但是问题是。我们仍然有使用iOS且不支持WebP格式的用户。我需要有关传递图像的正确方式以及如何让用户以JPG下载图像的更多信息。

在我的服务器上。我有两种格式供后备使用。

Answer 1

最简单的方法使用的图片元素。浏览器将考虑每个子元素并在其中选择最匹配的元素；如果找不到匹配项，则选择元素的src属性的URL。

<picture>
    <source srcset="/media/examples/surfer-240-200.webp" type="image/webp">
    <img src="/media/examples/painted-hand-298-332.jpg" />
</picture>

编辑：根据Jaromanda的建议，我们应该在img标签本身中查找后备内容，因为Internet Explorer不支持pictureelement。

<img src="image.webp" onerror="this.onerror=null; this.src='image.png'">

如果我们要确保浏览器仅下载一个文件：WebP或后备图像；不是都。我们可以使用data-in属性，并基于一种浏览器支持分配适当的源，但是我们需要预先检查os / browser。

<img data-jpg="image.jpg" data-webp="image.webp" id="myimg">

和在JS中

let img = document.getElementById('myimg'); if(supportedBrowser){ img.src = img.getAttribute('data-webp'); }else{ img.src = img.getAttribute('data-jpg'); }