【面试题集 —— No.01】常见图片格式BMP、JPG/JPEG、PNG、GIF、TIFF、SVG的区别

在平时的前端工作中，大家对于各类图片的处理一定很熟悉。但是它们各个格式之间的具体区别你是否清楚呢？亏我之前还自诩做过UI设计，对于这个问题我都不是很清楚，惭愧之余，虚心总结了这一篇博客。

BMP

BMP是英文Bitmap（位图）的简写，它是Windows操作系统中的标准图像文件格式，能够被多种Windows应用程序所支持。BMP位图文件默认的文件扩展名是BMP或者bmp（有时它也会以.DIB或.RLE作扩展名）。它的显著特点是：

• 几乎不压缩，包含的图像信息较丰富，图片品质最好；
• 文件太大，不利于网络传输；

正是因为BMP格式本身不利于网络传输，所以后续才陆续诞生了其他的图片压缩算法，来制定新的图片格式，比如我们常用的JPG/JPEG、PNG、GIF、TIFF、SVG等等。

JPG/JPEG

JPG/JPEG（Joint Photographic Experts Group）是一种面向连续色调静止图像的压缩标准。是目前网络上最流行的图像格式。它的设计目标是在不影响人类可分辨的图片质量的前提下，尽可能的压缩文件大小。典型特点如下：

• 在网络传输中应用广泛；
• 采用有损压缩，压缩比可自定义；

这意味着JPG去掉了一部分图片的原始信息，也即是进行了有损压缩。并且压缩比是可以自定义的：在Photoshop中进行图片导出JPG/JPEG格式时，可自由设置图片的品质，有0~12个等级可选。

图片品质越高（压缩比越低），对应的图片质量越高，图片文件越大，反之亦然。图片品质在9以上时，图片质量也是相当不错的，肉眼很难分辨出来，同时也有效的降低了图片的文件大小。

GIF

GIF（Graphics Interchange Format）是图形转换格式，采用LZW压缩算法进行编码。特点有：

• 支持动图和透明属性；
• 色彩范围较小，只支持256色；

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

TIFF

TIFF（Tag Image File Format）是标签图像文件格式。其图像格式很复杂，但由于它对图像信息的存放灵活多变，可以支持很多色彩系统，在Mac跟Windows系统上均可使用，因此得到了广泛应用。

• 常用的印刷格式，色彩真实；
• 支持保存图层等编辑信息，类似于PSD文件；

PNG

PNG（Portable Network Graphics）是便携式网络图形，PNG是一种无损压缩的位图片形格式，其设计目的是试图替代GIF和TIFF文件格式，同时增加一些GIF文件格式所不具备的特性。典型特点有：

• 采用无损压缩，绝大多数情况下，同样的图片，PNG格式的图片质量要优于JPG，但图片大小也略大于JPG格式；
• 支持透明通道，广泛用于LOGO，Icon的制作；

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

SVG

SVG（Scalable Vector Graphics）是可缩放矢量图形。它是基于XML（Extensible Markup Language），由World Wide Web Consortium（W3C）联盟进行开发的。SVG图片实质为一段代码，由直线和曲线以及绘制它们的方法组成。

• 代码实现；
• 矢量性，放大缩小时，不会失真；
• 文件体积小，可二次编辑；

我们在Iconfont图标库中使用某个Icon时，就支持SVG格式的下载或者直接复制SVG代码的功能。

常见的矢量文件格式还有ai、cdr、eps格式：

• ai —— Adobe公司旗下软件 Adobe Illustrator 生成的可再编辑矢量图片；
• cdr —— Corel公司旗下软件CorelDRAW生成的可再编辑矢量图片，CorelDRAW是目前多数广告公司用的广告产品排版软件；
• eps —— 是Encapsulated PostScript的简写，严格说并不是一种图片格式，它主要用于矢量图像和光栅图像的存储。 可以保存其他一些类型信息，例如多色调曲线、Alpha通道、分色、剪辑路径、挂网信息和色调曲线等，因此EPS格式常用于印刷或打印输出。

继续在上述的Iconfont图标库中，点击 AI下载 按钮后，下载的具体格式就是EPS文件，支持在Adobe Illustrator或者CorelDRAW中二次编辑。