提供下一代格式的图像 [英] Serve Images in Next-Gen Formats

问题描述

由于以下原因，我在Google Page Speed洞察力中的排名受到严重惩罚:

My ranking from Google Page Speed insights is being severely penalised because of:

以下一代格式提供图像"在Google帮助页面上的更多信息此处.

"Serve Images in Next-Gen Formats" more info on Google's help page here.

但是，根据此，此支持这些格式很少的浏览器.

However, according to this, this and this those formats are supported very few browsers.

在这种情况下您要做什么?

What do you do in this scenario? What

推荐答案

您可以使用< picture> 元素将WebP图像交付给支持它的浏览器的用户，而后退到JPEG或PNG(不支持JPEG或PNG).使用< picture> 元素而不是其他回退方法的优点是，不支持该元素的浏览器将回退到< img> 中定义的任何源.code>标签.

You could use the <picture> element to deliver a WebP image to users with browsers that support it, falling back to a JPEG or PNG for those that don't. The advantage of using the <picture> element rather than other fallback methods is that browsers that don't support the element will fallback to whatever source is defined in the <img> tag.

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

这是一种将源图像转换为WebP的方法

如果您使用的是WordPress，则有一些插件会自动从您的媒体库生成WebP图像，并包含后备功能.我唯一使用过的是WebP Express，但当客户被警告，他们的100/100 PageSpeed Insight得分在Lighthouse推出后一整夜下降到30分时，它为我提供了很好的服务.

If you're using WordPress there are plugins that will automatically generate WebP images from your media library and include fallback functionality. The only one I've used is WebP Express but it served me reasonably well when a client was alarmed that their 100/100 PageSpeed Insight score took a nosedive to 30 overnight with the Lighthouse roll-out.

这确实是Google推广另一种专有技术的另一种方式，但是WebP压缩是相较于其他下一代"格式，.

This does feel like another way for Google to push another propriety technology but then WebP compression is quite impressive compared to other 'next-gen' formats.

这篇关于提供下一代格式的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！