如何优化网站图片

步骤

1. 1

   1. 提供正确的尺寸

   测量图片占据的最大CSS宽度，并以大约两倍的尺寸导出，以适应高密度显示器。一个1200 CSS像素的英雄图片需要2400像素的源文件，而不是6000像素的相机原图。这一步通常比所有其他步骤的总和更有效。

2. 2

   2. 使用WebP，尽可能使用AVIF

   WebP在相同质量下比JPEG小25-35%，并且得到广泛支持。AVIF更进一步，但编码速度较慢。如果需要支持非常旧的客户端，请保留JPEG备用。

3. 3

   3. 根据内容设置质量，而不是习惯

   照片使用75-85的质量。对于边缘锐利的图形，压缩伪影更明显，应使用更高的质量。在实际显示尺寸下检查结果。

4. 4

   4. 始终设置宽度和高度

   明确的尺寸可以让浏览器在图片加载前预留空间，从而防止布局偏移。这是一个不花任何代价的累积布局偏移修复方案。

5. 5

   5. 首屏以下延迟加载，首屏以上绝不延迟加载

   对页面下方图片添加 loading="lazy"。不要对 LCP 图片进行延迟加载，这会延迟正在测量的确切内容。