常见图片格式的优缺点

本文介绍和比较几种常见图片文件格式的优缺点，并介绍不同的文件格式对 Web 应用程序性能的影响。

1. 有损 vs 无损

图片文件格式有可能会对图片的文件大小进行不同程度的压缩，图片的压缩分为有损压缩和无损压缩两种。

1.1 有损压缩

指在压缩文件大小的过程中，损失了一部分图片的信息，也降低了图片的质量，并且这种损失是不可逆的，我们不可能从有一个有损压缩过的图片中恢复出原来的图片。常见的有损压缩手段，是按照一定的算法将临近的像素点进行合并。

1.2 无损压缩

指在压缩文件大小的过程中，图片的质量没有任何损耗。任何时候都可以从无损压缩过的图片中恢复出原来的信息。

2. 索引色 vs 直接色

计算机在表示颜色的时候，有两种形式，一种称作索引颜色（Index Color），一种称为直接颜色（Direct Color）。

2.1 索引色

用一个数字来代表（索引）一种颜色，在存储图片的时候，存储一个数字的组合，同时存储数字到图片颜色的映射。这种方式只能存储有限种颜色，通常是 256 种颜色，对应到计算机系统中，使用一个字节的数字来索引一种颜色。

2.2 直接色

使用四个数字来代表一种颜色，这四个数字分别代表这个颜色中红色、绿色、蓝色以及透明度。现在流行的显示设备可以在这四个维度分别支持 256 种变化，所以直接色可以表示 2 的 32 次方种颜色。当然并非所有的直接色都支持这么多种，为压缩占用空间，有可能只表达红、绿、蓝的三个数字，每个数字也可能不支持 256 种变化之多。

3. 点阵图 vs 矢量图

3.1 点阵图

也叫做位图，像素图。构成点阵图的最小单位是像素，位图就是由像素阵列的排列来实现其显示效果的，每个像素有自己的颜色信息，在对位图进行编辑操作的时候，可操作的对象是每个像素，我们可以改变图片的色相、饱和度、明度，从而改变图像的显示效果。点阵图缩放会失真，用最近非常流行的沙画来比喻最恰当不过，当你从远处看的时候，画面细腻多彩，但当你靠的非常近的时候，你就能看到组成画面的每粒沙子以及每个沙粒的颜色。

3.2 矢量图

也叫做向量图。矢量图并不记录画面上每个点的信息，而是记录了元素形状及颜色的算法，当你打开一副矢量图的时候，软件对图形对应的函数进行运算，将运算结果「图形的形状和颜色」显示出来。无论显示画面是大还是小，画面上图像对应的算法是不变的，所以即使对画面进行倍数相当大的缩放，其显示效果仍然相同。

3.3 BMP

BitMap 的缩写，是无损的、既支持索引色也支持直接色的、点阵图。

这是一种比较老的图片格式。BMP 是无损的，但同时这种图片格式几乎没有对数据进行压缩，所以 BMP 格式的图片通常具有较大的文件大小。虽然同时支持索引色和直接色是一个优点，但是太大的文件格式导致它几乎没有用武之地，现在除了 Windows 操作系统中还比较常见以外，我们几乎看不到它。

3.4 GIF

全称 Graphics Interchange Format，采用 LZW 压缩算法进行编码。是无损的、采用索引色、点阵图。

GIF 是无损的，采用 GIF 格式保存图片不会降低图片质量。但得益于数据的压缩，GIF 格式的图片，其文件大小要远小于 BMP 格式的图片。文件小，是 GIF 格式的优点，同时，GIF 还具有支持动画以及透明的优点。但是，GIF 格式仅支持 8bit 的索引色，即在整个图片中，只能存在 256 种不同的颜色。

GIF 格式适用于对色彩要求不高，同时需要文件体积较小的场景，比如企业 Logo、线框类的图等。因其体积小的特点，现在 GIF 被广泛应用在各类网站中。

3.5 JPEG

JPEG 是有损的、采用直接色的、点阵图。

JPEG 图片格式的设计目标，是在不影响人类可分辨的图片质量的前提下，尽可能的压缩文件大小。这意味着 JPEG 去掉了图片一部分图片的原始信息，即进行了有损压缩。JPEG 图片的优点，是采用了直接色，得益于更加丰富的色彩，JPEG 非常适合用来存储照片，用来表达更生动的图像效果，比如颜色渐变。

与 GIF 相比，JPEG 不适合用来存储企业 Logo 等。因为有损压缩会导致图片模糊，而直接色的选用，又会导致图片文件比 GIF 更大。

3.6 PNG-8

PNG 全称 Portable Network Graphics，PNG-8 是 PNG 的索引色版本。PNG-8 是无损的、使用索引色的、点阵图。

PNG 是一种比较新的图片格式，PNG-8 是非常好的 GIF 格式替代者，在可能的情况下，应该尽可能使用 PNG-8 而不是 GIF，因为在相同的图片效果下，PNG-8 具有更小的文件体积。除此之外，PNG-8 还支持透明度的调节，而 GIF 并不支持。现在，除非需要动画的支持，否则我们没有理由使用 GIF 而不使用 PNG-8。当然了，PNG-8 本身也是支持动画的，只是浏览器支持的不好，不像 GIF 那样受到广泛的支持。

可以看到 PNG-8 具有更好的透明度支持。

3.7 PNG-24

PNG-24 是 PNG 的直接色版本。PNG-24 是无损的、使用直接色的、点阵图。

无损的、使用直接色的点阵图，听起来非常像 BMP，是的，从显示效果上来看，PNG-24 跟 BMP 没有不同。PNG-24 的优点在于，它压缩了图片的数据，使得同样效果的图片，PNG-24 格式的文件大小要比 BMP 小得多。当然，PNG-24 的图片还是要比 JPEG、GIF、PNG-8 大得多。

虽然 PNG-24 的一个很大的目标，是替换 JPEG 的使用。但一般而言，PNG-24 的文件大小是 JPEG 的五倍之多，而显示效果则通常只能获得一点点提升。所以，只有在你不在乎图片的文件体积，而想要最好的显示效果时，才应该使用 PNG-24 格式。

另外，PNG-24 和 PNG-8 一样，是支持图片透明度的。

3.8 SVG

全称 Scalable Vector Graphics，是无损的、矢量图。

SVG 跟上面这些图片最大的不同，是 SVG 是矢量图。这意味着 SVG 图片由直线和曲线以及绘制它们的方法组成。当你放大一个 SVG 图片的时候，你看到的还是线和曲线，而不会出现像素点。SVG 图片在放大时，不会失真，所以它非常适合用来绘制企业 Logo、Icon 等。

SVG 是很多矢量图中的一种，它的特点是使用 XML 来描述图片。借助于前几年 XML 技术的流行，SVG 也流行了很多。使用 XML 的优点是，任何时候你都可以把它当做一个文本文件来对待，你可以很方便的修改 SVG 图片，所需要的只是一个文本编辑器。