一、BMP

1、是什么

无损的(没有对数据进行压缩)、既支持索引色也支持直接色的点阵图

2、缺点

由于是无损图片，所以图片文件一般比较大

3、适用场景

除了在 Windows 操作系统中还比较常见之外，我们几乎看不到它

二、GIF(Graphics Interchange Format)

1、是什么

无损的、采用索引色的点阵图

2、优点

(1) 采用LZW压缩算法进行编码，文件小

(2) 支持动画以及透明

3、缺点

仅支持 8bit 的索引色，图片中，只能存在256种不同的颜色。

4、适用场景

适用于对色彩要求不高同时需要文件体积较小的场景

三、JPEG

1、是什么

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

2、优点

采用直接色，颜色丰富

3、缺点

有损压缩，图片的部分原始信息被去除，降低了图片的质量

4、适用场景

存储照片

四、PNG-8(PNG,Portable Network Graphics)

1、是什么

无损的、使用索引色的点阵图

2、优点

(1) 文件体积小

(2) 支持透明度调节

3、适用场景

适用于需要文件体积较小的场景

五、PNG-24

1、是什么

无损的、使用直接色的点阵图

2、优点

(1) 图片显示效果好

(2) 支持透明度调节

3、缺点

文件体积大

4、适用场景

希望达到更好的图片显示效果，不在乎图片体积

六、SVG(Scalable Vector Graphics)

1、是什么

无损的矢量图

2、优点

(1) 由于是矢量图，所以图片放大时不会失真

(2) 使用 XML 描述图片，可以方便的修改

3、适用场景

企业 Logo、Icon

七、webP

1、是什么

支持有损和无损压缩的、使用直接色的点阵图

2、优点

(1) 文件体积更小

(2) 支持透明度

3、缺点

(1) 支持的厂商少，目前只有 Chrome 浏览器和 Opera 浏览器支持 WebP 格式

其他相关概念

1、有损压缩 vs 无损压缩

(1) 有损压缩

指在压缩文件大小的过程中，损失了一部分图片的信息，降低了图片的质量，并且这种损失是不可逆的

(2) 无损压缩

图片质量无损耗，可以从无损压缩过的图片中恢复出原来的信息

2、索引色 vs 直接色

(1) 索引色

存储数字到图片颜色的映射，只能存有限种颜色，通常是 256 种

(2) 直接色

使用三原色和透明度存储图片，支持的色彩更丰富

3、点阵图 vs 矢量图

(1) 点阵图(位图、像素图)

最小单位是像素，缩放会失真

(2) 矢量图(向量图)

存储元素形状和颜色的算法，缩放不失真