注明：本人原创翻译，原版为Essential Image Optimization电子书，这里将其拆分为几篇文章发布。另外，文中部分链接可能会因为“网络”原因无法打开。不必着急，我会慢慢将其中一些比较好的内容翻译过来发表，都会在这个“Web图像技术深究”专题中。
目录
- 介绍
- 如何判断我的图像是否需要优化？
- 如何选择正确的图像格式？
- “素人”JPEG
- JPEG的压缩模式
-
什么是WebP？
- WebP的表现如何？
- 谁在生产环境中使用WebP？
- WebP编码如何执行？
- WebP的浏览器支持
- 如何将我的图像转换为WebP？
- 如何在我的操作系统上查看WebP图像？
- 如何提供WebP？
- SVG优化
- 避免使用有损编解码器重复压缩图像
-
减少不必要的图像解码和尺寸调整带来的损耗
- 使用srcset提供HiDPI图像
- 艺术化的响应
- 颜色管理
- 图像拼合技术
- 延迟加载非关键图像
- 避免<code>display: none;</code>的陷阱
- 图像CDN服务对你有意义吗？
- 缓存图像资源
- 预加载关键图像资源
- 图像的网络性能预算
- 最后的建议
- 附注
正文：
SVG的优化
保持SVG的优良，意味着要清除任何不必要的东西。使用编辑器创建的SVG文件通常包含大量冗余信息（元数据、注释、隐藏层等）。通常可以安全地删除此内容，或将其转换为更小的形式，而不影响当前要显示的最终SVG。
Modern-Image26.jpg
由Jake Archibald提供的SVGOMG，提供了一个GUI界面方便你通过选择选项优化你的SVG，并支持实时预览。
SVG优化的一些通用规则（SVGO）：
- 使用Minify和gzip压缩您的SVG文件。SVG实际上只是以XML格式表示的文本资源，和CSS、HTML以及JavaScript是一样的，我们应该使用Minify和gzip压缩它以提高性能。
- 使用预定义的SVG图形如
<rect>，<circle>，<ellipse>，<line>和<polygon>取代路径。优选预定义的形状有助于减少生成最终图像所需的标签量，也意味着较少的浏览器解析和点阵描述代码。减少SVG复杂度也意味着浏览器可以更快地显示它。 - 如果您必须使用路径（Path），请尝试减少曲线路径，尽量简化和合并它们。Illustrator的简化工具可以帮助您在复杂的艺术品中消除多余的点，同时平滑不规则的曲线。
- 避免使用组（Group）。如果不能，请尝试简化它们。
- 删除不可见的图层。
- 避免使用任何Photoshop或Illustrator效果。它们会使生成较大的位图图像。
- 仔细检查SVG中任何非友好的嵌入的位图图像。
- 使用工具优化SVG。 SVGOMG是一个Jake Archibald为SVGO编写的一个方便的Web端操作界面。如果你使用Sketch，可以在导出时使用[SVGO压缩插件](Sketch plugin for running SVGO)以减小导出文件的体积。
image.png
使用SVGO高精度模式（体积减少29%）和低精度模式（体积减少38%）处理SVG原图后的对比示例。
SVGO是一种Node.js环境下优化SVG的工具。SVGO可以通过减少你的路径（Path）中的精度点数，来减少最终文件的体积。每增加一个点位数后就会增加一个字节，这就是为什么更改精度（位数）会严重影响文件的体积。但是，改变精度需要非常小心，因为它会影响你的图形的视觉效果。
image.png
需要注意的是，虽然SVGO在前面的例子中都表现良好，并不会过分简化曲线和形状，但是有很多情况下可能不是这样。如上图，观察火箭上的线条可以看到在较低的经度下，线条是如何产生了变形。
在命令行中使用SVGO：
如果您更喜欢GUI，SVGO可以作为全局的npm CLI安装：
npm i -g svgo
然后可以对本地的SVG文件执行，如下所示：
svgo input.svg -o output.svg
它支持您可能期望的所有选项，包括调整浮点精度：
svgo input.svg --precision=1 -o output.svg
有关支持选项的完整列表，请参阅SVGO 说明文件。
不要忘了压缩SVG！
image.png
此外，不要忘记使用Gzip压缩你的SVG资源或者使用Brotli来提供服务。因为SVG是文本的，所以压缩率会非常高（可以减少50%）。
当Google发布了一个新徽标时，我们宣布其最小版本的大小只有305个字节。
Modern-Image30.jpg
有很多高级的SVG技巧可以用来将其进一步删减体积（一直到146个字节）！可以说，无论是通过工具还是手动清理，可能你都有可能将SVG的体积再刮掉一些。
SVG Sprite
SVG在制作图标时非常强大，它就像一个精灵一样，提供了一种表示可视化图形的方式，在这种方式里没有奇怪的必须使用的字体。它有着比图标字体（SVG笔触属性）更精准的CSS样式控制，更好的定位控制（不需要各种伪元素和CSS display），并且SVG 更容易理解。
像svg-sprite和IcoMoon这样的工具，可以自动将SVG组合成sprite，并可以通过CSS Sprite，Symbol Sprite或Stacked Sprite来使用。Una Kravetz有一篇实用的文章值得看一下，其中说明了如何使用gulp-svg-sprite进行SVG Sprite工作流程。Sara Soudein也曾在她的博客中表述转变图标字体到SVG。
进一步阅读
Sara Soueidan的网页交付中的优化SVG技巧和Chris Coyier的实用SVG电子书都非常好。我还发现Andreas Larsen的优化SVG帖子很有启发（第1 部分，第2部分）。另外，在Sketch中准备和导出SVG图标也是一个很好的借鉴。
网友评论