Inkscape 是 Fedora 设计团队最喜爱最常用的软件，它的功能可不止于制作精美的矢量图形。矢量图形（也就是 SVG 文件）可以帮助实现更多操作，许多软件也支持这一格式。不过，Inkscape 还有其他功能有待发掘。本系列 第一篇文章介绍了如何 使用 Inkscape 生成 GCode 文件；本篇文章将探索 Inkscape 的另一项扩展功能：用于绣花设计的 Ink/Stitch。

绣花 DIY

在过去数年里，DIY 风靡一时。可以说，这一现象始于廉价的 3D 打印 技术，以及后来的 数控 机床与激光切割机、激光雕刻机。这些设备都算不上非常昂贵。同时，绣花机等“传统”机器的价格也有下降。家用绣花机现在只需 500 美元就能买到了。

如果你不想买或者买不到绣花机，离你最近的 创客空间 一般也会有。即便是一台商用单头绣花机，价格也下降到了 5000 美元。对于购置绣花机这种投资来说，一般很快就能看到回报。

绣花设计软件

一些家用绣花机附有配套的绣花设计软件，不过大部分都只能在 Windows 系统上运行，就算该领域最常用的、独立于各绣花机制造商的软件 Embird 也是如此。不过，你也可以通过 Wine 来运行这些软件。

在 Linux 上，另一个办法就是使用 Embroidermodde。不过，该软件在 2014 年的募捐活动之后，就停止了开发活动。

到今天，只剩下一个办法：Ink/Stitch

开源与绣花设计

绣花机价格高以及 Linux 用户少都怪不得制造商，毕竟为 Linux 开发应用的确不太值得。

绣花文件格式问题

绣花机所用文件格式大量涌现，甚至还有一些制造商为自家机器定制了文件格式。在某些情况下，即便是一家制造商，可能也会使用多种文件格式。

• .10o – 丰田绣花机
• .100 – 丰田绣花机
• .CSD – Poem、Huskygram 和胜家家用绣花缝纫机
• .DSB – 百灵达绣花机
• .JEF – 车乐美 MemoryCraft 10000
• .SEW – 车乐美 MemoryCraft 5700、8000 和 9000
• .PES – 兄弟和 Babylock 家用绣花缝纫机
• .PEC – 兄弟和 Babylock 家用绣花缝纫机
• .HUS – 好时运家用绣花缝纫机
• .PCS – 百福家用绣花缝纫机
• .VIP – 百福旧格式 & 好时运格式
• .VP3 – 百福家用缝纫机新格式
• .DST – 田岛商用绣花缝纫机
• .EXP – 美高商用绣花缝纫机
• .XXX – Compucon 和 胜家家用绣花缝纫机
• .ZSK – 美国市场的 ZSK 绣花机

关于绣花机会用到的文件格式，上面列出来的只是九牛一毛，可 在此 查看全部格式。如果你想进一步了解这些文件格式，可点击 此处 获取更多信息。

Ink/Stitch 文件格式

Ink/Stitch 最初使用的是 libembroidery 库，现在则使用 pyembroidery 库。在 pyembroidery 库的支持下，Ink/Stitch 目前可以读取以下格式：100, 10o, BRO, DAT, DSB, DST, DSZ, EMD, EXP, EXY, FXY, GT, INB, JEF, JPX, KSM, MAX, MIT, NEW, PCD, PCM, PCQ, PCS, PEC, PES, PHB, PHC, SEW, SHV, STC, STX, TAP, TBF, U01, VP3, XXX, ZXY 以及 TXT（内容为 GCode 代码）。

不过，Ink/Stitch 支持的储存格式则比较少：DST, EXP, JEF, PEC, PES, U01, VP3 and of course SVG, CSV 以及 TXT（内容为 GCode 代码）。

除了文件格式，绣花缝纫软件还需解决其它一些问题。

支持繁杂多样的线迹类型是一个难题，绘制工具与缝制工具的搭配使用又是另一个难题。不过，为什么非要从无到有搞出一套新应用？为什么不依赖现有的矢量软件？这样一来，开发者只需要在其基础上增添绣花扩展功能即可。后者就是 Ink/Stitch 项目 过去四年来的设计理念。

安装 Ink/Stitch

Ink/Stitch 是 Inkscape 的一个扩展功能。不过，由于 Inkscape 下载安装扩展的新功能还处于测试阶段，在其提供的扩展功能中可能无法找到 Ink/Stitch。因此，你需要自行手动 下载 该扩展。下载后，将压缩包解压到 Inkscape 扩展所在路径，默认路径为 ~/.config/Inkscape/extensions（或者放置在系统全局路径：/usr/share/inkscape/extensions）。若你改变了默认路径，则需检查 Inkscape 设置选项，找到扩展文件的存放位置。

自定义：为 Ink/Stitch 安装插件

Ink/Stitch 提供了为 Inkscape 安装插件的功能，用户需首先执行这一功能。

依次点击如下选项： 扩展 Extensions > Ink/Stitch > 线条颜色管理 Thread Color Management > 为 Inkscape 安装线条调色板 Install thread color palettes for Inkscape ，之后等待片刻。

虽然这一过程不会出现进度条之类的提示，不过也无需着急。

该功能执行后，将会安装来自不同纱线制造商的 70 套色板，以及一套符号库。

如果你使用的 Ink/Stitch 是从 Github 下载的 2.0.0 版本，那么下载下来的 ZIP 文件里就包括了色板文件。你只需将其解压到正确的路径：~/.config/inkscape/palettes/。如果你需要环形模板，可以点击 此处 下载，并将其保存到 ~/.config/inkscape/templates 目录下。

重新启动 Inkscape，可在 文件 File > 由模板新建 New From Template 下找到该模板。

Ink/Stitch 绣字

到目前为止，绣花设计最简单也最常用的方法就是使用 Ink/Stitch 的 文字缝制 Lettering 功能。该功能位于 扩展 Extensions > Ink/Stitch > 文字缝制 Lettering 。绣花文字缝制可不是一件简单事儿，它其实就是所谓的缎面绣字，需要做好特殊的文字设置。

你可以将路径转换为缎面绣，但是这种方法比使用文字缝制功能还要繁琐许多。多亏了社区的活跃，2021 年 5 月份发布的 Ink/Stitch 2.0 版本预置了更多的字体。2.0 版本还增加了 扩展 Extensions > Ink/Stitch > 字体管理 Font Management 功能，让用户更方便地管理这些字体。

此外，还有制作字体的功能，但是你需要了解如何使用 Inkscape 设计字体，可在 此处 浏览相关英文教程。这里只给出大概的介绍：首先创建一个 SVG 字体，接着将其储存在 JSON 文件中，这样便可以在 Ink/Stitch 字体管理功能中使用。

该功能将打开一个对话窗口，你可以把文字输进去，调整字体及其大小，然后即可将输入的文字渲染出来。

绣制区域、路径等对象

Ink/Stitch 最容易实现的就是绣制区域或者路径。你需要做的只是画出路径。如果你使用的是形状，那么你需要将其转换成路径，然后执行如下操作： 扩展 Extensions > Ink/Stitch > 填充工具 Fill Tools > 分离填充对象 Break Apart Fill Objects… ，将路径分割成若干部分。

虽然 Inkscape 也有 路径 Path > 分离 Break apart 功能，但是在这种情况下并不可行。

接下来，运行 Ink/Stitch 内置模拟器： 扩展 Extensions > Ink/Stitch > 可视化并导出 Visualise and Export > 模拟器/实际预览 Simulator/Realistic Preview 。

注意，模拟器运行时需要占用大量的系统资源，而且启动时间也比较长。其实，以下功能操作起来会更加简便： 扩展 Extensions > Ink/Stitch > 可视化并导出 Visualise and Export > 线迹计划预览 Stitch Plan Preview 。该功能会在文件外部对线条进行渲染。

简单的缎面及缎面绣

Ink/Stitch 会使用连续的线条（非虚线）将每个笔画转换成之字形或简单的缎面。依照预先设置好的描边宽度，沿着路径绣出线迹。只要路径上没有过多的曲线，使用这一方法就没问题。

这个方法虽然简单，但绝不是最好的选择。最好的选择是使用缎面工具，该功能可以在 扩展 Extensions > 缎面工具 Satin Tools 找到。其中，转换功能又是重中之重，它可以将路径转换为缎面笔画。

通过 扩展 Extensions > 缎面工具 Satin Tools > 旋转缎纹路径 Flip Satin Column Rails ，你还可以改变线迹的方向。这样做可以凸显缎面绣的立体感，典型的例子就是泡芙刺绣（一种非常具有立体感的刺绣）。支持这种功能的机器还可以为绣花时产生的多余的连线线迹标记出修剪记号。这些记号正是从 Ink/Stitch 自身符号库里安装得到的符号。

Ink/Stitch 线迹库

线迹库包括了 Ink/Stitch 可以创建的线迹类型。在前文，填充式线迹和之字形/缎纹线迹已经介绍过了，不过其他还有很多。

• 平针：平针用于边缘装饰，沿直线或曲线缝制出一排短小的线迹，由此组成的一条条虚线就是平针。虚线的尺寸可大可小。

• 豆针：豆针可用于边缘装饰或添加设计细节。使用平针来回缝制就是豆针，这种缝法会增加线迹的厚度。

• 手工针：在该模式下，Ink/Stitch 会将路径的每个节点当作穿针点；这些节点也正是针穿入的位置。

• E 字针：E 字针是一种简单但十分好用的绷缝线迹，用于贴花织物。这种线迹多用于婴儿装，因为婴儿的皮肤比较敏感。

绣花用线列表

有些绣花机，尤其是商用的绣花机，根据设计的需要，可以提前适配不同的针线。必要时，这类机器会自动切换使用合适的针线。有些绣花文件格式支持这一功能，但有些并不支持。Ink/Stitch 可以将用户设置好的线条列表应用到绣花设计中。

如果你想在现有的设计上导入线条列表，可执行如下操作： 扩展 Extensions > Ink/Stitch > 导入线条列表 Import Threadlist 。同样的，线条列表也可以导出： 另存为 Save As 不同的文件格式，如 *.zip。当然，也可以将其打印出来： 扩展 Extensions > Ink/Stitch > 可视化并导出 Visualise and Export > 打印 PDF Print PDF 。

结语

为绣花设计编写软件可不是一件简单的事儿，软件需要支持很多功能，还要应对不同文件格式（有些属于闭源文件格式）带来的难题。Ink/Stitch 已经做得很好了，尽力打造出了一款功能多样的绣花工具，让用户能够进行基础的绣花设计。当然，它也不是完美的，有些功能还需要完善。但是，Ink/Stitch 绝对是一款十分优秀的工具，我也希望它能越来越好。绣花是个不错的兴趣爱好，有了 Ink/Stitch，Fedora Linux 用户便可开启天马行空的设计之门。

via: https://fedoramagazine.org/make-more-with-inkscape-ink-stitch/

作者：Sirko Kemter 选题：lujun9972 译者：aREversez 校对：wxy

本文由 LCTT 原创编译，Linux中国 荣誉推出

欢迎回到我们为了构建更快网页所写的系列文章。本系列的第一部分和第二部分讲述了如何通过优化和替换图片来减少浏览器脂肪。本部分会着眼于在 CSS（层叠式样式表）和字体中减掉更多的脂肪。

调整 CSS

首先，我们先来看看问题的源头。CSS 的出现曾是技术的一大进步。你可以用一个集中式的样式表来装饰多个网页。如今很多 Web 开发者都会使用 Bootstrap 这样的框架。

这些框架当然方便，可是很多人都会将整个框架直接复制粘贴走。Bootstrap 非常大：目前 Bootstrap 4.0 的“最小”版本也有 144.9 KB. 在这个以 TB 来计数据的时代，它可能不算多。但就像所说的那样，一头小牛也能搞出大麻烦。

我们回头来看 getfedora.org 的例子。我们在第一部分中提过，第一个分析结果显示 CSS 文件占用的空间几乎比 HTML 本身还要大十倍。这里显示了所有用到的样式表：

那是九个不同的样式表。其中的很多样式在这个页面中并没有用上。

移除、合并、以及压缩/缩小化

Font-awesome CSS 代表了包含未使用样式的极端。这个页面中只用到了这个字体的三个字形。如果以 KB 为单位，getfedora.org 用到的 font-awesome CSS 最初有 25.2 KB. 在清理掉所有未使用的样式后，它只有 1.3 KB 了。这只有原来体积的 4% 左右！对于 Bootstrap CSS，原来它有 118.3 KB，清理掉无用的样式后只有 13.2 KB，这就是差异。

下一个问题是，我们必须要这样一个 bootstrap.css 和 font-awesome.css 吗？或者，它们能不能合起来呢？没错，它们可以。这样虽然不会节省更多的文件空间，但浏览器成功渲染页面所需要发起的请求更少了。

最后，在合并 CSS 文件后，尝试去除无用样式并缩小它们。这样，它们只有 4.3 KB 大小，而你省掉了 10.1 KB.

不幸的是，在 Fedora 软件仓库中，还没有打包好的缩小工具。不过，有几百种在线服务可以帮到你。或者，你也可以使用 CSS-HTML-JS Minify，它用 Python 编写，所以容易安装。现在没有一个可用的工具来净化 CSS，不过我们有 UnCSS 这样的 Web 服务。

字体改进

CSS3 带来了很多开发人员喜欢的东西。它可以定义一些渲染页面所用的字体，并让浏览器在后台下载。此后，很多 Web 设计师都很开心，尤其是在他们发现了 Web 设计中图标字体的用法之后。像 Font Awesome 这样的字体集现在非常流行，也被广泛使用。这是这个字体集的大小：

current free version 912 glyphs/icons, smallest set ttf 30.9KB, woff 14.7KB, woff2 12.2KB, svg 107.2KB, eot 31.2

所以问题是，你需要所有的字形吗？很可能不需要。你可以通过 FontForge 来去除这些无用字形，但这需要很大的工作量。你还可以用 Fontello. 你可以使用公共实例，也可以配置你自己的版本，因为它是自由软件，可以在 Github 上找到。

这种自定义字体集的缺点在于，你必须自己来托管字体文件。你也没法使用其它在线服务来提供更新。但与更快的性能相比，这可能算不上一个缺点。

总结

现在，你已经做完了所有对内容本身的操作，来最大限度地减少浏览器加载和解释的内容。从现在开始，只有服务器的管理技巧才才能帮到你了。

有一个很简单，但很多人都做错了的事情，就是使用一些智能缓存。比如，CSS 或者图片文件可以缓存一周。但无论如何，如果你用了 Cloudflare 这样的代理服务或者自己构建了代理，首先要做的都应该是缩小页面。用户喜欢可以快速加载的页面。他们会（默默地）感谢你，服务器的负载也会更小。

via: https://fedoramagazine.org/design-faster-web-pages-part-3-font-css-tweaks/

作者：Sirko Kemter 选题：lujun9972 译者：StdioA 校对：wxy

本文由 LCTT 原创编译，Linux中国 荣誉推出

欢迎回到我们为了构建更快网页所写的系列文章。上一篇文章讨论了只通过图片压缩实现这个目标的方法。这个例子从一开始有 1.2MB 的“浏览器脂肪”，然后它减轻到了 488.9KB 的大小。但这还不够快！那么本文继续来给浏览器“减肥”。你可能在这个过程中会认为我们所做的事情有点疯狂，但一旦完成，你就会明白为什么要这么做了。

准备工作

本文再次从对网页的分析开始。使用 Firefox 内置的截图功能来对整个页面进行截图。你还需要用 sudo 来安装 Inkscape：

$ sudo dnf install inkscape

如果你想了解 Inkscape 的用法，Fedora 杂志上有几篇现成的文章。本文仅会介绍一些基本的 SVG 优化方法以供 Web 使用。

分析

我们再来用 getfedora.org 的网页来举例。

这次分析以图形方式完成更好，这也就是它从屏幕截图开始的原因。上面的截图标记了页面中的所有图形元素。Fedora 网站团队已经针对两种情况措施（也有可能是四种，这样更好）来替换图像了。社交媒体的图标变成了字体的字形，而语言选择器变成了 SVG.

我们有几个可以替换的选择：

• CSS3
• 字体
• SVG
• HTML5 Canvas

HTML5 Canvas

简单来说，HTML5 Canvas 是一种 HTML 元素，它允许你借助脚本语言（通常是 JavaScript）在上面绘图，不过它现在还没有被广泛使用。因为它可以使用脚本语言来绘制，所以这个元素也可以用来做动画。这里有一些使用 HTML Canvas 实现的实例，比如三角形模式、动态波浪和字体动画。不过，在这种情况下，似乎这也不是最好的选择。

CSS3

使用层叠式样式表，你可以绘制图形，甚至可以让它们动起来。CSS 常被用来绘制按钮等元素。然而，使用 CSS 绘制的更复杂的图形通常只能在技术演示页面中看到。这是因为使用视觉来制作图形依然要比使用代码来的更快一些。

字体

另外一种方式是使用字体来装饰网页，Fontawesome 在这方面很流行。比如，在这个例子中你可以使用字体来替换“Flavor”和“Spin”的图标。这种方法有一个负面影响，但解决起来很容易，我们会在本系列的下一部分中来介绍。

SVG

这种图形格式已经存在了很长时间，而且它总是在浏览器中被使用。有很长一段时间并非所有浏览器都支持它，不过现在这已经成为历史了。所以，本例中图形替换的最佳方法是使用 SVG.

为网页优化 SVG

优化 SVG 以供互联网使用，需要几个步骤。

SVG 是一种 XML 方言。它用节点来描述圆形、矩形或文本路径等组件。每个节点都是一个 XML 元素。为了保证代码简洁，SVG 应该包含尽可能少的元素。

我们选用的 SVG 实例是带有一个咖啡杯的圆形图标。你有三种选项来用 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" />

你应该可以看出，代码变得越来越复杂，需要更多的字符来描述它。当然，文件中包含更多的字符，就会导致更大的尺寸。

节点清理

如果你在 Inkscape 中打开了实例 SVG 按下 F2，就会激活一个节点工具。你应该看到这样的界面：

这个例子中有五个不必要的节点——就是直线中间的那些。要删除它们，你可以使用已激活的节点工具依次选中它们，并按下 Del 键。然后，选中这条线的定义节点，并使用工具栏的工具把它们重新做成角。

如果不修复这些角，我们还有方法可以定义这条曲线，这条曲线会被保存，也就会增加文件体积。你可以手动清理这些节点，因为它无法有效的自动完成。现在，你已经为下一阶段做好了准备。

使用“另存为”功能，并选择“优化的 SVG”。这会弹出一个窗口，你可以在里面选择移除或保留哪些成分。

虽然这个 SVG 实例很小，但它还是从 3.2KB 减小到了 920 字节，不到原有的三分之一。

回到 getfedora 的页面：页面主要部分的背景中的灰色沃罗诺伊图，在经过本系列第一篇文章中的优化处理之后，从原先的 211.12 KB 减小到了 164.1 KB.

页面中导出的原始 SVG 有 1.9 MB 大小。经过这些 SVG 优化步骤后，它只有 500.4 KB 了。太大了？好吧，现在的蓝色背景的体积是 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 (看起来开发过程已经不活跃了)
• Scour

本例中我们使用 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，并对它进行优化以供使用。请继续关注 Feroda 杂志，第三篇即将出炉。

via: https://fedoramagazine.org/design-faster-web-pages-part-2-image-replacement/

作者：Sirko Kemter 选题：lujun9972 译者：StdioA 校对：wxy

本文由 LCTT 原创编译，Linux中国 荣誉推出

很多 Web 开发者都希望做出加载速度很快的网页。在移动设备浏览占比越来越大的背景下，使用响应式设计使得网站在小屏幕下看起来更漂亮只是其中一个方面。Browser Calories 可以展示网页的加载时间 —— 这不单单关系到用户，还会影响到通过加载速度来进行评级的搜索引擎。这个系列的文章介绍了如何使用 Fedora 提供的工具来给网页“瘦身”。

准备工作

在你开始缩减网页之前，你需要明确核心问题所在。为此，你可以使用 Browserdiet. 这是一个浏览器插件，适用于 Firefox、Opera、 Chrome 和其它浏览器。它会对打开的网页进行性能分析，这样你就可以知道应该从哪里入手来缩减网页。

然后，你需要一些用来处理的页面。下面的例子是针对 getferoda.org 的测试截图。一开始，它看起来非常简单，也符合响应式设计。

然而，BroserDiet 的网页分析表明，这个网页需要加载 1.8MB 的文件。所以，我们现在有活干了！

Web 优化

网页中包含 281 KB 的 JavaScript 文件、203 KB 的 CSS 文件，还有 1.2 MB 的图片。我们先从最严重的问题 —— 图片开始入手。为了解决问题，你需要的工具集有 GIMP、ImageMagick 和 optipng. 你可以使用如下命令轻松安装它们：

sudo dnf install gimp imagemagick optipng

比如，我们先拿到这个 6.4 KB 的文件：

首先，使用 file 命令来获取这张图片的一些基本信息：

$ file cinnamon.png
cinnamon.png: PNG image data, 60 x 60, 8-bit/color RGBA, non-interlaced

这张只由白色和灰色构成的图片使用 8 位 / RGBA 模式来存储。这种方式并没有那么高效。

使用 GIMP，你可以为这张图片设置一个更合适的颜色模式。在 GIMP 中打开 cinnamon.png。然后，在“图片 > 模式”菜单中将其设置为“灰度模式”。将这张图片以 PNG 格式导出。导出时使用压缩因子 9，导出对话框中的其它配置均使用默认选项。

$ file cinnamon.png
cinnamon.png: PNG image data, 60 x 60, 8-bit gray+alpha, non-interlaced

输出显示，现在这个文件现在处于 8 位 / 灰阶 + aplha 模式。文件大小从 6.4 KB 缩小到了 2.8 KB. 这已经是原来大小的 43.75% 了。但是，我们能做的还有很多！

你可以使用 ImageMagick 工具来查看这张图片的更多信息。

$ identify cinnamon2.png
cinnamon.png PNG 60x60 60x60+0+0 8-bit Grayscale Gray 2831B 0.000u 0:00.000

它告诉你，这个文件的大小为 2831 字节。我们回到 GIMP，重新导出文件。在导出对话框中，取消存储时间戳和 alpha 通道色值，来让文件更小一点。现在文件输出显示：

$ identify cinnamon.png
cinnamon.png PNG 60x60 60x60+0+0 8-bit Grayscale Gray 2798B 0.000u 0:00.000

下面，用 optipng 来无损优化你的 PNG 图片。具有相似功能的工具有很多，包括 advdef（这是 advancecomp 的一部分），pngquant 和 pngcrush。

对你的文件运行 optipng。 注意，这个操作会覆盖你的原文件：

$ optipng -o7 cinnamon.png
** Processing: cinnamon.png
60x60 pixels, 2x8 bits/pixel, grayscale+alpha
Reducing image to 8 bits/pixel, grayscale
Input IDAT size = 2720 bytes
Input file size = 2812 bytes

Trying:
 zc = 9 zm = 8 zs = 0 f = 0 IDAT size = 1922
 zc = 9 zm = 8 zs = 1 f = 0 IDAT size = 1920

Selecting parameters:
 zc = 9 zm = 8 zs = 1 f = 0 IDAT size = 1920

Output IDAT size = 1920 bytes (800 bytes decrease)
Output file size = 2012 bytes (800 bytes = 28.45% decrease)

-o7 选项处理起来最慢，但最终效果最好。于是你又将文件缩小了 800 字节，现在它只有 2012 字节了。

要压缩文件夹下的所有 PNG，可以使用这个命令：

$ optipng -o7 -dir=<directory> *.png

-dir 选项用来指定输出文件夹。如果不加这个选项，optipng 会覆盖原文件。

选择正确的文件格式

当涉及到在互联网中使用的图片时，你可以选择：

• JPG 或 JPEG
• GIF
• PNG
• aPNG
• JPG-LS
• JPG 2000 或 JP2
• SVG

JPG-LS 和 JPG 2000 没有得到广泛使用。只有一部分数码相机支持这些格式，所以我们可以忽略它们。aPNG 是动态的 PNG 格式，也没有广泛使用。

可以通过更改压缩率或者使用其它文件格式来节省下更多字节。我们无法在 GIMP 中应用第一种方法，因为现在的图片已经使用了最高的压缩率了。因为我们的图片中不再包含 aplha 通道，你可以使用 JPG 类型来替代 PNG。 现在，使用默认值：90% 质量 —— 你可以将它减小至 85%，但这样会导致可见的叠影。这样又省下一些字节：

$ identify cinnamon.jpg
cinnamon.jpg JPEG 60x60 60x60+0+0 8-bit sRGB 2676B 0.000u 0:00.000

只将这张图转成正确的色域，并使用 JPG 作为文件格式，就可以将它从 23 KB 缩小到 12.3 KB，减少了近 50%.

PNG vs JPG: 质量和压缩率

那么，剩下的文件我们要怎么办呢？除了 Fedora “风味”图标和四个特性图标之外，此方法适用于所有其他图片。我们能够处理的图片都有一个白色的背景。

PNG 和 JPG 的一个主要区别在于，JPG 没有 alpha 通道。所以，它没有透明度选项。如果你使用 JPG 并为它添加白色背景，你可以将文件从 40.7 KB 缩小至 28.3 KB.

现在又有了四个可以处理的图片：背景图。对于灰色背景，你可以再次使用灰阶模式。对更大的图片，我们就可以节省下更多的空间。它从 216.2 KB 缩小到了 51 KB —— 基本上只有原图的 25% 了。整体下来，你把这些图片从 481.1 KB 缩小到了 191.5 KB —— 只有一开始的 39.8%.

质量 vs 大小

PNG 和 JPG 的另外一个区别在于质量。PNG 是一种无损压缩光栅图形格式。但是 JPG 虽然使用压缩来缩小体积，可是这会影响到质量。不过，这并不意味着你不应该使用 JPG，只是你需要在文件大小和质量中找到一个平衡。

成就

这就是第一部分的结尾了。在使用上述技术后，得到的结果如下：

你将一开始 1.2 MB 的图片体积缩小到了 488.9 KB. 只需通过 optipng 进行优化，就可以达到之前体积的三分之一。这可能使得页面更快地加载。不过，要是使用蜗牛到超音速来对比，这个速度还没到达赛车的速度呢！

最后，你可以在 Google Insights 中查看结果，例如：

在移动端部分，这个页面的得分提升了 10 分，但它依然处于“中等”水平。对于桌面端，结果看起来完全不同，从 62/100 分提升至了 91/100 分，等级也达到了“好”的水平。如我们之前所说的，这个测试并不意味着我们的工作就做完了。通过参考这些分数可以让你朝着正确的方向前进。请记住，你正在为用户体验来进行优化，而不是搜索引擎。

via: https://fedoramagazine.org/design-faster-web-pages-part-1-image-compression/

作者：Sirko Kemter 选题：lujun9972 译者：StdioA 校对：wxy

本文由 LCTT 原创编译，Linux中国 荣誉推出