一张图片可以储存为多种格式，为什么有的几十 KB，有的几百 MB，有的静止不动，有的是好几个画面循环播放？在项目开发的过程中经常会读取或保存图像文件，不同类型的图像特点不同，适用的范围也不同，简要介绍 BMP、GIF、TIFF、PNG、JPG 和 SVG 格式图像的特点。

1、BMP 格式图像

BMP 是英文 Bitmap（位图）的简写，它是 Windows 操作系统中的标准图像文件格式，能够被多种 Windows 应用程序所支持。随着 Windows 操作系统的流行与丰富的 Windows 应用程序的开发，BMP 位图格式理所当然地被广泛应用。这种格式的特点是包含的图像信息较丰富，几乎不进行压缩，但由此导致了它与生俱生来的缺点是占用磁盘空间过大。所以，目前 BMP 在单机上比较流行。

BMP(Bitmap-File）图形文件是 Windows 采用的图形文件格式，在 Windows 环境下运行的所有图象处理软件都支持 BMP 图象文件格式。Windows 系统内部各图像绘制操作都是以 BMP 为基础的。BMP 位图文件默认的文件拓展名是 BMP 或者 bmp（有时它也会以.DIB 或.RLE 作扩展名）

虽然同时支持索引色和直接色是一个优点，但是太大的文件格式格式导致它几乎没有用武之地，现在除了在 Windows 操作系统中还比较常见之外，我们几乎看不到它。在同样的图片质量下，BMP 格式的图片文件大小是 GIF 格式的很多倍。

2、GIF 格式图像

GIF 是 Graphics Interchange Format 的简写，它是图形转换格式，采用 LZW 压缩算法进行编码，用于以超文本标志语言（Hypertext Markup Language）方式显示索引彩色图像，在因特网和其他在线服务系统上得到广泛应用。GIF 是一种公用的图像文件格式标准，版权归 Compu Serve 公司所有。

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

GIF 可以被 PC 和 Mactiontosh 等多种平台上被支持，适用于对色彩要求不高同时需要文件体积较小的场景，比如企业 Logo、线框类的图等。很多人以为 GIF 指的就是动图，其实 GIF 不仅有动画 GIF，还有静态 GIF，因其体积小的特点，现在 GIF 被广泛的应用在各类网站中。

3、TIFF 格式图像

TIFF 是 Tag Image File Format 的简写，它是标签图像文件格式，TIFF（Tag Image File Format）图像文件是图形图像处理中常用的格式之一，其图像格式很复杂，但由于它对图像信息的存放灵活多变，可以支持很多色彩系统，而且独立于操作系统，因此得到了广泛应用（拓展性支持 Mac 跟 Windows 系统交叉使用）。在各种地理信息系统、摄影测量与遥感等应用中，要求图像具有地理编码信息，例如图像所在的坐标系、比例尺、图像上点的坐标、经纬度、长度单位及角度单位等。

4、PNG 格式图像

PNG 是 Portable Network Graphics 的简写，它是便携式网络图形，PNG 是一种无损压缩的位图片形格式，其设计目的是试图替代 GIF 和 TIFF 文件格式，同时增加一些 GIF 文件格式所不具备的特性。PNG 压缩比高，生成文件体积小，PNG 结合了 GIF 和 TIFF 优点，能够支持压缩不失真、透明背景、渐变图像的制作要求，现在广泛应用于 PS 软件以及互联网之中。

PNG 格式有 8 位、24 位、32 位三种形式，其中 8 位 PNG 支持两种不同的透明形式（索引透明和 alpha 透明），24 位 PNG 不支持透明，32 位 PNG 在 24 位基础上增加了 8 位透明通道，因此可展现 256 级透明程度。

5、JPG 格式图像

JPG 是 JPEG（Joint Photographic Experts Group）的简写，它是一种比较常见的图画格式。它的特点是压缩比高，生成文件体积小。

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

不过它的缺点也很明显，编辑和重新保存 JPG 文件时，JPG 会混合原始图片数据的质量下降，而且这种下降是累积性的。打个比方，你在微信里面收到被转发很多次的 JPG 图片会发现图片比原图模糊许多，且泛绿色。

6、SVG 格式图像

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

SVG 作为 W3C 所推荐的基于 XML 的开放标准，能够与其他网络技术进行无缝集成，特点是使用 XML 来描述图片。借助于前几年 XML 技术的流行，SVG 也流行了很多。使用 XML 的优点是，任何时候你都可以把它当做一个文本文件来对待，也就是说，你可以非常方便的修改 SVG 图片，你所需要的只需要一个文本编辑器。

7、总结

每种类型图像都有不同的指标特点，总结如下：

7.1、有损 vs 无损

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

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

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

7.2、索引色 vs 直接色

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

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

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

7.3、点阵图 vs 矢量图

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

• 矢量图，也叫做向量图。矢量图并不纪录画面上每一点的信息，而是纪录了元素形状及颜色的算法，当你打开一付矢量图的时候，软件对图形象对应的函数进行运算，将运算结果[图形的形状和颜色]显示给你看。无论显示画面是大还是小，画面上的对象对应的算法是不变的，所以，即使对画面进行倍数相当大的缩放，其显示效果仍然相同(不失真)。

7.4、总结

图片的压缩方式有无损压缩和有损压缩两种。前者压缩后比后者要大。

1、图片的颜色表示有直接颜色和索引颜色两种。前者比后者更丰富，体积更大。

2、BMP 采用无损压缩和直接色，所以体积最大。太大的文件格式格式导致它几乎没有用武之地。

3、GIF 采用无损和索引色的，适用于对色彩要求不高同时需要文件体积较小的场景，比如企业 Logo、线框类的图等。支持动画和透明。

4、JPEG（JPG）采用有损压缩和直接色，不适合用来存储企业 Logo、线框类的图。因为有损压缩会导致图片模糊，而直接色的选用，又会导致图片文件较 GIF 更大。而适合作为摄影类的图片。.

所以小图片尽量使用 png、要想支持动画则使用 gif、大型图片使用 jpg。