Web图像技术深究

【译】重要的图像优化之十：写在最后

2017-10-27  本文已影响0人  ProteanBear

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

目录

正文：

图像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都提供了一系列图像处理方案，并且在标准版和免费版中都支持压缩、调整尺寸、裁剪以及缩略图生成等主要功能。

Modern-Image36.jpg Cloudinary多媒体库：默认情况下，Cloudinary的编码是生成非渐进式JPEG。要选择生成它们，请选中'更多选项'中的'进阶'选项，或者传递'fl_progressive'参数标识。

Cloudinary列出了七个应用较广的图像转换类别，其中共有48个子类别。Imgix则声称它包含超过100种的图像处理操作。

那默认情况下发生什么？

Cloudinary在默认情况下会执行以下优化：

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将会自动开始监控它，并在超出预算时提醒您：

F2BCD61B-85C5-4E82-88CF-9E39CB75C9C0.jpg

Calibre也提供了类似的功能，支持为你的每个目标设备类型设置预算。这是很有用的，因为你通过WiFi在桌面上的图像尺寸的预算可能会与你在手机上的预算有很大的不同。

budgets.jpg

最后的建议

最终，选择一个图像优化策略将取决于你为你的用户提供什么图像类型，和你决定设定一套怎样的合理的评估标准。你可能会使用SSIM或Butteraugli的评分，或者要求图像它要足够小，总之放飞你的想象去体会什么才有最有意义的。

以下是我的最终的建议：

如果您无法基于浏览器支持情况，响应符合条件的图像格式，请记得：

如果你可以有条件的响应图像格式 （请使用<picture>标签、支持请求header响应或者使用Picturefill）：

最后，祝你压缩快乐！

注意：关于如何优化图像的更实际的指导，我强烈推荐Jeremy Wagner的Web性能实战。另外，高性能的图像也有关于这个主题的优秀而细微的建议。

附注

上一篇 下一篇

猜你喜欢

热点阅读