高性能图像：2022 年指南

图片能够吸引用户、增加点击量，通常能提升网站的整体效果——但性能除外。图片占用大量字节，通常是网站加载速度最慢的部分。这份 2022 年指南包含了您在网页上获得快速图片体验所需的一切知识。

图片文件很大，真的非常大。一张图片所需的字节数远超大多数网站的 CSS 和 JavaScript 资源。图片加载缓慢会影响网站的核心性能指标，进而影响 SEO 并导致流量损失。图片通常是影响最大内容绘制 (LCP) 的主要因素，而加载延迟会增加累积布局偏移 (CLS)。如果您不熟悉这些指标，请参阅《网站性能测量权威指南》。

本指南涵盖图像格式、分辨率、质量的优化，以及嵌入式图像和延迟加载等内容。让我们开始吧！

1. 图像格式

首先，你的图片格式必须正确。图片格式是为特定类型的图片设计的，所以使用错误的格式会让原本就很大的图片效果更差。

一般来说，照片最好使用jpg格式，图片最好使用png格式。举个简单的例子：

左边是我们朋友树懒萨姆的照片。JPG 格式的文件只有32.7 KB。把同一个文件转换成 PNG 格式，文件大小就翻了一倍多，达到了90.6 KB！

右侧是Sam的插图，PNG格式更合适，只有5.5KB。但如果转换成JPG格式，文件大小会增加到11.3KB。

请注意，插图通常比照片小得多。在设计页面外观时，务必考虑这一点。

还有很多其他格式！如果你的作品是矢量图（线条和路径），SVG 格式就非常理想。较新的浏览器也支持一些更新的格式，例如 AVIF 和 WebP，这些格式的文件可能更小。

2. 响应式图像分辨率

并非所有用户都会以相同的方式浏览您的网站。有些用户会使用 1600 像素宽的超大屏幕显示器，而另一些用户可能使用 900 像素宽的平板电脑或 600 像素宽的手机。对于这些小尺寸设备而言，1200 像素宽的图片会占用大量不必要的空间，因为图片最终都会被缩小显示。

为什么不在用户下载图片之前就缩小图片尺寸呢？使用HTML 响应式属性来描述图片的可用尺寸以及何时使用这些尺寸。

<img src="picture-1200.jpg"
  srcset="picture-600.jpg   600w,
          picture-900.jpg   900w,
          picture-1200.jpg 1200w"
  sizes="(max-width: 900px) 100vw, 1200px"
  alt="my awesome picture" height="900" width="1200" />

在这种情况下，基础图像的宽度为 1200 像素，这也是默认值src。该框架srcset定义了三张宽度分别为 600 像素、900 像素和 1200 像素的图像。它sizes使用 CSS 媒体查询来提示浏览器图像的可用尺寸。如果窗口宽度小于 900 像素，则框架将以全宽（100vw）显示。否则，框架的宽度永远不会超过 1200 像素。

大多数图像处理工具，例如 Photoshop、GIMP和Paint.NET，都可以导出多种分辨率的图像。您电脑自带的图像查看器可能也具备一些有限的图像缩放功能。要大规模地自动执行此操作，您可以考虑使用像ImageMagick这样的命令行工具。

手机上隐藏图片

有些网站可能根本不想在移动设备上显示图片，因为图片体积太大。display:none给图片设置样式作用不大，因为浏览器仍然会浪费时间和流量下载图片。你可以使用 `display: none` 来sizes告诉浏览器何时不显示图片。

<img src="picture-1200.jpg"
  srcset="picture-600.jpg   600w,
          picture-900.jpg   900w,
          picture-1200.jpg 1200w"
  sizes="(max-width: 600px) 0, 600px"
  alt="my awesome picture" height="900" width="1200" />

对于小于 600 像素的屏幕尺寸，图像的边框宽度为 0 像素。因此，浏览器知道无需下载任何内容，因为没有图像需要显示。

3. 图像质量

除了图像格式和分辨率之外，通常还可以通过有损压缩来调整图像质量。这些算法会移除图像中一些不易察觉但仍会占用空间的部分。请看以下示例：

这种降噪是通过去除未使用的颜色，或者合并过于相似以至于难以察觉的颜色和像素来实现的。但您不必担心这一点，大多数优化工具都能检测出图像合适的质量级别。TinyPNG和ImageMin就是很好的例子。

4. 嵌入图像

有时，图片对于网页的实用性至关重要，例如按钮、徽标或图标。在尽可能缩小图片尺寸后，提升速度的唯一方法就是将图片嵌入页面。这样可以减少一次网络请求，并在文档开始渲染时立即显示图片。

您可以通过将图像转换为base64 字符串并将其直接放入 html 标签中来嵌入图像，如下所示：

这看起来可能有点奇怪，但它作为数据 URL是完全支持的。它src定义了图像格式为经过 Base64 编码的 PNG 图片。其余部分是图像的实际内容，在本例中是一个红色小点。

谷歌经常在搜索结果展示中使用嵌入式图片。这也是谷歌速度如此之快的原因之一。不妨看看我们对谷歌性能的评测，以及您可以从中学到什么。

这是一个方便的网页工具，可以将你的图片转换为 base64 格式。

5. 图片延迟加载

网站包含大量无需立即加载的图片。但浏览器无法预知需要哪些图片，所以只能全部下载！下载这些额外的图片会造成延迟和网络拥堵，从而影响关键图片的加载速度。

相反，你可以让浏览器“懒加载”！懒加载是一种让浏览器等到某些图片对用户可见时再下载的技术。这可以显著提升最大内容绘制（LCP）的性能，因为浏览器可以专注于渲染关键元素。

HTML 规范正在尝试使用一个loading属性来实现图片懒加载，但目前仍处于实验阶段。Safari 浏览器尚不支持该属性，因此对大多数网站来说，它目前还不太实用。幸运的是，我们可以用 JavaScript 来实现！

有一些延迟加载库，例如lazysizes。这些库处理了很多特殊情况和浏览器兼容性问题，但本质上它们运行的​​代码如下：

var lazyEls = [].slice.call(document.querySelectorAll("[data-src]"));

var lazyObserver = new IntersectionObserver(function(entries) {
  entries.forEach(function(entry) {
    if (entry.isIntersecting) {
      var el = entry.target;
      var src = el.getAttribute("data-src");
      if (src) { el.setAttribute("src", src); }
      lazyObserver.unobserve(el);
    }
  });
});

lazyEls.forEach(function(el) {
  lazyObserver.observe(el);
});

这段代码使用IntersectionObserver来检测元素何时可见。当图像可见时，它会将data-src属性值移动到 `<div>` src，然后下载图像。您可以将此模式应用于srcset任意数量的元素。

你可以通过将src属性重命名来实现这一点。data-src

<img data-src="picture-1200.jpg"
  loading="lazy" class="lazy" />

此标记同时使用了 experimentalloading属性和我们可以与 JavaScript 函数或库一起使用的通用属性。

布局尺寸

对于延迟加载的图片，指定图片尺寸以防止布局偏移尤为重要。布局偏移是指由于内容尺寸动态变化，导致元素位置在加载过程中发生变化。了解更多关于布局偏移及其对性能的影响。

您可以通过在图像上指定 aheight和属性来防止这种情况发生。width

<img data-src="picture-1200.jpg"
  loading="lazy" class="lazy"
  width="1200" height="900" />

请注意高度和宽度属性。它不是 1200px，而是 1200。而且它的实际效果也并非完全如你所想——这个元素的大小不一定是 1200x900，而是取决于 CSS 样式和布局的需要。但浏览器会记住这些属性中的宽高比，从而确保图像的高度与其宽度相匹配。

因此，如果您的布局中图像的宽度只有 800px，浏览器无需下载图像，就会知道还要预留 600px 的高度，以保持宽高比。

结论

这些技巧将显著提升您的网站和图片加载速度。正确的图片格式、分辨率、质量和加载顺序能够显著改善用户体验。不确定用户目前对您的网站有何看法？不妨试试Request Metrics 的性能监控工具，追踪真实用户的性能指标。