选择正确的压缩级别

Ilya Grigorik
Jeremy Wagner

图像通常占网页下载字节的大部分，并且经常占据大量的视觉空间。因此，优化图像通常可以为你的网站带来最大的字节节省和性能改进：浏览器需要下载的字节越少，客户端带宽的竞争就越小，浏览器下载和渲染屏幕上有用内容的速度就越快。

图像优化既是一门艺术，也是一门科学：说它是艺术是因为对于如何最好地压缩单个图像没有明确的答案，说它是科学是因为有许多成熟的技术和算法可以显著减小图像的大小。为你的图像找到最佳设置需要仔细分析多个维度：格式功能、编码数据的内容、质量、像素尺寸等等。

优化矢量图像

所有现代浏览器都支持可缩放矢量图形 (SVG)，这是一种用于二维图形的基于 XML 的图像格式。你可以将 SVG 标记直接嵌入到页面中，也可以作为外部资源。大多数基于矢量的绘图软件都可以创建 SVG 文件，或者你可以直接在你喜欢的文本编辑器中手动编写它们。

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.2" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
    x="0px" y="0px" viewBox="0 0 612 792" xml:space="preserve">
<g id="XMLID_1_">
  <g>
    <circle fill="red" stroke="black" stroke-width="2" stroke-miterlimit="10" cx="50" cy="50" r="40"/>
  </g>
</g>
</svg>

上面的示例渲染了下面这个带有黑色轮廓和红色背景的简单圆形形状，它是从 Adobe Illustrator 导出的。

<?xml version="1.0" encoding="utf-8"?>

你可以看出，它包含了很多元数据，例如图层信息、注释和 XML 命名空间，这些对于在浏览器中渲染资源通常是不必要的。因此，始终建议通过诸如 SVGO 之类的工具来缩小你的 SVG 文件。

例如，SVGO 将 Illustrator 生成的上述 SVG 文件的大小减少了 58%，从 470 字节减少到 199 字节。

<svg version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 792"><circle fill="red" stroke="#000" stroke-width="2" stroke-miterlimit="10" cx="50" cy="50" r="40"/></svg>

由于 SVG 是一种基于 XML 的格式，你还可以应用 GZIP 压缩来减小其传输大小——确保你的服务器配置为压缩 SVG 资源！

栅格图像只是一个由单个“像素”组成的二维网格——例如，一个 100x100 像素的图像是一系列 10,000 个像素。反过来，每个像素存储“RGBA”值：（R）红色通道、（G）绿色通道、（B）蓝色通道和（A）alpha（透明度）通道。

在内部，浏览器为每个通道分配 256 个值（阴影），这转换为每个通道 8 位（2 ^ 8 = 256），每个像素 4 个字节（4 个通道 x 8 位 = 32 位 = 4 字节）。因此，如果我们知道网格的尺寸，我们可以轻松计算文件大小

  • 100x100 像素图像由 10,000 个像素组成
  • 10,000 像素 x 4 字节 = 40,000 字节
  • 40,000 字节 / 1024 = 39 KB
尺寸 像素 文件大小
100 x 100 10,000 39 KB
200 x 200 40,000 156 KB
300 x 300 90,000 351 KB
500 x 500 250,000 977 KB
800 x 800 640,000 2500 KB

39 KB 对于 100x100 像素的图像似乎没什么大不了的，但对于较大的图像，文件大小会迅速膨胀，这使得图像资源下载速度慢且成本高昂。到目前为止，这篇文章只关注了“未压缩”的图像格式。值得庆幸的是，我们可以做很多事情来减小图像文件的大小。

一个简单的策略是将图像的“位深度”从每通道 8 位减少到较小的调色板：每通道 8 位为我们提供每个通道 256 个值，总共 16,777,216 (256 ^ 3) 种颜色。如果你将调色板减少到 256 种颜色会怎样？那么你总共只需要 8 位用于 RGB 通道，并立即节省每个像素两个字节——这比原始的每个像素 4 字节格式节省了 50% 的压缩量！

Compression artifacts
从左到右 (PNG)：32 位（1600 万种颜色）、7 位（128 种颜色）、5 位（32 种颜色）。

具有渐变颜色过渡的复杂场景（例如，渐变或天空）需要更大的调色板，以避免视觉伪影，例如 5 位资源中的像素化天空。另一方面，如果图像仅使用几种颜色，那么大的调色板只是在浪费宝贵的位！

接下来，一旦你优化了存储在单个像素中的数据，你就可以变得更聪明并查看附近的像素：事实证明，许多图像，尤其是照片，都有许多颜色相似的附近像素——例如，天空、重复的纹理等等。利用这些信息，压缩器可以应用增量编码，其中你可以存储附近像素之间的差异，而不是存储每个像素的单个值：如果相邻像素相同，则增量为“零”，你只需要存储一位！但是为什么要停在那里呢…

人眼对不同颜色的敏感度不同：你可以通过减少或增加这些颜色的调色板来优化你的颜色编码。“附近”像素形成一个二维网格。这意味着每个像素都有多个邻居：你可以利用这一事实进一步改进增量编码。你可以查看更大的附近像素块，而不是仅查看每个像素的直接邻居，并使用不同的设置对不同的块进行编码。

你可以看出，图像优化很快变得复杂（或者很有趣，取决于你的角度），并且是学术和商业研究的活跃领域。图像占用大量字节，开发更好的图像压缩技术具有很大的价值！如果你有兴趣了解更多信息，请访问维基百科页面，或者查看WebP 压缩技术白皮书以获得实践示例。

因此，再一次，这一切都很棒，但也非常学术：它如何帮助你优化网站上的图像？好吧，重要的是要理解问题的形状：RGBA 像素、位深度和各种优化技术。所有这些概念对于理解和牢记至关重要，然后你才能深入讨论各种栅格图像格式。

无损与有损图像压缩

对于某些类型的数据，例如页面的源代码或可执行文件，压缩器不应更改或丢失任何原始信息至关重要：单个丢失或错误的数据位可能会完全改变文件内容的含义，或者更糟糕的是，完全破坏它。对于某些其他类型的数据，例如图像、音频和视频，交付原始数据的“近似”表示可能是完全可以接受的。

事实上，由于眼睛的工作方式，我们通常可以丢弃一些关于每个像素的信息，以减小图像的文件大小——例如，我们的眼睛对不同颜色的敏感度不同，这意味着我们可以使用更少的位来编码某些颜色。因此，典型的图像优化管道包括两个高级步骤

  1. 图像通过有损过滤器处理，该过滤器消除了一些像素数据。
  2. 图像通过无损过滤器处理，该过滤器压缩像素数据。

第一步是可选的，确切的算法将取决于特定的图像格式，但重要的是要理解，任何图像都可以进行有损压缩步骤以减小其大小。事实上，各种图像格式（如 GIF、PNG、JPEG 等）之间的区别在于它们在应用有损和无损步骤时使用的（或省略的）特定算法的组合。

那么，有损和无损优化的“最佳”配置是什么？答案取决于图像内容和你自己的标准，例如文件大小和有损压缩引入的伪影之间的权衡：在某些情况下，你可能希望跳过有损优化，以充分保真地传达复杂的细节。在其他情况下，你或许可以应用激进的有损优化来减小图像资源的文件大小。这就是你需要发挥自己的判断力和背景知识的地方——没有通用的设置。

作为一个实践示例，当使用有损格式（如 JPEG）时，压缩器通常会公开一个可自定义的“质量”设置（例如，Adobe Photoshop 中的“存储为 Web 所用格式”功能提供的质量滑块），它通常是一个介于 1 和 100 之间的数字，用于控制有损和无损算法的特定集合的内部工作原理。为了获得最佳结果，请为你的图像试验各种质量设置，并且不要害怕降低质量——视觉效果通常非常好，而且文件大小的节省可能非常大。

图像压缩对 Core Web Vitals 的影响

由于图像通常是最大内容渲染元素的候选对象，因此减少图像的资源加载持续时间可以在实验室和实际应用中转化为更好的 LCP。

在处理栅格图像格式的压缩设置时，请务必尝试 WebP 和 AVIF 格式，看看你是否可以用比旧格式更小的占用空间交付相同的图像。

但是，你要注意不要过度压缩栅格图像。一个好的解决方案是使用图像优化 CDN 为你找到最佳压缩设置，但另一种方法可能是使用像 Butteraugli 这样的工具来估计视觉差异，这样你就不会过于激进地编码图像并损失太多质量。

图像优化清单

在优化图像时需要记住的一些技巧和技术

  • 首选矢量格式： 矢量图像与分辨率和比例无关，这使其非常适合多设备和高分辨率世界。
  • 缩小和压缩 SVG 资源： 大多数绘图应用程序生成的 XML 标记通常包含可以删除的不必要的元数据；确保你的服务器配置为对 SVG 资源应用 GZIP 压缩。
  • 与旧的栅格格式相比，首选 WebP 或 AVIF：WebP 和 AVIF 图像通常比旧的图像格式小得多。
  • 选择最佳栅格图像格式： 确定你的功能要求，并选择适合每个特定资源的格式。
  • 试验栅格格式的最佳质量设置： 不要害怕降低“质量”设置，结果通常非常好，并且字节节省非常显著。
  • 删除不必要的图像元数据： 许多栅格图像包含关于资源的不必要的元数据：地理信息、相机信息等等。使用适当的工具来去除这些数据。
  • 提供缩放的图像： 调整图像大小并确保“显示”大小尽可能接近图像的“自然”大小。特别注意大型图像，因为它们在调整大小时会产生最大的开销！
  • 自动化，自动化，自动化： 投资于自动化工具和基础设施，这将确保你的所有图像资源始终得到优化。