Question

正如Google为提高网页性能所建议的那样，我正在将webp图像添加到我的项目中。但是我知道Safari不支持此图像类型，因此我尝试为Safari用户添加后备png图像。

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

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

Answer 1

如果列出了多个背景图像源（如果它们都受支持），则全部下载，然后Page Speed Insights会检测到这些图像下载并因此而受到惩罚。

许多人这样做，他们试图优化文件大小，最终错误地为每个图像下载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>

提供下一代格式的图像：后备图像？

1 个答案: