【译】重要的图像优化之一：概要和目录

注明：本人原创翻译，原版为Essential Image Optimization电子书，这里将其拆分为几篇文章发布。另外，文中部分链接可能会因为“网络”原因无法打开。不必着急，我会慢慢将其中一些比较好的内容翻译过来发表，都会在这个“Web图像技术深究”专题中。

正文：

概要

我们都应该让图片压缩自动化！

在2017年，我们应该开始让图片优化自动化了。现在，对于Web来说，一个很容易被忽略的实践准则变化就是：一个不经过构建发布流程的内容是很容易出问题的。那么图片优化如何自动化，可以在构建过程中使用imagemin或者libvips，另外还有很多解决方案。

大多数的CDN（如Akamai）和第三方解决方案如Cloudinary、imgix、Fastly's Image Optimizer、Instart Logic's SmartVision或者ImageOptim API都提供了全面的自动化图像优化方案。

实际上，如果你自己处理，那么阅读博客文章和调整配置的时间成本可能远远大于这些服务的每月费用（Cloudinary是有免费版本的）。如果你基于成本或延时问题，不想将此工作外包给第三方，那么依然有开源项目可以替代，比如Imageflow或Thumbor都可以搭建自己的图片优化自动化服务。

译者：中国国内类似的CDN，如七牛云。

每个人都应该有效地压缩图片！

至少，要使用ImageOptim。它可以显著的减少图片的大小，同时保持图片的显示质量，并且支持Windows和Linux。

更进一步的话，可以使用MozJPEG来处理你的JPEG图片（最好设置质量为80%或者更低）并考虑支持渐进式的JPEG；使用pngquant处理PNG图片；使用SVGO处理SVG。通过这些组件可以明确的删除图片文件的元数据，使得图片不会过于庞大（pngquant中使用--strip选项）。不要使用体积疯狂的GIF动画，取而代之提供H.264动画（或者为Chrome，Firefox和Opera浏览器提供WebM）！如果不行，至少使用Giflossy对GIF进行优化。如果你有更强劲的CPU，需要高质量的网络图片，并且接受比较缓慢的编码速度，那么你可以尝试使用：Guetzli。

一些浏览器可以通过HTTP请求的Header设置支持的图片格式。这个可以用于有条件的提供图片格式：比如为基于Blink的浏览器（Chrome）提供WebP，而为其他浏览器返回JPEG/PNG格式。

事实上，你总是可以做到更多。一些工具可以生成和提供srcset属性中的断点。在基于Blink的浏览器中，你可以通过client-hints进行自动化处理资源格式的选择，并且你可以发送较少的字节给在浏览器中选择了“数据节省”的用户（通过Header中的Save-Data）。

图片的大小越小，你为你的用户提供的网络体验就越好，尤其对于移动设备来说。在这本书中，我们将研究通过现代压缩技术减少图像大小并且对质量影响最小的方法。

目录

• ​介绍
• 如何判断我的图像是否需要优化？
• 如何选择正确的图像格式？
• “素人”JPEG
• JPEG的压缩模式
  • 渐进式JPEG的优点
  • 谁在生产环境中使用了渐进式JPEG？
  • 渐进式JPEG的缺点
  • 如何生成一个渐进式JPEG？
  • 色度（或颜色）抽样
  • JPEG引发的格式拓展
  • 使用JPEG优化编码器
  • 什么是MozJPEG？
  • 什么是Guetzli？
  • MozJPEG与Guetzli孰优孰劣？
  • Butteraugli
• 什么是WebP？
  • WebP的表现如何？
  • 谁在生产环境中使用WebP？
  • WebP编码如何执行？
  • WebP的浏览器支持
  • 如何将我的图像转换为WebP？
  • 如何在我的操作系统上查看WebP图像？
  • 如何提供WebP？
• SVG优化
• 避免使用有损编解码器重复压缩图像
• 减少不必要的图像解码和尺寸调整带来的损耗
  • 使用srcset提供HiDPI图像
  • 艺术化的响应
• 颜色管理
• 图像拼合技术
• 延迟加载非关键图像
• 避免<code>display: none;</code>的陷阱
• 图像CDN服务对你有意义吗？
• 缓存图像资源
• 预加载关键图像资源
• 图像的网络性能预算
• 最后的建议
• 附注

下一篇：【译】重要的图像优化之二：从介绍开始