我的 Google Page Speed Insights 排名受到严重处罚,原因是:
有关“以下一代格式提供图像”的更多信息,请访问 Google 帮助页面 here .
但是,根据this , this和 this很少有浏览器支持这些格式。
在这种情况下你会做什么?什么
最佳答案
您可以使用<picture>
元素向使用支持它的浏览器的用户提供 WebP 图像,对于那些不支持的浏览器则回退到 JPEG 或 PNG。使用<picture>
的优势元素而不是其他回退方法的原因是,不支持该元素的浏览器将回退到 <img>
中定义的任何源。标签。
<picture>
<source srcset="img/yourImage.webp" type="image/webp">
<source srcset="img/yourImage.jpg" type="image/jpeg">
<img src="img/yourImage.jpg" alt="Your image">
</picture>
Here's a method for converting source images to WebP .
如果您使用 WordPress,有一些插件可以自动从您的媒体库生成 WebP 图像并包含后备功能。我唯一使用过的是 WebP Express,但当客户担心他们的 100/100 PageSpeed Insight 分数随着 Lighthouse 的推出而一夜之间骤降到 30 时,它对我的帮助相当大。
这确实感觉像是 Google 推出另一种专有技术的另一种方式,但 WebP 压缩是 quite impressive compared to other 'next-gen' formats .
关于image - 以下一代格式提供图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53588983/