摘要：图片占大多数网站总页面重量的大部分。去年平均网页上的图像字节数增长了30% 以上，请求的增长很小。由于它们相对较大的文件大小和平均站点上包含的图像数量（见图 3-1），优化图像可以说是改善站点页面加载时间的最简单的大赢家。图 3-1。HTT...
图片占大多数网站总页面重量的大部分。去年平均网页上的图像字节数增长了30% 以上，请求的增长很小。由于它们相对较大的文件大小和平均站点上包含的图像数量（见图 3-1），优化图像可以说是改善站点页面加载时间的最简单的大赢家。
图 3-1。HTTPArchive.org对页面权重的调查显示，图像占大多数网站总页面权重的大部分。
您可以通过以下方式对主要内容图像以及构成网站设计的图像进行重大改进：
为每张图像找到文件大小和质量的适当平衡
寻找减少网站上图片请求总数的方法
优化站点的图像创建工作流程以提高性能
让我们从查看可用的各种图像文件类型开始，然后我们将检查用于优化站点图像以提高页面速度的选项。
为您的网站创建图像时，您有多种文件类型可供选择。生成图像时，问问自己：
在没有明显质量降低的情况下，该图像的压缩程度如何？
需要多少种颜色？
我可以以任何方式简化此图像吗？
我需要任何透明度吗？
我需要任何动画吗？
该图像将在多大的高度和宽度上显示？
该图像将如何在整个站点中重新利用？
Web 上最常见的图像文件格式是 JPEG、GIF 和 PNG。表 3-1 概述了每种流行的图像文件格式、最佳使用方式以及一些优化技巧。
表 3-1。图像格式概述
格式 | 最适合 | 优化选项 |
JPEG | 照片，多种颜色的图像 | 降低质量，渐进式输出，降低噪音 |
动图 | 动画 | 减少抖动，减少颜色数量，增加水平图案，减少垂直噪音 |
PNG-8 | 色彩较少的图像 | 减少抖动，减少颜色数量，增加水平和垂直图案 |
PNG-24 | 部分透明 | 减少噪音，减少颜色数量 |
让我们来看看每种文件格式的优缺点，以及如何导出和优化每种图像。
JPEG 是照片或其他具有大量颜色的图像的理想文件格式。JPEG 旨在以足够高的质量以我们的眼睛不会注意到的方式压缩文件。在低质量时，我们会注意到 JPEG 图像中的伪影、条带和颗粒感，因为 JPEG 是一种有损文件格式。有损文件类型在保存时会丢弃信息片段；JPEG 通过使用一种松散地基于人类如何看待和感知信息的算法来选择要丢弃的信息。
伪影是图像区域内的清晰度损失。伪影可能会导致图像看起来模糊、像素化或模糊。
JPEG 在丢弃平滑渐变和低对比度区域的信息方面非常聪明。相邻像素之间具有鲜明对比的图像通常更适合不同的文件格式（例如 PNG），因为在 JPEG 格式中您可能会看到伪影。但由于 JPEG 擅长创建包含大量信息的相对较小的文件，因此 Web 上的大多数图像都是 JPEG 也就不足为奇了。JPEG 中的智能压缩通常会导致复杂图像的文件大小更小，这是我们努力改善加载网页所需时间的目标之一。
对于您生成的任何图像文件，在 Photoshop 中的 Save for Web 工作流程中测试几种不同的质量和文件类型。您的目标是获得可接受的质量和小文件大小的快乐媒体。重要的是要使用文件大小并查看明显的压缩级别。寻找伪影、元素之间的凌乱对比以及模糊的细节和文本。
在图 3-2 中，我们可以看到使用 Photoshop 的 Save for Web 工具以各种质量导出的照片的放大部分。当您比较以质量 25、50、75 和 100 导出的图像时，请注意较低质量的高对比度边缘周围的伪影较多。
质量：25
质量：50
质量：75
质量：100
图 3-2。在 Photoshop 的 Save for Web 导出质量的比较中，较低质量的 JPEG 图像在高对比度边缘周围有更多的伪影，例如顶部白色叶子周围的绿色背景。
在 Photoshop 中，生成图像的主要方法有两种：另存为 Web 工具和另存为。与另存为不同，Save for Web 将为生成的图像文件提供额外的优化，并且还允许您调整图像的质量并在保存前预览结果。Save for Web 将帮助您在图像的美观性和文件大小之间找到平衡点。
图像中的颜色越明显，JPEG 的文件大小就越大，因为 JPEG 的算法更难找到压缩和混合颜色的简单区域。JPEG 中的噪点和颗粒会大大增加其文件大小，如图 3-3 所示。在创建新图像时（尤其是在创建重复图案时），请谨慎使用要引入的颜色数量。
噪点量：5%
JPEG 质量：50%
文件大小：1.56 KB
噪点量：5%
JPEG 质量：75%
文件大小：4.83 KB
噪点量：10%
JPEG 质量：50%
文件大小：2.98 KB
噪点量：10%
JPEG 质量：75%
文件大小：9.02 KB
图 3-3。JPEG 图像噪声、质量和生成的文件大小的比较。
在图 3-3 中，您可以看到通过 Photoshop 的 Save for Web 工具导出然后通过附加的图像压缩工具 ImageOptim 的 JPEG 比较。在“附加压缩”中阅读有关压缩工具的更多信息。原始 JPEG 是一个蓝色方块，在 Photoshop 中添加了噪波过滤器。左两幅图像添加了 5% 的噪声，右两幅图像添加了 10% 的噪声。
对比图片可以看到，导出的噪点少的JPEG文件体积也更小；噪声为 10% 的图像几乎是噪声为 5% 的图像文件大小的两倍。同样，JPEG 质量也会影响总文件大小。在优化页面加载时间时，请牢记噪点和 JPEG 质量，并查看可以在哪些地方节省图像。
您选择的 JPEG 类型也会影响您网站加载速度的感知性能（在“感知性能”中阅读更多内容）。基线 JPEG（通常在 Web 上找到的）是对图像进行全分辨率、从上到下的扫描。渐进式 JPEG 由一系列质量不断提高的扫描组成。
因为基线 JPEG 是自上而下的扫描，所以它们在浏览器中以这种方式出现，其中的一部分会慢慢地以行的形式显示出来。另一方面，渐进式 JPEG 以低质量同时出现。然后这个低质量版本的图像被质量逐渐提高的版本所取代。渐进式 JPEG 似乎比基线 JPEG 加载速度更快，因为它们使用低质量版本一次性填充必要的空间，而不是分块加载图像。
渐进式 JPEG 显示在所有浏览器中。但是，并非所有浏览器都像我们希望的那样快速呈现渐进式 JPEG。在不支持渐进式渲染的浏览器中，渐进式 JPEG 的显示速度会更慢，因为它们是在文件完成下载后出现的，而不是渐进式的。在这些情况下，它们在视觉上会比分阶段到达的基线 JPEG 更慢。您可以在 PerfPlanet 文章“Progressive JPEGs: a new best practice”中阅读有关渐进式 JPEG 浏览器支持的更多信息。
选择 JPEG 类型时的另一个考虑因素是 CPU 使用率。每次逐行扫描所需的 CPU 功率与在页面上渲染一个完整的基线 JPEG 所需的 CPU 功率大致相同。在移动设备上，这可能是一个问题。目前，Mobile Safari 不以渐进方式呈现渐进式 JPEG，考虑到 CPU 的税收，这是可以理解的。但是，其他移动浏览器（例如 Android 上的 Chrome）确实会逐步呈现它们。总的来说，渐进式 JPEG 对整体用户体验来说仍然是一个很好的改进，未来浏览器供应商可能会改进 CPU 的小缺点。
如果您有兴趣通过将基线 JPEG 转换为渐进式 JPEG 来测试现有图像，那么SmushIt 之类的工具可以提供帮助。要使用 Photoshop 中的“保存为 Web”对话框从头开始创建渐进式 JPEG，只需选中“保存为 Web”窗口右上角的“渐进式”复选框，靠近“质量”选择器（参见图 3-4）。
图 3-4。通过选中 Photoshop 的 Save for web 窗口中的 Progressive 复选框来创建渐进式 JPEG。
最后，确保在从 Photoshop 初始导出后通过压缩工具运行任何导出的 JPEG。您可以在很少或没有质量损失的情况下获得额外的文件大小节省。有关建议的压缩工具和工作流程，请参阅“附加压缩”。
GIF 是 Web 上最古老的图形文件格式之一。GIF 文件类型最初创建于 1987 年，用于将多个位图图像存储到一个文件中。由于它能够包含动画，因此它的人气重新抬头。GIF 支持透明度和动画，但在一帧内最多只能包含 256 种颜色。如果 GIF 包含动画，则每个帧可以支持多达 256 种颜色的单独调色板。与 JPEG 不同，GIF 是一种无损文件格式。
在极少数情况下，您可能需要为图像文件格式选择 GIF：
当生成的 GIF 的文件大小小于生成为 PNG-8 的相同图像的文件大小时
当动画不能用 CSS3 替换时
当您创建 GIF 时，您可以使用一些选项来尝试在美观和文件大小之间找到平衡点。首先，您可以在 Save for Web 工具中选择一个抖动量以及调色板中包含的颜色数量，如图 3-5 所示。
图 3-5。在 Photoshop 中创建 GIF。
抖动有助于在颜色之间创建视觉上更平滑的过渡。它检查不同颜色的相邻像素，并在中间选择一种新颜色，以提供更平滑的混合外观。例如，在这张最多有 40 种颜色的图像中，您可以看到抖动设置为 0（图 3-6）与抖动设置为 100（图 3-7）时的外观。
图 3-6。抖动设置为 0 的 GIF：4.8 KB。
图 3-7。抖动设置为 100 的 GIF：9.7 KB。
GIF 的文件大小受抖动量的影响。在图 3-6 和 3-7 中，当抖动设置为 0 时，导出的 GIF 为 4.8 KB。当抖动设置为 100 时，导出的 GIF 为 9.7 KB。请注意，尽管“保存为 Web”调色板中包含最多 40 种颜色，但您的调色板中最多可以有 256 种颜色。
有趣的是，如果我们在 GIF 中改变这个彩色渐变的方向并将其导出并设置抖动为 100，我们会在图 3-8 中看到文件大小的巨大变化。
图 3-8。带有垂直图案的 GIF：21 KB。
为什么在这种情况下文件大小会增加一倍以上？GIF 遵循消除水平冗余的压缩算法。因此，通过引入额外的垂直细节或噪点，我们增加了 GIF 的文件大小。当您创建 GIF 时，请考虑它在优化图像和创建尽可能小的文件大小同时仍然美观的方面可能有多成功。减少垂直噪音，因为它会对您的 GIF 文件大小产生重大影响。
对于大多数包含少量颜色和锐利边缘的图像，PNG-8 将是您选择的文件格式。PNG 使用与 GIF 不同的压缩方法；他们会像 GIF 一样在图像中寻找重复的水平图案，但除此之外，他们还会寻找垂直图案。很有可能您的图像的 PNG-8 版本的文件大小比 GIF 小，因此请务必在文件大小和美观之间找到平衡点时测试 PNG-8。
最后，如果您在 GIF 中有一个简单的动画，例如微调器或加载指示器，请考虑将其替换为 CSS3 动画。CSS3 动画往往比 GIF 更轻且性能更好，因此值得测试一下是否可以在您的网站上替换 GIF。
PNG 是一种无损图像格式，旨在改进 GIF 文件格式。Photoshop 允许您导出 PNG-8 和 PNG-24 图像；在优化性能时，每种格式都有您需要考虑的优缺点。
当您需要图像的透明度时，PNG 将是您的最佳选择。GIF 也支持透明度，但它们往往比 PNG 重得多。PNG 可以识别水平模式并像 GIF 一样压缩它们，但它们也可以找到垂直模式，这意味着您可以从 PNG 中的额外压缩中受益。
当图像中的颜色数量较少时，PNG-8 可能是文件格式的最佳选择。PNG-8 文件在图像中最多包含 256 种颜色，通常会导致文件更小。
在图 3-9 中，您可以看到图像总共包含 247 种颜色。在这个特定的示例中，我们调色板中的所有 247 种颜色都是不同深浅的灰色。PNG-8 图像最多可以包含 256 种颜色，例如 GIF。就像 GIF 一样，我们也可以选择抖动量（在“ GIF ”中阅读更多内容），这将影响文件的总大小。
图 3-9。Photoshop 中的 PNG-8 导出视图。
我们也在使用图 3-9 中的透明度。文本有一个阴影，PNG-8 导出视图选择了一个白色遮罩。遮罩告诉 Photoshop 图像的背景颜色应该是什么；此颜色应与您将放置导出的 PNG 的元素的背景相匹配。Photoshop 正在选择需要透明的像素以及原始半透明阴影如何与我们选择的遮罩混合，以便为文本周围的其他像素着色。
在图 3-10 中，我们将 PNG 设置为最多包含 256 种颜色，但同样我们不需要全部 256 种颜色。在这种情况下，PNG 将仅导出 4 种颜色：白色、蓝色、绿色和红色。即使我们选择了透明度，图像实际上并不需要它，因为它有一个白色背景作为图像的一部分导出。Photoshop 可以帮助您创建优化的图像文件大小，但您仍然需要通过其他压缩工具运行它（在“附加压缩”中阅读更多内容）。
图 3-10。PNG-8 导出视图，颜色很少。
另一方面，PNG-24 文件在调色板中没有相同的限制。虽然您可以将 PNG 用于照片，但它们的文件大小通常比 JPEG 大 5 到 10 倍，因为它们是无损的。与任何其他类型的图像文件一样，减少噪点和颜色数量将有利于 PNG 的整体文件大小。让我们比较一下图 3-11 中的两张图片：一张有 5 条不同颜色的条纹，一张有 10 条。
条纹颜色：5
文件大小：2.96 KB
条纹颜色：10
文件大小：3.14 KB
图 3-11。比较具有 5 种或 10 种颜色的 PNG 之间的文件大小差异。
这些图像通过 Photoshop 中的 Save for Web 工具导出为 PNG-24 图像。通过增加图像中的颜色数量，我们将文件大小增加了 6%。如果您可以找到减少图像中颜色数量的方法，也许可以通过标准化您网站中使用的颜色（我们将在“创建可重复使用的标记”中介绍），您可以节省文件大小，这将产生积极影响在性能上。
在图 3-12 中，我们导出的文件与最初的带有透明度的 PNG-8 示例（图 3-9）相同，但您会注意到 PNG-24 文件中的透明度处理方式非常不同。
图 3-12。透明的 PNG-24 导出视图。
在 PNG-8 文件中，Photoshop 使用哑光颜色来混合投影；没有部分透明度，只有投影之外的完全透明像素。在 PNG-24 文件中，我们看到部分透明度。这自然会导致更大的文件大小；在更复杂的图像中，文件大小也会大幅增加。如果您不需要透明度但图像中有很多颜色，请选择 JPEG。
还有一些其他工具可以在 PNG-8 中为您提供部分透明度，例如 Fireworks（像 Photoshop 这样的图像编辑工具）和 pngquant（PNG 图像的有损压缩工具）。但是，如果在从 Photoshop 导出图像时需要部分透明，则需要使用 PNG-24。与往常一样，通过附加压缩工具运行从 Photoshop 导出的每个图像（在“附加压缩”中了解更多信息）。
请务必注意，旧版浏览器（例如 Internet Explorer 6）对 PNG 的支持有限。如果您有足够的来自旧浏览器的流量需要针对它们进行优化，请务必测试任何导出的 PNG 以确保它们按预期呈现。
WebP、JPEG XR和JPEG 2000等较新的图像格式针对性能进行了进一步优化。随着它们在浏览器和图像创建软件中的吸引力，我们可能有更多机会使用这些新格式并进一步优化我们网站的图像以提高页面速度和感知性能。
在导出图像之前，请确保仅以图像所需的最大像素宽度和高度导出图像。提供大于所需的图像并在图像标记内将其缩小将对您的页面加载时间产生负面影响，因为您会迫使用户下载比需要更多的字节。在“故意加载内容”中阅读更多关于如何处理提供正确图像大小的信息。
导出图像后，通过ImageOptim或Smush.it之类的工具运行它，它们会为各种文件类型找到最佳压缩技术。
ImageOptim 是可供 Mac 下载的软件。将图像拖放到 ImageOptim 中，并观察它为您的图像找到最佳的无损压缩，并删除不必要的颜色配置文件和注释（参见图 3-13）。该软件目前包括许多现有的压缩工具，例如 PNGOUT、Zopfli、Pngcrush、AdvPNG、extended OptiPNG、JpegOptim、jpegrescan、jpegtran 和 Gifsicle。通过为您的图像选择最佳压缩方法，ImageOptim 的优化适用于 JPEG、PNG 甚至动画 GIF。因为 ImageOptim 使用无损压缩方法，所以最终的结果是在不牺牲质量的情况下更小的文件大小，这正是我们在优化 Web 性能时的目标。
图 3-13。ImageOptim 是使用无损压缩方法来节省图像文件的软件。
Smush.it 也是一个无损压缩工具。它存在于 Web 上而不是您的桌面上。就像 ImageOptim 一样，它可以处理 JPEG、PNG 和 GIF。Smush.it 中包含的压缩工具有 ImageMagick、pngcrush、jpegtran 和 Gifsicle。一旦你上传了你的图片或选择了它的 URL，Smush.it 就会为它选择最好的压缩方法，然后显示一个表格，里面有你图片的可下载压缩版本的链接（见图 3-14）。
图 3-14。Smush.it 是一个在线工具，它使用无损压缩方法来节省图像文件。
这些工具可以通过寻找在不降低图像质量的情况下减小图像大小的方法为您节省大量额外的文件大小。在权衡美学和性能方面，在上传到 Web 之前通过这些工具之一运行每张图像是一个巨大的胜利。
如果可能，请自动优化上传到您网站的任何图像。您可能有多个内容作者，他们的工作流程不应因需要优化单个图像而中断。将ImageOptim-CLI 之类的工具或EWWW Image Optimizer之类的 WordPress 插件集成到您网站的构建过程中，以确保创建和上传的任何新图像仍将获得所需的额外压缩。
除了减小图像的文件大小之外，减少页面上的图像请求数量以改善页面加载时间也很重要（在第 2 章中阅读有关页面加载时间基础的更多信息）。仔细考虑如何在您的网站上请求和加载图像将帮助您优化页面总加载时间以及您的用户可以多快开始查看您的网站并与之互动。消除图像请求有两种主要方法：
将图像组合成精灵
用 CSS3、数据 URI 或 SVG 版本替换图像文件
Web 性能领域的一句俗语是“最快的请求是未发出的请求”。减少页
