Web 性能入门指南-3.1 图片优化最佳实践

有人说一张图片胜过千言万语。不幸的是，下图也会占用 1,000 KB 的空间。图像是提供丰富、用户友好的在线体验的重要组成部分。优化图像的加载方式和重量至关重要 - 确保您的精美图像不会影响您的页面速度。

提供合适的图片尺寸

如果您只做一件事来优化您的图片，那么应该确保您的图片大小合适，这样您就不会提供任何大于必要大小的图片。网络上到处都是比需要大得多的图片。

如果您的目标屏幕分辨率较高，则以 100px x 100 像素显示的图像理想情况下应为 200px 宽和 200px 高；如果您的目标屏幕分辨率较低，且为低端设备，则图像应尽可能接近 100px x 100px。

srcset您可以通过使用和属性的某种组合来确保显示正确尺寸的图像sizes。

源码

该srcset属性允许您向浏览器提供图像源列表。然后浏览器将根据图像的大小和屏幕的分辨率选择最合适的图像。

例如，使用上面的示例，如果我们有一张以 100px x 100px 显示的图像，我们可以创建该图像的两个版本 - 一个是 100px x 100px，另一个是 200px x 200px。然后我们可以像这样将每个图像源提供给浏览器：

<img
  width="100"
  height="100"
  src="our-image-100.jpg"
  srcset="our-image-100.jpg 1x, our-image-200.jpg 2x"
 />

此代码片段告诉浏览器该图像有两个可能的来源，对于低分辨率显示器（1x），它应该使用 100px 图像，而对于高分辨率显示器（2x），它应该使用 200px 图像。

尺寸

如果我们的图像始终以 100px x 100px 显示，则前面的示例srcset非常适合。但是，我们可能经常想要更改图像的显示方式（例如：在大屏幕上，它可能是一个更大的关键图像，但在小屏幕上，它可能是一个小得多的文章标题）。

在这种情况下，srcset单靠这个还不够。相反，我们必须使用属性sizes来告诉浏览器图像的显示尺寸。

例如，我们可以稍微扩展一下前面的代码片段：

<img
  width="100"
  height="100"
  src="our-image-100.jpg"
  srcset="our-image-100.jpg 1x, our-image-200.jpg 2x"
  sizes="(min-width: 60em) 100vw, 100px"
 />

现在我们告诉浏览器，如果屏幕宽度至少为 60em，则图像将以 100 倍视口宽度（100%）显示。在较小的屏幕上，它将以 100px 显示。

现在，浏览器已经拥有根据显示器的尺寸和分辨率选择正确尺寸图像所需的所有信息。

使用正确的格式

图像文件格式有很多种，每种格式都有不同的存储图像组成信息的方式，以及不同的压缩信息的方式。使用适当大小的图像后，选择正确的格式是下一个最重要的决定。

虽然人们不断尝试新的图像格式，但您应该了解以下主要格式：

• JPEG： JPEG 是网络上最常见的图像格式，适用于摄影图像，但 WebP 和 AVIF 等新格式具有更好的压缩率，从而可以压缩出更小的图像尺寸。

• PNG： PNG 格式的图像保真度比 JPEG 格式高得多，并且可以支持透明度。但是，保真度的提高是以文件大小为代价的，因此您需要确保使用 ImageOptim 或 Squoosh 等工具压缩您使用的所有 PNG。您还应避免将 PNG 格式用于详细的摄影图像。

• WebP： WebP 格式的内置压缩效果比 PNG 和 JPEG 格式好得多，现在得到广泛支持。在大多数情况下，它可能比 PNG 和 JPEG 更好。

• AVIF： AVIF 格式是另一种较新的格式，其压缩率远高于 JPEG 和 PNG，并且通常比 WebP 格式的压缩率更高。由于它较新，因此您应确保为尚不支持该格式的旧版浏览器提供后备格式。

• SVG： SVG 格式是一种矢量格式（也就是说，它存储的是有关如何重新创建图像的指令，而不是图像数据本身），因此压缩效果极佳。它最适合用于简单的图像，但是，由于图像越详细，显示时必须提供的指令就越多。此格式非常适合图标和徽标，并可在不同的分辨率显示器上自动缩放。

无论使用哪种格式，您都需要确保图像压缩良好。您可以使用Squoosh等工具手动执行此操作，但对于较大的网站和更简单的长期维护，您需要使用 CDN 或专用图像服务来为您处理适当的大小、压缩和文件格式。

对非关键图像应用延迟加载

一个页面上可以有很多图片，但并非所有图片都同等重要。优先级较低的图片（最初隐藏或在初始视口显示之外的图片）在早期请求时并不那么重要，应该延迟加载（在页面初始加载后加载，仅在需要时加载）。确保仅在需要时加载这些图片可以释放网络以用于更重要的资源。

loading我们可以通过使用元素上的属性来帮助浏览器更明智地决定如何加载图像img。

该loading属性告诉浏览器如何积极地加载特定图像，并受到所有主流浏览器的支持。

该属性有两个可能的值loading：

• eager这会告诉浏览器立即加载图像（这是属性的默认值）

• lazy这会告诉浏览器等待加载图像，直到它几乎进入视图范围（确切的距离因浏览器而异，在某些情况下，也因网络连接而异）。

对于关键图像，我们可以选择使用该eager值来告诉浏览器该图像很重要，需要立即加载：

<img loading="eager" src="my-hero.png" />

对于页面下方的图像，我们会告诉浏览器等待加载这些图像，直到需要它们为止：

<img loading="lazy" src="later-image.jpg" />

注意：延迟加载图像过去需要 JavaScript，您仍会看到许多网站和示例使用 JavaScript 来实现此目的。现在我们有了原生浏览器支持的延迟加载图像的方式，但是，使用 JavaScript 来延迟加载图像通常是不必要的，而且在大多数情况下是一种反模式。

确保图像具有尺寸属性

当图像要在屏幕上显示时，浏览器必须确定图像将占用多少空间，以便可以重新排列页面上的其余内容。

在图片下载完成并计算样式之前，浏览器唯一能判断要保留多少空间的方法是查看图片上的height和width属性。如果缺少这些属性，浏览器最初不会为图片保留任何空间。然后，当图片到达时，浏览器将不得不重新排列内容以腾出空间给图片，从而导致布局偏移。

尽可能确保在图像上包含height和属性以避免布局转变。width

<img src="my-image.png" height="100" width="100" />

height和属性width不必是图像的精确尺寸，甚至不必是图像的精确显示尺寸。只要尺寸成比例，浏览器就能保留正确的空间量。

例如，最终将以 1000px x 500px 显示的图像可以安全地赋予height500pxwidth和 250px 的属性。