注明：本人原创翻译，原版为Essential Image Optimization电子书，这里将其拆分为几篇文章发布。另外，文中部分链接可能会因为“网络”原因无法打开。不必着急，我会慢慢将其中一些比较好的内容翻译过来发表，都会在这个“Web图像技术深究”专题中。
目录
- 介绍
- 如何判断我的图像是否需要优化？
- 如何选择正确的图像格式？
- “素人”JPEG
- JPEG的压缩模式
-
什么是WebP？
- WebP的表现如何？
- 谁在生产环境中使用WebP？
- WebP编码如何执行？
- WebP的浏览器支持
- 如何将我的图像转换为WebP？
- 如何在我的操作系统上查看WebP图像？
- 如何提供WebP？
- SVG优化
- 避免使用有损编解码器重复压缩图像
-
减少不必要的图像解码和尺寸调整带来的损耗
- 使用srcset提供HiDPI图像
- 艺术化的响应
- 颜色管理
- 图像拼合技术
- 延迟加载非关键图像
- 避免<code>display: none;</code>的陷阱
- 图像CDN服务对你有意义吗？
- 缓存图像资源
- 预加载关键图像资源
- 图像的网络性能预算
- 最后的建议
- 附注
正文：
图像CDN服务对你有意义吗？
你浪费在阅读博客帖子学习如何来设置自己的图像处理流水线，并调整那些配置的时间，对于你的服务来说其实也是一种费用成本。尤其随着Cloudinary开始提供了免费服务，Imgix和作为OSS替代产品Thumbor的都提供的免费试用，你其实有大量可以使用的自动化服务可以选择。
为了实现最佳的页面加载时间，你需要优化你的图像加载。此优化可能需要响应式图像策略，并且需要受益于服务器上的图像压缩、自动选择最佳格式和响应式调整尺寸。重要的是，您还需要尽可能快地以正确的分辨率将正确尺寸的图像提供给正确的设备。这样做可并不像人们想象的那么容易。
使用你自己的服务器还是使用CDN服务
由于图像处理的复杂性和可变性，我们将提供一些在该领域经验丰富的开放服务的报价，然后继续提出一些建议。
“如果你的产品不是一个专业的图像处理应用，那么你就不要自己这样做，因为像Cloudinary（或imgix，Ed。）这样的服务会比你更有效率，请更好地使用它们。如果你担心成本问题，请考虑开发和维护的花费，对比托管、存储和交付的花费。“ - 克里斯·吉米尔。
目前情况下，我们表示同意并建议您考虑使用CDN来满足您的图像处理需求。我们将审查两个CDN，将它们的功能与之前提出的图像处理任务进行比较。
Cloudinary和imgix
Cloudinary和imgix是两个已建立的图像处理CDN服务。他们是全球成千上万的开发商和公司的选择，包括了Netflix和Red Bull。让我们更详细地了解一下它们。∂
开始之前，应该先了解那些？
首先，除非你是像它们一样的大型服务集群的所有者，否则与反复开发你自己的解决方案相比，它们一个巨大的优势就是使用了分布式的全球网络系统，可以让你的图像副本更接近你的用户。而随着技术的进步，CDN还可以更轻松地“未来化”你的图像加载策略 - 你自己做的话可能需要很大的维护量，同时CDN还可以跟踪浏览器对新兴格式的支持并且跟进图像压缩社区的最新技术进展。
第二，每个服务都是有定价分级的，像Cloudinary提供了一个免费的级别；而imgix相对于他们的一些高价服务计划，也推出了很多成本低廉地定价。而且Imgix提供免费试用服务，这几乎与免费是相同的。
第三，API访问是提供两种服务的。开发人员可以通过编程直接调用访问CDN，并自动进行图像处理。而客户端库、框架插件和API文档也可以使用，当然其中一些功能是限于较高的费用级别的。
现在，让我们开始吧
这里，我们将我们的讨论限制在静态图像上。Cloud和Imgix都提供了一系列图像处理方案，并且在标准版和免费版中都支持压缩、调整尺寸、裁剪以及缩略图生成等主要功能。
Cloudinary列出了七个应用较广的图像转换类别，其中共有48个子类别。Imgix则声称它包含超过100种的图像处理操作。
那默认情况下发生什么？
Cloudinary在默认情况下会执行以下优化：
- 使用MozJPEG编码JPEG (默认会使用Guetzli工具)
- 从转换后图像文件中清除所有相关的元数据（原始图像保持不变）。不想执行此行为并要生成元数据完整的转换后图像，请添加keep_iptc标识。
- 生成默认质量级别的WebP、GIF、JPEG和JPEG-XR格式。要调整默认的质量级别，请在转换时设置质量参数。
- 运行优化算法，最小化文件体积并对PNG、JPEG或GIF格式图像的视觉质量影响最小。
Imgix并没有如Cloudinary那样的默认优化。但是，它具有可设置的默认图像质量。对于imgix的使用者来说，自动参数可帮助您在图像目录中自动执行基础的优化处理。
目前，它有四种不同的方法：
- 压缩
- 视觉增强
- 文件格式转换
- 红眼删除
Imgix支持以下图像格式：JPEG，JPEG2000，PNG，GIF，动画GIF，TIFF，BMP，ICNS，ICO，PDF，PCT，PSD，AI。
Cloudinary支持以下图像格式：JPEG，JPEG 2000，JPEG XR，PNG，GIF，动画GIF，WebP，动画WebP，BMP，TIFF，ICO，PDF，EPS，PSD，SVG，AI，DjVu，FLIF，TARGA。
它们的性能如何?
CDN传输性能主要与网络延迟和网络速度相关。
对于完全未缓存的图像，延迟总会是有所增加的。但是，一旦一个图像已经被缓存并分布到网络服务器上，事实上全球的CDN可以很快找到对用户响应最快的节点，加上正确处理图像的所带来的字节节省，对比那些处理图像不佳或需要跨越地球的单个服务器来说，CDN的延迟问题大大减小。
这两个都是访问快速和使用广泛的CDN服务。配置它们可以减少延迟并提高下载速度。下载速度影响页面加载时间，而页面加载时间是提高用户体验和用户转换率的最重要指标之一。
那么它们比较起来如何呢？
Cloudinary拥有160K客户，其中包括了Netflix、eBay和Dropbox。Imgix没有报告有多少客户，但它比Cloudinary要少一些。即使如此，imgix依然包括了一些重量级的图像用户，已知的如Kickstarter、Exposure、unsplash和Eventbrite。
实际上，在图像处理中存在如此多的不受控制的变量，对这两个服务巨头之间进行点对点的性能比较是很困难的。这很大程度上取决于处理图像需要多少时间（这是一个可变的时间量），以及影响速度和下载时间的最终输出需求的大小和分辨率。花费成本也可能最终是你最重要的因素。
CDN服务需要花费金钱。一些流量大的图像业务网站每月可能要花费数百美元的CDN费用。另外，需要一定程度的知识储备和编程技能才能充分利用这些服务。如果你不是要做什么太过分的事情，你是不会有任何麻烦的。
但是，如果您不太喜欢使用图像处理工具或API，那么你需要经历一个学习曲线。为了适应CDN服务器链接定位，你需要更改本地链接中的一些URL。你需要勤快的检查每个地址的正确性:)
结论
如果您正在进行或计划制作自己的图像处理服务，也许您应该考虑一下是否可以使用CDN。
图像的网络性能预算
性能预算是站点团队尝试不超过的网页显示效果的“预先估算”。例如，“任何页面上的图像不会超过200KB”或“3秒以内的用户必须可以使用”。当一个预算没有得到满足，探索原因和如何解决以达到目标。
预算为与利益相关者讨论性能表现时提供了一个有用的框架。当一个设计或者业务决策可能会影响网站的效果时，请遵循此预算。它们是一个参考，可以在对网站的用户体验造成伤害时，提示你推迟或重新思考这一变化。
我发现，当页面性能监控自动化的时候，团队会在性能预算方面取得了最大的成功。因为这时候，团队无需手动检查网络瀑布的预算回归，而且标记预算何时交叉也会自动进行。两个比较有用的性能预算跟踪服务是Calibre和SpeedCurve。
一旦定义了图像尺寸的性能预算，SpeedCurve将会自动开始监控它，并在超出预算时提醒您：
Calibre也提供了类似的功能，支持为你的每个目标设备类型设置预算。这是很有用的，因为你通过WiFi在桌面上的图像尺寸的预算可能会与你在手机上的预算有很大的不同。
最后的建议
最终，选择一个图像优化策略将取决于你为你的用户提供什么图像类型，和你决定设定一套怎样的合理的评估标准。你可能会使用SSIM或Butteraugli的评分，或者要求图像它要足够小，总之放飞你的想象去体会什么才有最有意义的。
以下是我的最终的建议：
如果您无法基于浏览器支持情况，响应符合条件的图像格式，请记得：
- 对于质量级别高于90的JPEG图像，Guetzli + MozJPEG的jpegtran是一个好格式。
- 对于网络使用，
q=90会有些浪费。你可以降低到q=80，甚至在2x显示器上可以设置为q=50。由于Guetzli不会将图像压缩到那么低，对于Web上图像你可以使用MozJPEG。 - KornelLesiński最近改进了MozJPEG的cjpeg命令，用添加小的sRGB配置文件，以帮助Chrome在宽色域显示器上显示更加自然的颜色。
- 对于网络使用，
- 对于PNG，pngquant + advpng有非常好的速度/压缩比。
如果你可以有条件的响应图像格式 （请使用<picture>标签、支持请求header响应或者使用Picturefill）：
- 为支持WebP的浏览器提供它
- 从原始的100％质量的图像创建WebP图像。否则，您将会给支持WebP的浏览器一张带有JPEG扭曲和 WebP扭曲的看上去糟透了的图像！但是，如果你使用WebP压缩未压缩的源图像，它将几乎没有WebP扭曲，并且可以更好地压缩。
- WebP团队使用的默认设置
-m 4 -q 75，通常适用于大多数针对速度/比率进行优化的情况。 - WebP还具有无损（
-m 6 -q 100）的特殊模式，可以通过探索所有参数组合将文件减小到最小的尺寸。这是一个较慢的过程，但对于静态资源这是值得的。
- 退而求其次，可以将Guetzli或MozJPEG压缩过的原图提供给其他浏览器。
最后，祝你压缩快乐！
注意：关于如何优化图像的更实际的指导，我强烈推荐Jeremy Wagner的Web性能实战。另外，高性能的图像也有关于这个主题的优秀而细微的建议。
附注
- JPEG XT定义了关于1992年JPEG规范的扩展。作为对于古老的JPEG上进行像素完美渲染的扩展，这个规范简化了旧的1992规范，并且选择libjpeg-turbo作为其参考实现（基于受欢迎程度）。
- PIK是一个值得关注的新型图像编解码器。它与JPEG兼容，并且具有更高效的颜色空间，类似于Guetzli的优势。它可以以JPEG的2/3的速度进行图像解码，并且比libjpeg提供的文件体积小54％。与Guetzli-ified JPEG相比，解码和压缩都更快。一项关于现代图像编码心理视觉相似性的研究表明，PIK仅为其他替代品的一半大小。不幸的是，目前来看，这个编解码器还有很长的路要走，它的编码时间现在（2017年8月）还是慢的基本无法使用。
- 通常推荐使用ImageMagick进行图像优化。这篇文章也认为它是一个很好的工具，但是它的输出通常需要更多的优化，而其他工具可以提供更好的输出。我们推荐可以尝试使用libvps，但它是比较低级别的工具，需要更多的技术能力才能使用。ImageMagick曾经注意到您可能想知道的安全漏洞。
- Blink（Chrome使用的渲染引擎）会在主线程中解码图像。将解码工作转移到合成器线程，释放主线程以处理其他任务，我们称之为延迟解码。在延迟解码时，解码工作会保留关键路径以便在显示器上呈现出框架，因此仍可能导致动画抖动。通过API
img.decode()应该可以帮助你解决抖动的问题。
