以下一代格式提供图像:备用图像?

Question

正如谷歌建议的页面性能，我正在将webp图像添加到我的项目中。但是我知道 Safari 不支持这种图像类型，所以我正在尝试为 Safari 用户添加回退 png 图像。

我使用了下面的设置。这可以作为后备，但现在谷歌告诉我我再次使用了错误的图像类型。这不是正确的设置吗？

<div class="carousel-item" 
style="background-image: url('http://a.webpurr.com/l8r1.webp'), 
url('https://i.imgur.com/fVmGtb3.png')">
</div>

Answer 1

如果您列出多个背景图像源，如果它们都受支持，则会下载这些图像，然后页面速度见解会检测到这些图像下载并因此对您进行处罚。

许多人这样做，他们试图优化文件大小，最终错误地为每个图像下载 2 张图像。

在开发人员工具中打开network选项卡并运行下面的代码片段，您将看到发出两个图像请求(在支持两种格式的浏览器中(

最好的方案是在图像加载之前使用浏览器支持嗅探和动态交换图像src(为没有JavaScript提供回退(，这既复杂又混乱。

另一种选择是将轮播更改为不使用背景图像，而是使用 HTML5<picture>元素，因为这将始终返回它支持的第一个选项，并且如果您需要向后兼容性，也可以在不支持它的旧浏览器中工作。

<picture>
<source srcset="img/awesomeWebPImage.webp" type="image/webp">
<source srcset="img/creakyOldJPEG.jpg" type="image/jpeg"> 
<img src="img/creakyOldJPEG.jpg" alt="Alt Text!">
</picture>

.demo{
max-width : 400px;
height: 400px;
background-image: url("http://a.webpurr.com/l8r1.webp"),  url("https://i.imgur.com/fVmGtb3.png")
}

<div class="demo"></div>