把图片变清晰的网站（网站优化）

图片占大多数网站总页面重量的大部分。去年平均网页上的图像字节数增长了30% 以上，请求的增长很小。由于它们相对较大的文件大小和平均站点上包含的图像数量（见图 3-1），优化图像可以说是改善站点页面加载时间的最简单的大赢家。图 3-1。HTTPArchive.org对页面权重的调查显示，图像占大多数网站总页面权重的大部分。您可以通过以下方式对主要内容图像以及构成网站设计的图像进行重大改进：为每张图像找到文件大小和质量的适当平衡寻找减少网站上图片请求总数的方法优化站点的图像创建工作流程以提高性能让我们从查看可用的各种图像文件类型开始，然后我们将检查用于优化站点图像以提高页面速度的选项。选择图像格式为您的网站创建图像时，您有多种文件类型可供选择。生成图像时，问问自己：在没有明显质量降低的情况下，该图像的压缩程度如何？需要多少种颜色？我可以以任何方式简化此图像吗？我需要任何透明度吗？我需要任何动画吗？该图像将在多大的高度和宽度上显示？该图像将如何在整个站点中重新利用？Web 上最常见的图像文件格式是 JPEG、GIF 和 PNG。表 3-1 概述了每种流行的图像文件格式、最佳使用方式以及一些优化技巧。表 3-1。图像格式概述格式最适合优化选项JPEG照片，多种颜色的图像降低质量，渐进式输出，降低噪音动图动画减少抖动，减少颜色数量，增加水平图案，减少垂直噪音PNG-8色彩较少的图像减少抖动，减少颜色数量，增加水平和垂直图案PNG-24部分透明减少噪音，减少颜色数量让我们来看看每种文件格式的优缺点，以及如何导出和优化每种图像。JPEGJPEG 是照片或其他具有大量颜色的图像的理想文件格式。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。PNGPNG 是一种无损图像格式，旨在改进 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 性能领域的一句俗语是“最快的请求是未发出的请求”。减少页面上图像请求数量的一种方法是将图像组合成精灵。您的页面重量会略有增加，因为您将拥有一个大图像文件和额外的 CSS 来定位和显示图像中的图形，但是将图像组合成一个 sprite 可能会提高您网站的页面速度。精灵图像的最佳候选者是合并到您的网站设计中的小型重复图像。这可能包括图标、站点徽标和您站点周围使用的其他 CSS 背景图像。图 3-15 是一个精灵的例子。图 3-15。这个示例 sprite.png 文件包含我们可以在整个网站设计中使用的徽标和心形、星形和其他图标。你可以看到这个精灵包括一个主标志以及各种版本的星星和其他图标。让我们使用 CSS 和 HTML 来实现这个精灵的一部分。图 3-16 显示了我们希望输出的样子。图 3-16。此屏幕截图显示了我们希望如何在页面上使用我们的精灵。如果没有精灵，我们将单独的图像应用于每个元素。这是我们的入门标记：<h1>Designing for Performance</h1>
<p class="fave">We have a favorite!</p>
<p class="fave winner">We have a winner!!</p>
在这个 HTML 中，我们将把 logo 应用到h1元素上，一个星号应用到第一个段落的 fave 类，另一个不同的类应用到附加类的段落winner。这是我们应用了每个单独图像的初始 CSS：h1, .fave:before {
background: transparent no-repeat;

}
h1 {
background-image: url(h1.png);
text-indent: -9999px;

height: 75px;
width: 210px;
}
.fave {
line-height: 30px;
font-size: 18px;
}
.fave:before {

background-image: url(star.png);
display: block;
width: 18px;
height: 17px;
content: '';
float: left;
margin: 5px 3px 0 0;
}
.winner:before {
background-image: url(star-red.png);
}
我们background-color对这些元素应用透明，我们告诉它不要background-image在元素的整个宽度和高度上重复。我们使用在页面的可见区域text-indent内移动文本h1并允许background-image显示。有多种方法可以将文本从页面的可见部分移出，但仍可供屏幕阅读器使用；您还可以尝试以下方法来隐藏可见文本：element { text-indent: 100%; white-space: nowrap; overflow: hidden; }如果您将许多动画应用于此元素，此方法还可以显着提高 iPad 1 的性能。text-indent: 100%为了让星星出现在段落文本的左侧，我将图像应用于:before段落的伪元素。选择:before器创建一个新的内联元素，因此您可以在所选元素的内容之前插入内容。:after也是一个可以使用的伪元素。现代浏览器支持这些伪元素，在 Internet Explorer 8 中部分支持，在早期版本的 Internet Explorer 中不支持。让我们改变它以使用精灵而不是单个图像。我们将使用前面的示例精灵（图 3-15）并将其应用于h1and.fave:before元素：h1, .fave:before {
background: url(sprite.png) transparent no-repeat;
}
:before图 3-17 显示了我们的新段落样式在将精灵应用于元素时的样子。图 3-17。此屏幕截图显示了我们的段落，其中精灵应用于:before元素，但没有正确放置。现在我们需要确定精灵的新背景位置，以便星星出现。接收到的h1默认值background-position，0 0或精灵的左上角。background-position可以接受不同类型的值对，分别对应 x 轴和 y 轴：50% 25%50px 200pxleft top在我们的例子中，我们知道我们的星星图像在精灵中的什么位置，所以我们可以使用像素来移动background-image直到每个星星都显示出来。对于第一颗星，我们需要将精灵216px向左和15px向上移动以在我们的伪元素中显示精灵:before。.fave:before除了现有样式之外，我们还将应用以下 CSS ：.fave:before {
…
background-position: -216px -15px;
}
我们的第二颗星将自动接收我们应用于第一颗星的所有样式，因为两个段落共享类fave。我们只需要选择一个新background-position的来显示红色的星形图标：.winner:before {
background-position: -234px -15px;
}
这是我们应用精灵而不是单个图像的最终 CSS：h1, .fave:before {
background: url(sprite.png) transparent no-repeat;
}
h1 {
text-indent: -9999px;
height: 75px;
width: 210px;
}
.fave {
line-height: 30px;
font-size: 18px;
}
.fave:before {
display: block;
width: 18px;
height: 17px;
content: '';
float: left;
margin: 5px 3px 0 0;
background-position: -216px -15px;
}
.winner:before {
background-position: -234px -15px;
}
由于图像请求数量的减少，Sprites 可以节省大量的页面加载时间。您会注意到，由于 sprite 图像文件较大以及使用 sprite 的额外 CSS，总页面重量可能会随着 sprite 而增加。然而，使用 sprite 比使用单个图像更有可能加快页面加载时间，因为浏览器只需要获取一张图像而不是发出大量额外的 HTTP 请求。我在我的网站上创建了两个页面来测试这个示例：一个在我们将这些图像组合成一个 sprite 之前，另一个在之后。我通过 WebPagetest 运行它们，以了解用户在每个版本中可能体验到的性能（见图 3-18）。请注意，对于像这样的任何示例，每次测试的总加载时间和总体速度都会有所不同，但这让我们可以粗略估计精灵的潜在性能影响。图 3-18。精灵前后我们页面的连接视图。图 3-18 显示了我们的页面在 sprite 之前和之后的连接视图。在 sprite 之前，Chrome 建立了三个连接来检索页面的内容。在第一次连接中，在 DNS 查找和初始连接之后，浏览器抓取页面的 HTML，然后检索第一张图像。在第三次连接中，有一个初始连接时间，然后是更多的图像下载。最后一个要下载的图像（注意它从围绕文档完成的第二个连接开始）是该站点的图标。在精灵之后，Chrome 建立了两个连接来检索页面的内容。在此连接中，在 DNS 查找和初始连接之后，浏览器检索 HTML，然后检索单个精灵。同样，在文档完成后，浏览器会获取该站点的图标。如您所见，使用 sprite 比没有它时文档完成更快。另一种可视化精灵版本感觉有多快的方法是查看速度指数指标（图 3-19）。图 3-19。WebPagetest 的速度指数指标有助于说明页面何时变得视觉完整。WebPagetest 通过计算页面加载期间各个时间点的“完成”程度来计算速度指数，在这个可视化进度图中随时间显示。如“关键渲染路径”中所述，速度指数是显示页面可见部分的平均时间。当您尝试衡量页面的感知性能时，这是一个很好的指标，因为它会告诉您“首屏”内容为您的用户填充的速度。在这个例子中，我们的视觉进度图（从中计算速度指数）显示了页面随着时间的推移在视觉上完成的速度有多快。HTTP/2 怎么样？HTTP/2 是当前正在定义的 Web 协议的主要修订版。它的重点是帮助提高性能，HTTP/2 的主要目标之一是允许使用从浏览器到服务器的单一连接，帮助优化浏览器请求资产的方式。使用 HTTP/2，托管站点文件的 Web 服务器可以提示甚至将内容推送回用户的浏览器，而不是等待它请求单个页面资产。这意味着将来可以消除对精灵的需求！然而，使用精灵有一些潜在的性能缺点。如果您需要更改精灵中的一张图像，则必须破坏整个文件的缓存。此外，通过使用 sprite，您会强制用户下载可能不必要的字节；如果在用户访问您的站点期间从未看到 sprite 中的其他图标，则用户将无缘无故地下载并解码了较大的文件大小。在创建精灵并衡量其性能影响时，请考虑这些缺点。在我的团队进行的一项实验中，我们有一小部分页面，其中包含 26 个缩略图图像在 10 个插槽中旋转进出。我们将所有 26 张图像组合成一个精灵，其中：由于添加了 CSS、JavaScript 和重新创建此效果所需的新图像文件，总页面大小增加了 60 KB请求数量减少了 21%将总页面加载时间减少了 35%这些结果表明值得尝试页面加载时间优化。我们最初并不确定这种技术是否会在整体页面速度上取得胜利，但我们知道它值得进行实验，因此我们可以从中学习。阅读第 6 章中有关衡量和迭代性能优势的更多信息。CSS3另一种减少图像请求的方法是用 CSS 替换它们。您可以使用 CSS 创建形状、渐变和动画。例如，CSS3 渐变：可以处理透明度可以覆盖在背景颜色上消除图像请求超级容易改变CSS 可以很好地替代图像。不用担心 CSS3 语法中供应商前缀的额外页面权重；如果您还没有，您应该在您的网站上使用 gzip（在“缩小和 gzip ”中阅读更多关于如何实现和优化 gzip 的内容），它将负责优化此代码。即使您将加载更多 CSS，它也可能是比图像请求更好的选择。CSS 可以替换图像的一个好地方是基本的重复渐变。当您可以使用简单、可重复使用的 CSS3 渐变来消除图像请求时，为什么还要使用图像？例如，您可以创建一个从白色渐变为透明的单一渐变，并在您希望以斜角显示的任何元素上使用此渐变。让我们在三个按钮上试试这个：<a href="#">Click Me</a>
<a href="#" class="buy">Buy This</a>
<a href="#" class="info">More Info</a>
在我们的 CSS 中，我们已经为这些按钮应用了字体和间距样式。添加基本​斜角渐变：a {
background-image:
linear-gradient(to bottom, #FFF, transparent);
background-color: #DDD;
border: 1px #DDD solid;
}
笔记在此示例中，我仅包含 W3C 渐变语法。您需要为其他浏览器添加语法，例如 Firefox 和 Internet Explorer。基于这个 CSS，我们所有的链接都将有一个灰色的背景颜色，并且覆盖在这个背景颜色上的是我们的 CSS3 渐变，应用为背景图像。每个链接还有一个纯灰色 1px 边框。要将 Buy This 按钮设为绿色，将 More Info 按钮设为蓝色，我们只需更改每个按钮的背景颜色和边框颜色：.buy {
background-color: #C2E1A9;
border-color: #D8E5CE;
}
.info {
background-color: #AFCCD3;
border-color: #DAE9EC;
}
生成的按钮（图 3-20）每个都有自己的背景颜色，顶部覆盖有从白色到透明的渐变。图 3-20。具有 CSS3 渐变背景的按钮。使用这样的渐变消除了对图像请求的需要，这对于您的页面加载时间来说是个好消息。你可以用 CSS3 渐变做一些非常棒的事情，因为它们提供了对颜色开始和结束位置的控制。这是一个使用 CSS3 渐变为 WebKit 浏览器构建的示例六边形。我们只需要一个元素，所以在这种情况下我选择使用 div：<div class="hexagon"></div>
这是在 WebKit 浏览器中将这个 div 变成彩色六边形的相应 CSS：.hexagon {
width: 333px; height: 388px; background-image:
-webkit-linear-gradient(120deg, #fff 83px, transparent 0,
transparent 419px, #fff 0),
-webkit-linear-gradient(-120deg, #fff 83px, transparent 0,
transparent 419px, #fff 0),
-webkit-linear-gradient(160deg, transparent 345px,
#1e934f 0),
-webkit-linear-gradient(140deg, transparent 376px,
#1e934f 0),
-webkit-linear-gradient(120deg, transparent 254px,
#085b25 0),
-webkit-linear-gradient(150deg, #053b17 183px,
transparent 0),
-webkit-linear-gradient(80deg, transparent 96px,
#085b25 0);
background-color: #053b17;
}
图 3-21 展示了六边形在 Chrome 中的呈现方式。图 3-21。Hexagon 仅使用 CSS3 渐变制作，灵感来自Geometry Daily #286。要开始编写 CSS3 渐变，请查看ColorZilla 的渐变编辑器等工具。您可以使用不同的颜色、渐变的方向以及您希望支持的浏览器。让我们尝试一个从上到下的跨浏览器渐变，从浅绿色开始，在中间点切换到深绿色。在这种情况下，我们有意在两个果岭之间创建一个硬停，而不是在两个果岭之间进行平滑过渡。让我们从我们的后备颜色开始，它将应用于我们元素的backgroundorbackground-color属性：/* Old browsers should get a fallback color */
background: #7AC142;
我建议background-color为每个应用了渐变的元素设置一个，因此在不支持 CSS3 渐变的情况下，您仍然可以在文本和元素背景之间形成可读的对比。确保跨浏览器测试渐变，以确保它们按预期工作，并且任何文本仍然可读。要支持更多浏览器，您可以将以下 CSS 应用于元素的backgroundorbackground-image属性：/* FF3.6+ */
-moz-linear-gradient(top, #e4f3d9 50%, #7ac142 0);

/* Chrome, Safari4+ */
-webkit-gradient(linear, left top, left bottom,
color-stop(0%,#e4f3d9), color-stop(50%,#e4f3d9),
color-stop(51%,#7ac142));

/* Chrome10+, Safari5.1+ */
-webkit-linear-gradient(top, #e4f3d9 50%, #7ac142 0);

/* Opera 11.10+ */
-o-linear-gradient(top, #e4f3d9 50%, #7ac142 0);

/* IE10+ */
-ms-linear-gradient(top, #e4f3d9 50%, #7ac142 0);

/* W3C */
linear-gradient(to bottom, #e4f3d9 50%, #7ac142 0);
在前面的语法中，浅绿色将从元素的顶部开始，并继续保持浅绿色，直到元素高度下降 50%。为了在两个绿色之间创建硬停止，我们可以0为许多浏览器的语法设置第二个颜色停止。这向浏览器表明新颜色应该在我们的 50% 浅绿色停止后立即开始。然而，在较旧的 Chrome 和 Safari 语法中，我们需要设置多个色标和百分比，以确保它符合我们的要求！生成的渐变将如图 3-22 所示。图 3-22。带有硬停止的 CSS3 渐变。background相对background-imagebackground将渐变应用于 a而不是 a 有什么区别background-image？浏览器足够聪明，知道当您为 声明渐变时background，它应该应用为background-image. 渐变会很好地发挥作用，并且不会被background-color元素的任何声明覆盖。您background-image将覆盖已background-color声明的内容。但是，如果您background稍后在 CSS 中将声明应用于具有background-image渐变的元素，则新background声明将覆盖您的渐变。要在旧版本的 Internet Explorer 中支持 CSS3 渐变，您需要对filter元素应用一个属性。但是，我们只能使用该filter属性创建平滑渐变；我们将错过两个果岭之间的硬色停：/* IE6-9 */
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr='#e4f3d9',endColorstr='#7ac142',
GradientType=0 );
您应该分析您网站的访问者流量，以确定您需要使用供应商前缀支持哪些浏览器版本。前面的 CSS 还包括 W3C 渐变标准：linear-gradient. 希望在未来，随着越来越多的浏览器供应商就 CSS3 渐变语法达成一致，我们可以从 CSS 中清除现有的供应商前缀。除了使用 CSS3 创建渐变，您还可以在其他领域使用 CSS 作为强大的图像替换工具：加载指示器、工具提示和各种其他简单图形。Internet 上有大量示例，用于仅使用 CSS 的微调器、使用 CSS 制作的各种形状以及仅使用 CSS 的重复模式。话虽如此，请注意您的 CSS 如何影响重绘时间，因为使用大量 CSS3 可能会产生成本。重绘在性能方面是一项昂贵的操作，并且会使您的页面看起来迟缓。如果您发现您的用户界面确实变得迟缓，尤其是在滚动时，您可能遇到了 CSS3 或 JavaScript 重绘问题，并且需要使用JankFree.org的工具来诊断导致它的原因。在“感知性能”中阅读有关此主题的更多信息。数据 URI 和 Base64 编码图像用数据 URI 替换非常小的、简单的图像也是减少网页必须发出的请求数量的一种方法。为此，请使用称为Base64 encoding的方法将图像转换为文本，从而将图像更改为 URI 。例如，假设我们有一个小三角形的 PNG-8 图像（图 3-23），我们希望在站点的各个地方重复使用它。图 3-23。PNG-8 格式的小三角形。我们可以使用在线 Base64 编码器将图像转换为其文本等价物（数据 URI）。我们上传图像，编码器返回一个数据 URI 供我们在 CSS 中使用。Base64 编码此三角形并background-image使用 CSS 将其应用于元素的结果如下所示：background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUh
EUgAAAAoAAAAQCAAAAAAKFLGcAAAAVUlEQVR4AWM4/B8GGOyfw5m6UQimx3
Y4c6PKTxjzUn4FnPmB7QaM+X+CDZz5P2E+nHlS6C2M+b86Ac78b3MYzlyq8
hPG/J/fAmSegQC22wzhxlBQAQBbjnsWelX9QwAAAABJRU5ErkJggg==);
使用 Base64 对图像进行编码可以通过嵌入图像代码来保存 HTTP 请求，这通常是一个很好的性能经验法则。它允许对图像进行处理并立即显示图像，而不是等待图像的 HTTP 请求。但是，内联图像也会消除您缓存文件的能力，并且还会使您的 CSS 变大（有时会很大，具体取决于数据 URI 的长度）。在将任何图像更改为数据 URI 之前，请务必测量它们的性能后果，然后再在您的站点上永久实施它们，以确保它们实际上对您来说是性能上的胜利。SVG一些图标和图像非常适合替换为可缩放矢量图形(SVG)。如果您的图形中有单色或渐变图像、透明度或非常少的细节，请考虑将其导出为 SVG。SVG 使用 XML 使用路径、形状、字体和颜色来定义图像的基本属性。使用 SVG 图像的主要优点是非视网膜和视网膜设备都可以漂亮地显示它们。您可以用 SVG 替换它们，而不是创建图像的高分辨率副本以提供高分辨率显示器。SVG 将以正确的大小和定义出现，因为它们是可以灵活缩放的矢量，与光栅图像不同。此外，通过用内联 SVG 替换图像文件，您可以消除从服务器获取文件的 HTTP 请求。Internet Explorer 8 或更低版本不支持 SVG，运行 Android 2.x 的设备也不支持它们。但是，SVG 特征检测是可靠的，因此您可以使用工具从 SVG 图像回退到 PNG 版本。例如，Grunticon允许您上传一组 SVG 文件并生成 CSS 以将图标应用为 SVG 背景图像以及备用 PNG 图像和 CSS。要使用 Adob​​e Illustrator 创建 SVG 图像，请选择“文件”>“另存为”，然后在“格式”下选择 SVG。这将创建一个新的 SVG 文件，您可以使用文本编辑器对其进行编辑。您将获得许多导出选项（图 3-24）。选择以下设置以创建最简单（和最小）的 SVG 文件，而不会影响质量：SVG 配置文件： SVG 1.1。这是一个得到很好支持的 SVG 版本。字体类型： SVG。子集：无（使用系统字体）。图片：嵌入。这会将任何位图嵌入到 SVG 中，而不是从外部链接到它们。保留 Illustrator 编辑功能：取消选择。在我们的网站上使用 SVG 时，我们不需要此功能。图 3-24。SVG 导出选项。对于这个例子，我使用 Adob​​e Illustrator 创建了一个星形 SVG（图 3-25）。图 3-25。SVG 格式的星号。在文本编辑器中打开 SVG 文件。在您保存的 SVG 中，您只需要一些 XML 标签，例如：<svg>
<path/>
</svg>
然而，在以纯文本打开这个星形文件时，我可以看到 Adob​​e Illustrator 将大量不必要的代码传递到我们的 SVG 中：<?xml version="1.0" encoding="utf-8"?>

<!– Generator: Adobe Illustrator 15.0.2, SVG Export Plug-In.
SVG Version: 6.00 Build 0) –>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"https://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg version="1.1" xmlns="https://www.w3.org/2000/svg"
xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px"
width="20px" height="20px" viewBox="0 0 20 20"
enable-background="new 0 0 20 20" xml:space="preserve">

<polygon fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10"
points="10,2.003 11.985,8.112 18.407,8.112 13.212,11.887
15.196,17.996 10,14.221 4.803,17.996 6.789,11.887 1.592
8.112 8.015,8.112 "/>

</svg>
随意从导出的 SVG 中删除以下组件。它们不会影响您的 SVG 文件在浏览器中的输出，我们应该优化可能的最小文件大小以提高性能：……线<!DOCTYPE>……<!– Generator: Adobe Illustrator评论……<?xml声明您还可以使用 Scour 和 SVGO 等工具自动清理SVG文件。请务必仅在导出的 SVG 上运行这种清理，而不是在原始文件上运行。有几种方法可以在您的网站上实现 SVG 图像。您可以将 SVG 应用于图像标签的源属性：<img src="star.svg" width="83" />
我们精彩的 SVG 将清晰地扩展到您为其设置的宽度。除了在主 HTML 文档中包含 SVG 之外，您还可以将其作为 a 应用background到使用 CSS 的元素中：.star {
background: url(star.svg);
display: block;
width: 83px;
height: 83px;
background-size: 83px 83px;
}
或者您可以将 SVG 内联到您的 HTML 中：<body>
<svg version="1.1" xmlns="https://www.w3.org/2000/svg"
xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px"
width="20px" height="20px" viewBox="0 0 20 20"
enable-background="new 0 0 20 20" xml:space="preserve">
<polygon fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10"
points="10,2.003 11.985,8.112 18.407,8.112 13.212,11.887
15.196,17.996 10,14.221 4.803,17.996 6.789,11.887 1.592,
8.112 8.015,8.112 "/>
</svg>
</body>
一些网站使用 SVG 图像，但不是使用 CSS 或图像标签应用它们，而是将 SVG 图像组合成图标字体。像IcoMoon这样的工具可以帮助您构建由您自己的 SVG 图像组成的自定义字体。但是，并非所有浏览器都支持图标字体，并且为不支持图标字体的图像创建后备可能会更加困难。此外，单独应用的图标可能会因应用到元素的line-height和font-size样式而变得更加复杂，并且它们可能对可访问性构成挑战。使用字体确实可以更轻松地更改图标的颜色，因为您只需将colorCSS 声明应用于字符即可。但是，单个 SVG 图像往往更易于使用，并且您可以使用 CSS 以及使用fillCSS 属性来控制内联 SVG 的颜色。尽管旧版浏览器不支持 SVG，但支持视网膜设备的前向友好性和支持旧版浏览器（例如Grumpicon或Modernizr ）的简单工作流程使SVG 成为提高网站性能的绝佳图像替换选择。要对 SVG 文件进行额外优化，请通过SVG Optimiser等压缩工具运行它们，该工具可简化小数并删除不必要的字符。使用内联 SVG 替换图像与使用数据 URI 替换图像具有相同的缺点：它可以为您的 HTML 添加更多文件大小并消除缓存文件的机会。在提交 SVG 版本之前，测量在您的站点上用 SVG 替换任何图像对性能的影响。图像规划和迭代您网站上的图像效率归结为设计阶段的仔细规划。如果您预先知道将如何以及在何处使用整个站点的图像，则可以计划透明度、大小、渐变以及如何减少图像请求的总数。随着网站的发展，或者随着参与图像创建和更新的设计师数量的增加，您的图像目录可能会失控。您可以尝试做一些事情来优化和维护网站上的文件大小和图像数量，包括安排对图像目录的例行检查和页面重量的构成、创建样式指南以及指导其他图像创建者优化图像的重要性。安排例行检查为您的站点安排例行检查，以查看哪些图像可以重复使用、组合或以不同格式重新导出。当您在主目录（或多个目录）中查找构成站点设计的图像时，请问自己：这些精灵最近有更新吗？精灵中是否有我可以删除的过时图标，或者是否添加了需要优化的新图形？随着新的浏览器技术，或者随着我们的观众开始使用更现代的浏览器，这些图像中的哪一个可以被 CSS3 或 SVG 等现代技术或新的技术所取代picturefill？自我上次检查后创建的所有新图像是否都以理想格式创建？它们是否尽可能简单，是否通过额外的压缩工具运行？是否所有图像都缩放到正确的高度和宽度？我是否以比导出的更小的比例显示任何图像，这意味着我应该以正确的大小重新导出以消除不必要的开销？同样，定期检查您网站的页面权重。请注意总页面重量的构成，包括页面总重量的百分比是由图像引起的。如果页面重量显着增加，请找出原因，并查看可以改进文件大小的地方。在第 6 章中阅读有关如何测量和迭代页面权重和其他性能指标的更多信息。创建样式指南考虑创建一个样式指南作为图像在整个站点中的使用方式的参考点，尤其是在图标含义和精灵使用方面。它可能包括：一种简单的方法来查找哪些类应用于您的 HTML 以显示不同的图标图标使用和含义的定义，以便设计人员和开发人员能够在页面之间创建一致的用户体验，并通过重用缓存的现有图像获得额外收益CSS 渐变和其他用于提高网站性能的技术示例，以便其他人可以重新利用它而不是添加自己的，这可能会导致 CSS 文件臃肿关于您需要支持哪些浏览器的权威指南，以便其他设计人员和开发人员知道他们必须在 CSS 中包含哪些语法以及要测试的内容除了图像文档之外，样式指南对于页面加载时间还有许多其他好处。在“风格指南”中，我们将介绍它们为何如此有用以及您还可以在其中包含哪些内容。指导其他图像创作者您可能不是唯一在您的网站上创建和更新图像的人。可能有其他设计人员和开发人员需要了解这些技术，也可能有其他内容创作者不太熟悉图像创建方法。确保对于新图像在网站上的显示方式有明确定义的工作流程。如果设计师或开发人员负责添加图像，请确保其工作流程的一部分包括通过测试质量和通过额外优化运行图像来找到美学和性能的平衡。尽可能自动化图像优化，使图像创建者不会觉得他们有一个新的、繁重的工作流程。与为网站做出贡献的其他人分享这些知识非常重要，这样您就不会是唯一的“表演警察”或“表演看门人”。帮助其他人了解他们对页面加载时间的影响对于您的图像目录和您的压力水平一样有益。在第 8 章中阅读更多关于授权和激励他人支持绩效的信息。同样，优化图像可能是您网站性能的最大胜利。当您查看网站上的图片时，问问自己：我可以通过选择不同的图像格式来节省文件大小吗？我的所有图像是否都通过额外的压缩工具运行？使用 CSS3 渐变、数据 URI、SVG 文件或精灵会更好吗？我的图像中是否有任何不必要的噪点或颗粒，或者是否有其他方法可以减少图像中的颜色总数？如何确保添加到我的网站的新图像得到优化？

本文出自快速备案，转载时请注明出处及相应链接。

本文永久链接: https://www.xiaosb.com/beian/47810/