正如 Google 对页面性能的建议,我将 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>
最佳答案
如果您列出了多个背景图像源,如果它们都受支持,那么它们都会被下载,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>
关于image - 以下一代格式提供图像 : Fallback Image?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57827671/