图片通常占据了网页上下载字节的大部分，也通常占用大量的视觉空间。因此，优化图片通常可以最大限度地节省网站的流量并提高网站性能：浏览器需要下载的字节越少，对客户端带宽的竞争就越少，浏览器下载并在屏幕上渲染有用内容的速度就越快。
图像优化既是一门艺术，也是一门科学：一门艺术是因为单个图像的压缩没有确切的答案；而一门科学则是因为有许多成熟的技术和算法可以显著缩减图片的大小。要找到图片的最佳设置，需要从许多维度进行仔细分析：格式功能、编码数据的内容、质量、像素尺寸等。
优化矢量图像
所有现代浏览器都支持可缩放矢量图形 (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"coding="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 个字节
- 40000 字节 / 1024 = 39 KB
| 维度 | 像素网点 | 文件大小 |
|---|---|---|
| 100 x 100 | 10000 | 39 KB |
| 200 x 200 | 40000 | 156 KB |
| 300 x 300 | 90000 | 351 KB |
| 500 x 500 | 250000 | 977 KB |
| 800 x 800 | 640000 | 2,500 KB |
100x100 像素图片为 39 KB 似乎没什么大问题，但对于较大的图片，文件大小会快速爆炸，并会导致图片资源的下载速度缓慢且费用高昂。到目前为止，这篇博文仅重点介绍“未压缩”图片格式。幸运的是，您可以通过很多方式来缩减图片文件的大小。
一种简单的策略是将图像的“位深”从每个通道 8 位减少为更小的调色板：每个通道 8 位为每个通道提供了 256 个值，总共提供了 16,777,216 (256 ^ 3) 种颜色。如果将调色板减少到 256 色，该怎么办？ 那么，RGB 通道一共只需要 8 位，每个像素立即节省 2 个字节，与最初的每像素 4 个字节的格式相比，压缩了 50% 的压缩量！
具有渐变颜色过渡的复杂场景（例如渐变或天空）需要较大的调色板，以避免出现视觉伪影，例如 5 位资源中的天空像素化。另一方面，如果图片只使用几种颜色，较大的调色板只是在浪费宝贵的位数！
接下来，在优化各个像素中存储的数据后，您可以更加巧妙地查看附近的像素：结果显示，很多图像（尤其是照片）的附近有许多具有相似颜色的像素 - 例如，天空、重复的纹理等。利用这些信息，压缩程序可以应用增量编码，在这种情况下，您可以存储临近像素之间的差异，而无需存储每个像素的各个值：如果相邻像素相同，则增量为“零”，您只需要存储一个位！但为什么到此就止步了...
人眼对不同颜色的敏感度不同：为了解决此问题，您可以减少或增加这些颜色的调色板，从而优化颜色编码。“附近”像素会形成二维网格。这意味着每个像素都有多个相邻像素：您可以利用这一点进一步改进增量编码。您可以查看较大的相邻像素块，并使用不同设置对不同的块进行编码，而不是只查看每个像素的相邻像素。
如您所见，图像优化很快就会复杂（或者很有趣，具体取决于您的观点），并且是学术和商业研究的一个活跃领域。图片占用了大量字节，因此开发更好的图片压缩技术具有巨大的价值！如果您想了解详情，请访问维基百科页面，或查看 WebP 压缩技术白皮书，获取实操示例。
再次强调一下，这些都很不错，但也很有学术意义：它如何帮助您优化网站上的图片？ 请务必了解问题的形状：RGBA 像素、位深和各种优化技术。在深入了解各种光栅图像格式之前，理解并牢记所有这些概念都至关重要。
无损图像压缩与有损图像压缩
对于某些类型的数据（例如网页的源代码或可执行文件），重要的是，压缩程序不能更改或丢失任何原始信息：一个数据缺失或错误就可能完全改变文件内容的含义，甚至更糟，将其完全破坏。对于某些其他类型的数据（如图像、音频和视频），提供原始数据的“近似”表示可能完全可以接受。
事实上，由于人眼的工作方式，我们往往可以放弃一些有关每个像素的信息，以减小图片的文件大小。例如，我们的眼睛对不同颜色的敏感度不同，这意味着我们可以使用更少的位来编码某些颜色。因此，典型的图像优化管道由两个高级步骤组成：
第一步是可选步骤，确切的算法取决于特定的图片格式，但请务必了解，任何图片都可以进行有损压缩步骤以缩减其大小。事实上，各种图片格式（例如 GIF、PNG、JPEG 等）之间的区别在于，它们在应用有损和无损步骤时所使用的特定算法组合。
那么，有损和无损优化的“最佳”配置是什么？ 答案取决于图片内容和您自己的标准，例如在文件大小与有损压缩所引入伪像之间进行权衡取舍：在某些情况下，您可能需要跳过有损优化，以完整保真度呈现复杂的细节。在其他情况下，您或许可以应用主动有损优化来减小图片素材资源的文件大小。这正是您自己的判断和背景需要发挥作用的地方，并没有放之四海而皆准的设置。
举一个动手示例，在使用 JPEG 等有损格式时，压缩程序通常会提供可自定义的“质量”设置（例如，Adobe Photoshop 中的“Save for Web”功能提供的质量滑块），该滑块通常是一个 1 到 100 之间的数字，用于控制特定有损和无损算法集合的内部工作。为了获得最佳效果，请对图片进行各种质量设置实验，不要害怕调低质量，因为视觉效果通常非常好，文件大小的缩减幅度可能会非常大。
图片压缩对核心网页指标的影响
由于图片通常是 Largest Contentful Paint 的候选对象，因此减少图片的资源加载时间可以带来更好的 LCP，无论是在实验室还是实际应用中。
在使用光栅图片格式的压缩设置进行压缩设置时，请务必尝试使用 WebP 和 AVIF 格式，看看与旧格式相比，能否以较小的体量提供相同的图片。
但要小心不要过度压缩光栅图片。一个很好的解决方案是使用图片优化 CDN 找到最适合您的压缩设置，但您也可以使用 Butteraugli 等工具估算视觉差异，以免过度对图片进行编码，从而降低过多画质。
图片优化核对清单
在优化图片时，请注意以下提示和技巧：
- 首选矢量格式：矢量图像与分辨率和缩放无关，因此非常适合多设备和高分辨率的情况。
- 缩减和压缩 SVG 资源：大多数绘图应用生成的 XML 标记通常包含可以移除的多余元数据；请确保您的服务器配置为对 SVG 资源应用 GZIP 压缩。
- 首选 WebP 或 AVIF，而非较旧的光栅格式：WebP 和 AVIF 图片通常比旧的图片格式小得多。
- 选择最佳的光栅图片格式：确定您的功能要求，并选择适合每项特定资源的光栅图片格式。
- 针对光栅格式的最佳质量设置进行实验：不要害怕调低“质量”设置，效果通常非常好，并且能显著减少字节数。
- 移除不必要的图片元数据：许多光栅图片都包含不必要的资源元数据：地理位置信息、相机信息等。请使用适当的工具去除这些数据。
- 提供缩放后的图片：调整图片大小，并确保“显示”尺寸尽可能接近图片的“自然”尺寸。 尤其要密切注意较大的图片，因为在调整尺寸时，此类图片占用的开销最大！
- 自动化、自动化、自动化：投资于自动化工具和基础架构，以确保您的所有图片素材资源始终得到优化。