如果您对 Google PageSpeed Insights 进行了性能审核，您可能会看到“以下一代格式提供图像”的机会出现。
内容为王，但在 WordPress 网站上传递内容所使用的格式也很重要。下一代（下一代的缩写）格式是一种加快网站上图像加载时间的方法。它们可以通过嵌入的压缩信息加载到现代浏览器中，因此访问者不必永远等待。
本文将介绍可用的下一代格式以及如何在 WordPress 上以这些特定格式提供图像，以使您的网站更快并提高 Lighthouse 性能得分。
什么是下一代格式以及为什么应该使用它们
下一代图像提供卓越的压缩和质量。它们非常适合网络使用，因为它们占用的数据较少，同时保持相同的高水平图像质量。
您可以在 WordPress 上使用两种主要的下一代图像格式，即：
- WebP（由 Google 开发）是一种同时使用有损和无损压缩格式的图像格式。您可以获得小文件大小的高质量图像！WebP 绝对是 JPEG、PNG 和 GIF 图像的绝佳替代品，因为图像的质量也得到了保留：
- AVIF（由开放媒体联盟开发）是一种图像文件格式，可以在保持相同图像质量的同时使图像更小。AVIF 往往比 WebP 更压缩文件，但 AVIF 作为一种年轻的文件格式，在浏览器支持方面落后。因此，我们鼓励您为 WordPress 网站使用 WebP 格式。
Google PageSpeed Insights 还建议您以 WebP 和 AVIF 等下一代格式（而不是 PNG 或 JPEG）提供图像：
以 WebP 等下一代格式提供图像有哪些好处？
与 PNG 或 JPEG 相比， WebP 图像的大小大约小 30%。
请记住，对于大多数网站来说，图像是降低网站速度的罪魁祸首。大图像不仅会减慢您的网站速度，还会增加页面的重量。这将影响您在移动设备上的性能，因为较重的页面将需要更长的时间才能在移动网络上加载。
最后，网站速度是谷歌在确定排名时考虑的一个主要因素。如果您不想出现在第 5 页，请记住使用 WebP 等下一代格式来优化您的图像。
让我们看看如何在 WordPress 上将图像转换为 WebP。
如何在 WordPress 上以下一代格式提供图像
将图像转换为下一代格式的最简单、最快的方法是使用 WordPress 插件。但是，您也可以手动优化和转换图像。
让我们回顾一下这两个选项。
选项 1 – 如何使用插件将图像转换为下一代格式
与往常一样，使用 WordPress 插件可以为您节省宝贵的时间。甚至 Google 也建议使用插件将上传的图像转换为 WebP 或 Avif。
选项 2 – 如何在不使用插件的情况下以下一代格式提供图像
如果您不想使用插件将图像转换为下一代格式，您可以手动添加一段代码。您可以为您的 WordPress 网站遵循以下两个不同的选项。
1. 直接编辑您的 WordPress .htaccess 文件
仅当您非常熟悉编码和编辑站点文件时，我们才建议您使用此选项。.htaccess 文件是一个功能强大的网站文件，它控制网站的高级配置。
将GitHub中的以下代码放入.htaccess 文件中，以将 jpg/png/gif 图像替换为 WebP 图像：
<IfModule mod_rewrite.c>
RewriteEngine On
# Check if browser supports WebP images
RewriteCond %{HTTP_ACCEPT} image/webp
# Check if WebP replacement image exists
RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
# Serve WebP image instead
RewriteRule (.+)\.(jpe?g|png|gif)$ $1.webp [T=image/webp,E=REQUEST_image]
</IfModule>
<IfModule mod_headers.c>
# Vary: Accept for all the requests to jpeg, png and gif
Header append Vary Accept env=REQUEST_image
</IfModule>
<IfModule mod_mime.c>
AddType image/webp .webp
</IfModule>
2. 在 HTML 中使用 <picture> 元素
修改 .htaccess 文件可能很棘手。更负责任的选择是使用 <picture> 标签。在这种情况下，浏览器将自动选择合适的文件格式来显示。
<picture>
<source srcset="/path/to/image.webp" type="image/webp">
<img src="/path/to/image.jpg" alt="">
</picture>
发表回复