图像优化原理

原文地址：github.com/berwin/Blog…

咱们都喜欢有图片的网页，图片很美好，颇有趣，同时它涵盖了丰富的信息。因此，在加载网页时，大部分流量被图像资源所占据（平均60%，数据可能不许确）。

图像资源不仅占用网络资源，它也会占用网页中大量的视觉空间。因此图像渲染的速度会直接影响用户体验。图像优化其实就是最大限度地减小图像的字节数，从而最大化地缩减网络资源占用，使浏览器下载速度变的更快。下载速度越快，在屏幕上渲染的时间就越早，因此视觉上就会有一个更好的体验。

固然，优化图像最佳的方式就是不用图像，例如使用CSS效果（渐变，阴影，圆角等）代替图像。使用CSS比同等视觉效果的图像资源的字节数要小很是多，这是毋庸置疑的。另外一个好处是CSS不受分辨率影响，使用CSS渲染出的视觉效果能够在任何分辨率和缩放级别下始终清晰地显示。

但必须使用图像资源时，对图像进行合理的优化将对性能有着相当重要的影响。

本文不会介绍如何进行图像优化，有大量在线工具和开源项目供咱们使用，使用起来很是的简单。本文将重点介绍图像优化的原理。

首先，本文会介绍两种图像资源：矢量图与栅格图（位图），并分别介绍优化它们的原理。随后介绍无损压缩与有损压缩以及它们的区别。在本文的最后，咱们会介绍什么是高分辨率屏幕。

但愿经过本篇文章的介绍，可让您对图像优化的原理有一个直观的感觉。

1. 矢量图与栅格图（位图）

矢量图与栅格图（位图）是两种不一样的图像格式。

图1-1 矢量图与栅格图

• 矢量图形是计算机图形学中用点、直线或者多边形等基于数学方程的几何图元表示图像。
• 栅格图（英语：Raster graphics），又称位图（Bitmap）或点阵图，是使用像素阵列(Pixel-array/Dot-matrix点阵)来表示的图像。

以矢量图为例，程序绘制一个半径为r的圆所需的主要信息是：

1. 半径r
2. 圆心坐标
3. 轮廓样式与颜色（多是透明）
4. 填充样式与颜色（多是透明）

矢量图的内容是这些绘制相关的关键信息，一样的图像若是是栅格图（位图），则图像是由称做像素的单个点组成的。

栅格图的每一个像素都分配有特定的位置和颜色值。每一个像素的颜色信息由RGB组合或者灰度值表示。

根据位深度，可将栅格图分为一、四、八、1六、24及32位图像等。每一个像素使用的信息位数越多，可用的颜色就越多，颜色表现就越逼真。固然，相应的数据量就越大，图像所占字节数也就越大。

那什么是位深度呢？位深度也叫作色彩深度或者色彩位数，即栅格图中要用多少个二进制位来表示每一个点的颜色，色彩深度越高，每一个像素点可用的颜色就越多。色彩深度是用“n位颜色”（n-bit colour）来讲明的。若色彩深度是n位，即有2^n种颜色选择，而储存每像素所用的位数就是n。例如，位深度为 1 的像素栅格图只有两个可能的值（黑色和白色），因此又称为二值栅格图。位深度为 8 的图像有 2^8（即 256）个可能的值。

因此矢量图对比栅格图的优势主要在如下几点：

• 保存最少的信息，文件字节数比栅格图小，且文件大小与物体的大小无关
• 任意放大矢量图形，不会丢失细节或影响清晰度，由于矢量图形是与分辨率无关的
• 在放大的时候，直线与曲线都不会成比例地变粗，它只会保持不变或者要小于缩放比例
• 保存的物体参数能够在后面修改。也就是说物体的运动、缩放、旋转、填充等都不会下降绘制的精度。

但每一种格式都有优缺点，矢量图适用于简单的几何图像，若是是场景复杂的照片，矢量格式就不能知足要求了，由于描述全部形状所需的 SVG 标记量可能高得离谱。即使如此，输出效果可能仍然没法达到“照片级真实感”，因此这种状况使用栅格图显然更合适。

由于栅格图是由不少个像素点组成的，因此当咱们放大栅格图时，咱们会看到图形会出现锯齿而且模糊不清（由于像素点被放大了），因此咱们在使用栅格图时，须要根据不一样的屏幕分辨率来保存多个版本的栅格图图像，这样能够提供最佳的用户体验。

如今咱们已经了解了什么是矢量图与栅格图，接下来咱们将介绍如何优化它们。

2. 优化矢量图

SVG你们应该都不陌生，它是一种可缩放矢量图形。前不久我在写 《嗨，送你一张Web性能优化地图》 这篇文章时，@安佳 姐姐帮我画了一张SVG图。

图2-1 SVG示例图

图2-1您能够经过点击连接在浏览器打开它，而后查看网页源代码，在源码中能够看到它涵盖了大量的元数据，例如图层信息、注解和 XML 命名空间等，而浏览器渲染时一般不须要这些数据。

咱们能够经过svgo之类的工具将 SVG 文件缩小。

上面这张图片，我使用svgo优化完以后，文件大小缩减了69.3%！原图16.315 KiB优化后文件大小5.009 KiB。您能够点击连接在浏览器打开优化后的SVG矢量图，并查看网页源代码，对比它们之间的区别，您能够看到源代码明显少了不少，但并不影响浏览器正常渲染。

图2-2 SVG矢量图源码优化先后对比

3. 优化栅格图

经过第一小节的介绍，咱们大体能够想象出，其实栅格图是二维“像素”栅格。例如一个10*10像素的图像是 100 个像素序列，而每一个像素中又存储了RGBA值（R红色通道、G绿色通道、B蓝色通道、A alpha透明度通道）。

在内部，浏览器会为每一个通道分配 256 个值（色阶），就是说每一个通道 8 位（由于2^8=256），那么一个像素有四个通道（RGBA），因此每一个像素一共 32 位（4 个通道 * 8 位 = 32 位），32 位 = 4 字节，也就是说每一个像素 4 占个字节。因此，只要咱们知道栅格图尺寸，咱们就能够轻易地计算出图像文件的大小。

尺寸	像素	文件大小
100 * 100	10,000	39 KB
200 * 200	40,000	156 KB
300 * 300	90,000	351 KB
500 * 500	250,000	977 KB
800 * 800	640,000	2500 KB

从上表能够看到，随着图片尺寸的变大，文件大小会以惊人的速度暴增。

再基于此特征的前提下，咱们应该怎样改善栅格图的文件大小以得到更快的加载速度呢？

在第一小节中，咱们简单介绍了”色彩深度“，因此一个简单的策略是咱们能够经过调整图像的色彩深度来下降图像文件的大小。每一个通道 8 位为每一个通道提供 256 个值，RGB三个通道一共能够为每一个像素提供 16777216 种颜色（256^3=16777216）。若是咱们将色彩深度调整为 RGB 通道一共只须要 8 位，那么加上 Alpha 透明度通道的 8 位，一共为 16 位，也就是说每一个像素两个字节（16位 = 2个字节），与原来每一个像素 4 个字节相比，节约了 50% 的字节！

可是你必定会有疑问，颜色值少了那么多，图像的质量会不会变得不好？咱们能够用一张图来对比一下。

图3-1 不一样色彩深度的图片进行对比

这张图是上个月（2018-10）我去参加W3C TPAC会议时在法国让彭星小哥哥帮我拍摄的。这张图包含渐变色过渡的复杂场景（天空），能够看到，调整了色彩深度后，从肉眼上看到的视觉差别并不明显。

在优化了各个像素中存储的数据以后，咱们还能够更进一步。事实上，许多图像的相邻像素都具备类似的颜色，压缩程序能够利用这个特征采用“增量编码”的方式对图像进行压缩。在这种编码方式下，并不为每一个像素单独存储值，而是存储相邻像素之间的差别，若是相邻像素相同，则增量为“零”，只需存储一位便可。经过存储数据之间的差别，而不是存储数据自己，这样的方式能够大幅减小数据的重复，从而下降文件大小。

固然，图像压缩领域的解决方案还远不止这些，由于图像占据了网络世界中大量的字节，因此好的图像压缩方法具备极大的价值，这一领域学术性很强，咱们也没有能力去发明新的算法，但了解这一领域的基本概念仍是能够的，例如本文介绍的 RGBA 像素、色彩深度和各类优化方法。

4. 无损压缩与有损压缩

无损数据压缩（Lossless Compression）指数据通过压缩后，信息不受损失，还能彻底恢复到压缩前的原样。

那么无损压缩是如何作到保存完整的原始信息的同时下降文件大小的呢？

举个例子：一张图是由100个红点构成，那么正常状况下它会以相似“红点、红点、...（重复97次）...、红点”的格式来存储它（栅格图的存储格式咱们在本文的第三小节中介绍过）。为了下降文件大小，咱们能够改为用“100个红点”这样的格式来存储这张图片，这样就能够在不失去任何信息的状况下完成压缩，这就是无损压缩。

但若是想保存文件的全部信息，那么不管使用任何压缩方法，文件大小都没法低于一个下界。举个例子：压缩后获得的zip文件会比源文件更小，但一直重复压缩同一个文件并不会让文件大小变成0，由于源文件终究含有必定的数据量。

这个时候，使用有损压缩能够突破这个限制。

由于人的肉眼很难观察到一张高分辨率图像里面的一些细节，因此舍弃这些人类没法察觉的细节，就能够用更小的数据量提供与原始数据相差无几的感官体验（固然也能够更进一步，例如：经过失去一部分能够察觉的细节，来达到更好的压缩率），这就是有损压缩。有损数据压缩又称破坏性资料压缩、不可逆压缩。有损数据压缩是将次要的信息数据舍弃，牺牲一些质量来减小数据量，提升压缩比。

有损压缩的一个优势是在有些状况下，它可以得到比任何已知无损压缩小得多的文件大小，同时又能知足系统的须要。

总结

本文重点介绍了什么是矢量图与栅格图（位图），以及各类图片优化工具是如何优化它们的。

最后，咱们还讨论了什么是有损压缩与无损压缩，以及它们之间的区别。