在 Google 的新视频中，开发者倡导者 Alan Kent 分享了优化电子商务网站图像的六个技巧。
虽然该视频专门针对电子商务网站，但该建议适用于任何提供大量图像的网站。
如果您正忙于在网站上工作，Google 的视频时长超过 14 分钟，很容易消化。
这是一个更美味的回顾，您可以在五分钟内完成。
这些是 Google 让图像加载更快、更高效的技巧。
1.消除图像累积布局移位（CLS）
CLS 是指页面上的内容在加载时从一个地方视觉移动或转移到另一个地方的实例。
虽然此问题并非完全由图像引起，但如果使用不当，它们可能会导致问题。
在大多数情况下，CLS 很容易通过在加载过程中查找页面上的移动来发现，但是有几种工具可以测量它。
有关 CLS、如何测量以及如何修复它的更多信息，请参阅我们的综合指南：
- 请参阅：累积布局转变 – 2021 年 Google 排名因素概述
2. 正确调整图片大小
为您的图像选择正确的宽度和高度，因为较大的文件需要更长的下载时间。
由于访问您网站的屏幕尺寸和分辨率的范围，正确调整图像尺寸可能会很复杂。
如果浏览器自己裁剪图像，下载大小最终会比需要的长，这只会拖累事情。
检测尺寸不正确的图像的一种简单方法是使用 PageSpeed Insights 报告中机会下的正确尺寸的图像部分。
一旦您确定了大于必要的图像，您可以使用响应式图像等解决方案来解决问题。
3. 使用最佳图像文件格式
考虑图像的文件格式，例如是使用 PNG、JPEG 还是 webP 文件。
文件格式会影响文件大小，因此选择正确的格式需要仔细考虑。
每种格式都有优缺点。例如，JPEG 和 webP 往往具有较小的文件大小，尽管较小的大小是以牺牲图像质量为代价的。
但是，购物者可能不会注意到图像质量的下降，并且速度优势可能很大。
要检测您的网站是否可以从使用不同的图像格式中受益，请查看 PageSpeed Insights 报告的以下一代格式提供图像部分。此报告列出了可以转换为更有效文件格式的图像。
4.适当压缩图像
为您的图像使用正确的质量因子以有效地对其进行编码，同时保持所需的图像质量。
PageSpeed Insights 报告的“高效编码图像”部分可用于识别适合压缩优化的图像。该报告还显示了潜在的文件大小节省。
要找到您满意的质量因素，请在使用不同质量值的多张图像上使用您选择的图像转换工具，并比较前后。
Google 推荐网站 Squoosh.app 作为比较压缩和不压缩图像的简单方法。
5.在浏览器中缓存图像
告诉浏览器它可以安全地缓存图像多长时间。
当您返回图像时，您可以返回带有缓存指导的 HTTP 响应标头，例如建议浏览器缓存图像多长时间。
同样，您可以使用 PageSpeed Insights 报告来检测 HTTP 响应缓存标头是否已在您的站点上正确设置。
使用高效缓存策略服务静态资产部分识别可能受益于缓存改进的图像。
要解决您网站上的问题，请查看您是否有可以更改的平台或 Web 服务器设置，以调整您网站上图像的缓存寿命。
如果您不经常更改图像，则可以设置较长的缓存寿命。
6.正确排序您的图像下载
作为更高级的提示，Google 建议正确排序网页资源的下载顺序。
建议下载顺序如下：
- 页面顶部的英雄图像
- 首屏其他图片
- 首屏下方的图片
网页上的其余图像可以延迟加载。
要检测您的网站是否有效地加载图像，您可以参考 PageSpeed Insights 报告。在报告的延迟屏幕外图像部分，您将看到可以在其他图像之后加载的图像列表。
有关上述任何提示的更多详细信息，请参阅下方 Google 的完整视频：
