以next-gen格式提供图片：备用图片？

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>

- AndrewLeonardi

Answer 1

如果您列出多个背景图像源，如果它们都受支持，它们都会被下载。Page Speed Insights将检测这些图像下载并对其进行惩罚。

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

在开发者工具中打开“网络”选项卡，运行下面的代码片段，您将看到发出了两个图像请求（在支持两种格式的浏览器中）。

最好的情况是使用浏览器支持嗅探，并在图像加载之前动态更换图像src（为没有JavaScript提供回退），这既复杂又混乱。

另一个选择是更改轮播以不使用背景图像，而是使用HTML5 元素，因为它总是返回它支持的第一个选项，并且在需要向后兼容的较旧的浏览器中也可以使用。

<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>

- GrahamTheDev