比较JPG、PNG、GIF、BMP图片格式

本文比较JPG、PNG、GIF、BMP四种常见的图片格式的优劣。

图片属性

首先需要了解电子图片的一些基本概念：

分辨率

• 分辨率通常写作 水平像素数×垂直像素数 的格式，比如 1080×720 ，表示图片的长、宽分别是多少个像素点。
• 也可以用 DPI（Dots Per Inch）、PPI（Pixels Per Inch）表示，即每英寸内有多少个像素点。
• 图片的分辨率越高，就能显示更多像素点，即更多内容、更多细节。

位深度

• 位深度指图片中的每个像素点用几个二进制位表示。这些二进制位有多少种取值，就能存储多少种颜色。
• 位深度可以取值为 1、4、8、16、24、32 。例如：
  • 位深度为 1 bit 时，只能存储黑白 2 种颜色。
  • 位深度为 8 bit 时，可以存储 256 种颜色。
  • 位深度为 24 bit 时，可以存储 2563 种颜色。
• 图片的位深度越大，就能显示更多种颜色。

颜色模式

• 黑白图
  • 位深度为 1 bit 。每个像素点的取值为 0~1 。
• 灰度图
  • 位深度为 8 bit 。每个像素点的取值为 0~256 ，对应黑色、白色、中间的 254 种灰色。
  • 只有一个灰度通道。
  • 灰度图转换成黑白图时，通常选择 128 作为阙值，如果一个像素点的灰度值大于等于阙值，则记作 1（即白色），否则计 0（即黑色）。
• 索引颜色
  • 位深度为 8 bit 。
  • 原理：将图中的颜色数减少到 256 种以内，把它们记在一个调色板上，然后记录图中的每个像素点采用编号 0~256 中的哪种颜色。
  • 优点：位深度为 8 bit ，因此图片体积较小。
  • 缺点：最多只能显示 256 种颜色。
• RGB
  • 位深度为 24 bit ，又称为真彩色。
  • 有 RGB 三个通道，每个通道占 8 bit 。
• RBGA
  • 位深度为 32 bit 。
  • 比 RGB 模式多了一个描述透明度的 Alpha 通道。
• CMYK
  • 位深度为 32 bit ，有 CMYK 四个通道。
  • 印刷图片时通常转换成 CMYK 模式，减少印刷前后的色差。
    • 因为 CMYK 印刷品是通过反光来显示的，而 RGB 图片是通过主动发光来显示的，两者存在不可避免的色差。

图片体积

• 指图片占用的磁盘空间。
• 例如一张分辨率为 1080×720 、位深度为 24 bit 的图片，其理论体积为：1080×720×24 bit ≈ 2.2 MB 。实际体积可能偏小，因为通常会采用压缩算法。
• 图片的分辨率越高、位深度越大，显示效果越好，越接近人眼看到的炫彩世界。但是这样图片的体积越大，占用更多磁盘空间。
• 如果一张图片的体积很大，比如 10GB ，即使有足够的磁盘空间容纳它，但可能没有足够的内存空间读取它，导致不能显示。

压缩方式

• 不压缩：不压缩图片的体积，直接保存原图。
• 无损压缩：可以压缩图片的体积，且压缩时没有损失图片的任何质量。
• 有损压缩：可以压缩图片的体积，但压缩时降低了图片的质量。压缩率越高，画质越差。

比较四种图片格式

图片格式	JPG/JPEG	PNG	GIF	BMP
位深度	最高为24 bit	最高为32 bit	最高为8 bit，画质差	最高为32 bit
图片体积	较小	较大	很小	很大
能否压缩	有损压缩，压缩率可以很高（通过舍弃一些不影响人眼观看的细节，来压缩体积）	无损压缩，压缩率低	无损压缩，压缩率高	不压缩
能否透明	不能	能（在RGB通道之外加了一个Alpha通道，用0~256表示透明度）	能（但是不能控制透明度，要么完全透明要么不透明）	不能
总结	适合保存色彩丰富、却要压缩体积的图片	适合保存色彩丰富、又不限制体积的图片、透明图层	适合保存色彩简单、而体积很小的图片。不仅可以存储单张图片，还支持用多帧组成动画	体积很大，不适合在网络传输

• 欢迎纠正

实验分析

1. 在PhotoShop中创建一个1920×1080分辨率的画板，采用RGB模式（每个通道占8位）。清空画板使其透明，只能看到方格背景。
   
2. 将这个图片分别保存为位深度为24 bit的jpg、png、bmp格式，以及位深度为8 bit的gif格式，结果如下。bmp图片由于不压缩，体积很大。

3. 在透明画板上画一道彩虹：
   
4. 再分别保存为四种格式的图片，结果如下。这里是使用默认的压缩率，实际上gif、jpg图片还可用压缩到更小的体积。
   
5. 它们在PhotoShop中的显示效果如下：
   png：彩虹的两侧是透明的。彩虹的边缘从不透明逐渐淡化，直到完全透明。
   
   gif：彩虹的两侧是透明的。但边缘生硬，要么不透明，要么完全透明。这证明了 gif 格式不能控制透明度。
   
   jpg：透明信息被丢失，被纯白色填充。
   
   bmp：跟 jpg 图片看起来一样。既然 bmp 格式占用很大磁盘空间，采用 jpg 格式不是更香？