image - 以下一代格式提供图像

标签 image performance web jpeg jpeg2000

我的 Google Page Speed Insights 排名受到严重处罚,原因是:

有关“以下一代格式提供图像”的更多信息,请访问 Google 帮助页面 here .

但是,根据this , thisthis很少有浏览器支持这些格式。

在这种情况下你会做什么?什么

最佳答案

您可以使用<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/

相关文章:

javascript - 如何安全地从后端发送图像以在前端 HTML 中显示?

javascript - 向其添加 img 时 Div 改变大小

java - 我什么时候应该使用多个 SOLR 实例?

javascript - 如何检查元素是否具有特定位置?

web-applications - Web 应用程序和网站之间的区别

java - JBoss 网站 : HTTP Status 404

java - 创建类似祖玛的网页游戏 - 使用哪种技术?

php - imagecreatefromwebp() -> imagejpeg() 导致蓝色 channel 缺失

php - 按添加日期对文件进行排序 Laravel PHP

java - 抛出并捕获异常,还是使用instanceof?