1. 前言
1.1 有损vs无损
图片文件格式有可能会对图片的文件大小进行不同程度的压缩，图片的压缩分为有损压缩和无损压缩两种。
- 有损压缩。指在压缩文件大小的过程中，损失了一部分图片的信息，也即降低了图片的质量，并且这种损失是不可逆的，我们不可能从有一个有损压缩过的图片中恢复出全来的图片。常见的有损压缩手段，是按照一定的算法将临近的像素点进行合并。
- 无损压缩。只在压缩文件大小的过程中，图片的质量没有任何损耗。我们任何时候都可以从无损压缩过的图片中恢复出原来的信息。
1.2 索引色vs直接色
计算机在表示颜色的时候，有两种形式，一种称作索引颜色(Index Color)，一种称作直接颜色(Direct Color)。
- 索引色。用一个数字来代表（索引）一种颜色，在存储图片的时候，存储一个数字的组合，同时存储数字到图片颜色的映射。这种方式只能存储有限种颜色，通常是256种颜色，对应到计算机系统中，使用一个字节的数字来索引一种颜色。
- 直接色。使用四个数字来代表一种颜色，这四个数字分别代表这个颜色中红色、绿色、蓝色以及透明度。现在流行的显示设备可以在这四个维度分别支持256种变化，所以直接色可以表示2的32次方种颜色。当然并非所有的直接色都支持这么多种，为压缩空间使用，有可能只有表达红、绿、蓝的三个数字，每个数字也可能不支持256种变化之多。
1.3 点阵图vs矢量图
点阵图，也叫做位图，像素图。
构成点阵图的最小单位是象素，位图就是由象素阵列的排列来实现其显示效果的，每个象素有自己的颜色信息，在对位图图像进行编辑操作的时候，可操作的对象是每个象素，我们可以改变图像的色相、饱和度、明度，从而改变图像的显示效果。点阵图缩放会失真，用最近非常流行的沙画来比喻最恰当不过，当你从远处看的时候，画面细腻多彩，但是当你靠的非常近的时候，你就能看到组成画面的每粒沙子以及每个沙粒的颜色。
矢量图，也叫做向量图。
矢量图并不纪录画面上每一点的信息，而是纪录了元素形状及颜色的算法，当你打开一付矢量图的时候，软件对图形象对应的函数进行运算，将运算结果[图形的形状和颜色]显示给你看。无论显示画面是大还是小，画面上的对象对应的算法是不变的，所以，即使对画面进行倍数相当大的缩放，其显示效果仍然相同(不失真)。
2. BMP(古老)
BMP取自位图Bitmap的缩写，是无损的、既支持索引色也支持直接色的、点阵图。
2.1 特点
BMP文件通常是不压缩的，所以它们通常比同一幅图像的压缩图像文件格式要大很多。例如，一个800×600的24位几乎占据1.4MB空间。因此它们通常不适合在因特网或者其他低速或者有容量限制的介质上进行传输。
现在除了在Windows操作系统中还比较常见之外，我们几乎看不到它。在同样的图片质量下，BMP格式的图片文件大小是GIF格式的很多倍。
3. GIF（1987年)
图像互换格式（英语：Graphics Interchange Format，简称GIF），是无损的、采用索引色的、点阵图。
3.1 特点
GIF格式自1987年由CompuServe公司引入后，因其体积小而成像相对清晰，特别适合于初期慢速的互联网。
GIF是无损的，采用GIF格式保存图片不会降低图片质量。同时，GIF格式还具有支持动画以及透明的优点。但，GIF格式仅支持8bit的索引色，即在整个图片中，只能存在256种不同的颜色。
GIF格式适用于对色彩要求不高同时需要文件体积较小的场景，比如企业Logo、线框类的图等。因其体积小的特点，现在GIF被广泛的应用在各类网站中。
4. JPG（1992年）
联合图像专家小组（英语：Joint Photographic Experts Group，缩写：JPEG），JPEG是有损的、采用直接色的、点阵图。
4.1 特点
JPEG是一种针对照片影像而广泛使用的有损压缩标准方法。此团队创立于1986年，1992年发布了JPEG的标准而在1994年获得了ISO 10918-1的认定。
使用JPEG格式压缩的图片文件一般也被称为JPEG Files，最普遍被使用的扩展名格式为.jpg，其他常用的扩展名还包括.JPEG、.jpe、.jfif以及.jif。
JPEG的图片的优点，是采用了直接色，得益于更丰富的色彩，jpg可使用的颜色有1600w之多（2^24），而人眼识别的颜色数量大约只有1w多种，因此jpg非常适合色彩丰富图片、渐变色。jpg有损压缩移除肉眼无法识别的图片细节后，可以将图片的尺寸大幅度地减小。
与GIF相比，JPEG不适合用来存储企业Logo、线框类的图。因为有损压缩会导致图片模糊，而直接色的选用，又会导致图片文件较GIF更大。
4.2 jpg vs jpeg
两者之间除了字符数没有区别。
全名、正式扩展名是JPEG。但因DOS、Windows 95等早期系统采用的8.3命名规则只支持最长3字符的扩展名，为了兼容采用了.jpg。也因历史习惯和兼容性考虑，.jpg目前更流行。
5. PNG（1997年）
便携式网络图形（英语：Portable Network Graphics，PNG）
5.1 特点
PNG于1997年3月作为知识性RFC 2083发布，于2004年作为ISO/IEC标准发布。
PNG是一种支持无损压缩的位图图形格式，支持索引、灰度、RGB三种颜色方案以及Alpha通道等特性。PNG的开发目标是改善并取代GIF作为适合网络传输的格式而不需专利许可，所以被广泛应用于互联网及其他方面上。
5.2 PNG-8
PNG-8是PNG的索引色版本。PNG-8是无损的、使用索引色的、点阵图。
PNG是一种比较新的图片格式，PNG-8是非常好的GIF格式替代者，在可能的情况下，应该尽可能的使用PNG-8而不是GIF，因为在相同的图片效果下，PNG-8具有更小的文件体积。除此之外，PNG-8还支持透明度的调节，而GIF并不支持。
现在，除非需要动画的支持，否则我们没有理由使用GIF而不是PNG-8。当然了，PNG-8本身也是支持动画的，只是浏览器支持得不好，不像GIF那样受到广泛的支持。
5.3 PNG-24
PNG-24是PNG的直接色版本。PNG-24是无损的、使用直接色的、点阵图。
无损的、使用直接色的点阵图，听起来非常像BMP，是的，从显示效果上来看，PNG-24跟BMP没有不同。PNG-24的优点在于，它压缩了图片的数据，使得同样效果的图片，PNG-24格式的文件大小要比BMP小得多。当然，PNG24的图片还是要比JPEG、GIF、PNG-8大得多。
虽然PNG-24的一个很大的目标，是替换JPEG的使用。但一般而言，PNG-24的文件大小是JPEG的五倍之多，而显示效果则通常只能获得一点点提升。所以，只有在你不在乎图片的文件体积，而想要最好的显示效果时，才应该使用PNG-24格式。
另外，PNG-24跟PNG-8一样，是支持图片透明度的。
6. WebP(2010年)
WebP是谷歌开发的一种新图片格式，WebP是同时支持有损和无损压缩的、使用直接色的、点阵图。
6.1 特点
WebP最初在2010年发布，目标是减少文件大小，但达到和JPEG格式相同的图片质量，希望能够减少图片档在网络上的发送时间。
- 在无损压缩的情况下，相同质量的WebP图片，文件大小要比PNG小26%；
- 在有损压缩的情况下，具有相同图片精度的WebP图片，文件大小要比JPEG小25%~34%；
- WebP图片格式支持图片透明度，一个无损压缩的WebP图片，如果要支持透明度只需要22%的格外文件大小。
目前webp的还没有得到全面的支持。
7. 对比
| 格式 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
| gif | 文件小，支持动画、透明，无兼容性问题 | 只支持256种颜色 | 色彩简单的logo、icon、动图 |
| jpg | 色彩丰富，文件小 | 有损压缩，反复保存图片质量下降明显 | 色彩丰富的图片/渐变图像 |
| png | 无损压缩，支持透明，简单图片尺寸小 | 不支持动画，色彩丰富的图片尺寸大 | logo/icon/透明图 |
| webp | 文件小，支持有损和无损压缩，支持动画、透明 | 浏览器兼容性不好 | 支持webp格式的app和webview |
7.1 选择
- JPG：将其用于复杂图像，相册或图库以及不透明图像。
- PNG：最适合用于定义线条的图像，需要透明度的照片以及需要最高质量的照片。
