设计更快的网页，第 2 部分：图像替换

欢迎回到这个关于构建更快网页的系列。 最后 文章 谈到了仅通过图像压缩可以实现的目标。 这 example 从 1.2MB 的浏览器胖开始，然后减少到 488.9KB 的重量。 这还不够快！ 本文继续浏览器饮食以减掉更多脂肪。 你可能会认为在这个过程的中途事情有点疯狂，但一旦完成，你就会明白为什么。

准备

本文再次从对网页的分析开始。 使用内置的截图功能 Firefox 制作整个页面的屏幕截图。 您还需要使用安装 Inkscape sudo：

$ sudo dnf install inkscape

如果你想知道如何使用 Inkscape，已经有几篇文章了 Fedora 杂志。 本文将仅说明优化 SVG 以供 Web 使用的一些基本任务。

分析

再一次，这 example 使用 getfedora.org 网页。

带有图形标记的 Getfedora 页面

这种分析最好以图形方式完成，这就是它从屏幕截图开始的原因。 上面的屏幕截图标记了页面的所有图形元素。 在两种情况下或在四种情况下更好， Fedora 网站团队已经使用措施来替换图像。 社交媒体的图标是字体的字形，语言选择器是 SVG。

有几种替换选项：

HTML5 画布

简而言之，HTML5 Canvas 是一个 HTML 元素，它允许您借助脚本（主要是 JavaScript）进行绘图，尽管它尚未被广泛使用。 当您在脚本的帮助下绘制时，元素也可以被动画化。 您可以使用 HTML Canvas 实现的一些示例包括： 三角形图案， 动画波， 和 文字动画. 但是，在这种情况下，这似乎不是正确的选择。

CSS3

使用层叠样式表，您可以绘制形状甚至为它们设置动画。 CSS 通常用于绘制按钮等元素。 但是，通过 CSS 实现的更复杂的图形通常只能在技术演示页面中看到。 这是因为图形在视觉上仍然比编码更好。

字体

使用字体来设置网页样式是另一种方式，并且 真棒 安静受欢迎。 例如，你可以用这个字体替换 Flavor 和 Spin 图标 example. 使用这种方法有不利的一面，这将在本系列的下一部分中介绍，但可以很容易地完成。

SVG

这种图形格式已经存在了很长时间，并且一直应该在浏览器中使用。 很长一段时间以来，并非所有浏览器都支持它，但那是历史。 所以最好的办法是在这个替换图片 example 与 SVG 一起使用。

为 Web 优化 SVG

优化 SVG 以供 Internet 使用需要几个步骤。

SVG 是一种 XML 方言。 圆形、矩形或文本路径等组件使用节点进行描述。 每个节点都是一个 XML 元素。 为了保持代码干净，SVG 应该使用尽可能少的节点。

SVG example 是一个圆形图标，上面有一个咖啡杯。 你有 3 个选项来用 SVG 来描述它。

顶部有杯子的圆形元素

<circle
style="opacity:1;fill:#717d82;fill-opacity:1;stroke:none;stroke-width:9.51950836;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers fill stroke"
id="path36"
cx="68.414307"
cy="130.71523"
r="3.7620001" />

顶部有杯子的圆形路径

<path
style="opacity:1;fill:#717d82;fill-opacity:1;stroke:none;stroke-width:1.60968435;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers fill stroke"
d="m 68.414044,126.95318 a 3.7618673,3.7618673 0 0 0 -3.76153,3.76204 3.7618673,3.7618673 0 0 0 3.76153,3.76205 3.7618673,3.7618673 0 0 0 3.76206,-3.76205 3.7618673,3.7618673 0 0 0 -3.76206,-3.76204 z"
id="path20" />

单路

<path
style="opacity:1;fill:#717d82;fill-opacity:1;stroke:none;stroke-width:1.60968435;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers fill stroke"
d="m 68.414044,126.95318 a 3.7618673,3.7618673 0 0 0 -3.76153,3.76204 3.7618673,3.7618673 0 0 0 3.76153,3.76205 3.7618673,3.7618673 0 0 0 3.76206,-3.76205 3.7618673,3.7618673 0 0 0 -3.76206,-3.76204 z m -1.21542,0.92656 h 2.40554 c 0.0913,0.21025 0.18256,0.42071 0.27387,0.63097 h 0.47284 v 0.60099 h -0.17984 l -0.1664,1.05989 h 0.24961 l -0.34779,1.96267 -0.21238,-0.003 -0.22326,1.41955 h -2.12492 l -0.22429,-1.41955 -0.22479,0.003 -0.34829,-1.96267 h 0.26304 l -0.16692,-1.05989 h -0.1669 v -0.60099 h 0.44752 c 0.0913,-0.21026 0.18206,-0.42072 0.27336,-0.63097 z m 0.12608,0.19068 c -0.0614,0.14155 -0.12351,0.28323 -0.185,0.42478 h 2.52336 c -0.0614,-0.14155 -0.12248,-0.28323 -0.18397,-0.42478 z m -0.65524,0.63097 v 0.21911 l 0.0594,5.2e-4 h 3.35844 l 0.0724,-5.2e-4 v -0.21911 z m 0.16846,0.41083 0.1669,1.05937 h 2.80603 l 0.16693,-1.05937 -1.57046,0.008 z m -0.061,1.25057 0.27956,1.5782 1.34411,-0.0145 1.34567,0.0145 0.28059,-1.5782 z m 1.62367,1.75441 -1.08519,0.0124 0.19325,1.2299 h 1.79835 l 0.19328,-1.2299 z"
id="path2714"
inkscape:connector-curvature="0" />

您可能会看到代码变得更加复杂，需要更多的字符来描述它。 当然，文件中的更多字符会导致更大的大小。

节点清理

如果你打开一个 example Inkscape 中的 SVG 并按 F2，激活节点工具。 您应该看到如下内容：

Inkscape – 节点工具已激活

这里有 5 个不需要的节点 example — 位于线条中间的那些。 要删除它们，请使用激活的节点工具一一选择它们，然后按 德尔 钥匙。 在此之后，选择定义这条线的节点并使用工具栏工具再次使它们成为角。

Inkscape - 节点工具使节点成为一个角落

Inkscape – 节点工具使节点成为一个角落

在不固定拐角的情况下，使用定义曲线的手柄，该曲线将被保存并增加文件大小。 您必须手动进行此节点清理，因为它不能有效地自动化。 现在你已经准备好进入下一阶段了。

使用 Save 作为函数并选择 Optimized svg。 将打开一个对话窗口，您可以在其中选择要删除或保留的内容。

Inkscape - 保存为优化 SVG 的对话框窗口

Inkscape – 保存为优化 SVG 的对话框窗口

即使是这个小SVG example 从 3.2 KB 减少到 920 字节，不到其原始大小的三分之一。

回到 getfedora 页面：主要部分背景中使用的灰色 voronoi 图案，经过我们对本系列第 1 部分的优化，从原来的 211.12 KB 大小降至 164.1 KB。

它导出的原始 SVG 大小为 1.9 MB。 经过这些 SVG 优化步骤后，它只有 500.4KB。 太大？ 好吧，当前的蓝色背景大小为 564.98 KB。 但是 SVG 和 PNG 之间只有很小的区别。

压缩文件

$ ls -lh
insgesamt 928K
-rw-r--r--. 1 user user 161K 19. Feb 19:44 grey-pattern.png
-rw-rw-r--. 1 user user 160K 18. Feb 12:23 grey-pattern.png.gz
-rw-r--r--. 1 user user 489K 19. Feb 19:43 greyscale-pattern-opti.svg
-rw-rw-r--. 1 user user 112K 19. Feb 19:05 greyscale-pattern-opti.svg.gz

这是我为可视化这个主题所做的一个小测试的输出。 您可能应该看到光栅图形（PNG）已经被压缩并且不能再压缩了。 相反的是 SVG，一个 XML 文件。 这只是文本，可以压缩到不到其大小的四分之一。 因此，它现在的大小比 PNG 小约 50 KB。

现代浏览器可以本地处理压缩文件。 因此，很多 web 服务器都开启了 mod_deflate (Apache) 和 gzip (nginx)。 这就是我们在交付过程中节省空间的方式。 检查它是否在您的服务器上启用 这里.

生产工具

首先，没有人愿意总是在 Inkscape 中优化 SVG。 您可以在没有 GUI 的情况下以批处理模式运行 Inkscape，但无法从 Inkscape SVG 转换为优化的 SVG。 您只能以这种方式导出光栅图形。 但也有替代方案：

  • SVGO（似乎没有积极开发）
  • 冲刷

这 example 将使用 scour 进行优化。 要安装它：

$ sudo dnf install scour

要自动优化 SVG 文件，请与此类似地运行 scour：

[user@localhost ]$ scour INPUT.svg OUTPUT.svg -p 3 --create-groups --renderer-workaround --strip-xml-prolog --remove-descriptive-elements --enable-comment-stripping --disable-embed-rasters --no-line-breaks --enable-id-stripping --shorten-ids

这是第二部分的结尾，您在其中学习了如何用 SVG 替换光栅图像以及如何优化它以供使用。 请继续关注 Fedora 第三部分的杂志，即将出版。

Related Posts