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

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

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

正文：

介绍

图片经常占用大量的互联网带宽，因为它们通常都非常大。根据HTTP Archive的统计结果显示，网页数据中平均60%的内容都是有JPEG、PNG和GIF组成的图像。截止至2017年7月，平均一个网站的内容数据有3.0MB，而其中1.7MB是图片。

根据Tammy Everts的研究表明，将图片添加到网页中或者将现有的图片扩大，已经被证明可以提高网站的用户转化率。图片是不可能消失的，所以花费成本在有效的压缩策略上以最小化这种带宽占用将变得非常重要。

Modern-Image00.jpg 根据Soasta/Google research2016年的统计，图像是第二高的用户转换因子，其中转换率最好的页面中图片占比38%一下。

图片优化包括了可以减少图片文件大小的多种不同方法。它最终取决于您的图片需要什么视觉保真度。

image-optimisation.jpg 图像优化:选择正确的存储格式、有效的压缩，并将关键图片优先于可以延迟加载的其他图片进行加载。

通常的图片优化包括了压缩，并且支持通过<picture>/<img srcset>标签响应式的压缩它们，并且调整图片的尺寸以降低解码消耗。

chart_naedwl.jpg 根据HTTP Archive统计, CDF (累积分布函数)为95%的每个图像可以节省体积达到30KB！

说明我们有足够的空间来统一优化我们的图片。

image-optim.jpg

ImageOptim是一个免费的工具，可以通过现代压缩技术和去除不必要的EXIF元数据的方法减少图像文件体积。

如果你是个设计师，那么还有一个用于Sketch的ImageOptim插件，它在导出资源时会自动优化。你会发现它能最大化的节省你的时间。

可以通过WebPageTest.org网站进行图片检查，它将指导你如何更好的优化图片（注意“Compress Images”的内容，即压缩图片）。

Modern-Image1.jpg

WebPageTest报告中的 "Compress Images" 部分列出了如何更有效地压缩的图像，以及能节省的文件大小。

Modern-Image2.jpg

在Chrome中，Lighthouse工具可以有效的帮助你的网站达到最佳体验。它包括了图像优化的审核，并且对是否可以进一步压缩图片提出建议，或者指出哪些是屏幕外的图片可以被延迟加载。

而对于Chrome60以上的版本，Lighthouse已经默认被嵌入到Chrome DevTools中的Audits面板中。

hbo.jpg

Lighthouse可以审核Web性能、找到最佳实践，并测试渐进式Web应用程序的功能。

你也可以去了解一下其他的性能审核工具，比如PageSpeed Insights或者Cloudinary的Website Speed Test，这些工具都有丰富的图片优化审核功能。

正如Ilya Grigorik在他出色的《图像优化指南》中指出的，所谓的“正确格式”一定是视觉效果和功能需求的统一。你是使用Raster（位图）还是Vector（矢量图）？

rastervvector.png

Raster Graphics（位图）:通过对图像的矩形网格内的每个像素的值进行编码来表示图像。它们在缩放时会失真。WebP格式或者应用更广泛的格式比如JPEG或PNG都可以处理为位图，这种格式被应用于要求真实感的地方。Guetzli，MozJPEG和我们讨论的其他组件都适用于优化位图。

Vector graphics（矢量图）：使用点、线和多边形来表示图像，并被应用于使用简单几何形状表示的图像（例如徽标）。这种格式可以在高分辨率下显示，并且缩放时不会失真。像SVG就是处理矢量图的好选择。

选择了错误的格式可能会浪费你很多的宝贵时间。但选择正确格式的过程可能一波三折，所以消耗一些时间去尝试其他保存格式对于最终选择正确的格式来说也是值得的。

杰里米·瓦格纳（Jeremy Wagner）在描述他的图像优化理论时，已经对图像格式的权衡评估做出了讨论。