常用网络图像格式的比较和选择

在前端开发中，你常常会发现某些图像以A格式储存效果较好，而另一些以B格式储存效果较好。（注：这里的“效果”，指对图像文件大小和图像质量的综合考量。）

因为压缩算法的不同，格式的效果会因内容而异。因为这种相关性，我们把图像按其内容特点分为几类，并分析各类图像用哪种格式储存的效果最好。

图像按其内容特点分类如下：

• 文字和图形
• 照片
• 渐变
  • 简单渐变（横向、纵向线性渐变）
  • 复杂渐变

文字和图形

文字和图形的特点是颜色简单，有清晰的边缘。

GIF：2.306K，PNG-8：1.963K，PNG-24：3.715K

放大4倍

GIF、PNG-8、PNG-24 都是无损格式，图像质量一样，所以用同一张图显示。

0品质 JPG：2.345K

放大4倍

60品质 JPG：5.214K

放大4倍

可以看出，GIF、PNG-8、PNG-24 是图像质量最好的，其中 PNG-8 文件最小。即使最低品质的 JPG 也比 PNG-8大，把 JPG 的品质提高到 60，图像质量仍与 PNG-8 有差距，大小却达到了 PNG-8 的2.7倍，由此可见 JPG 格式储存这类图像的局限性。

综合来看，对于文字和图形，无论从图像质量来说还是文件大小来说， PNG-8 都是最佳选择。

照片

照片的特点是颜色丰富且颜色分布无规律。

GIF：28.24K，PNG-8：23.74K

放大4倍

GIF、PNG-8的图像质量一样，所以用同一张图显示。

PNG-24：67.58K

放大4倍

品质60 JPG：12.59K

放大4倍

观察 GIF 和 PNG-8 的放大图，可以看到细节有明显损失，原有的平滑颜色过渡变成生硬的单一颜色。这是因为 GIF 和 PNG-8 都是8位图像格式，只能存储256种颜色，当图像颜色超过256色时，相近的几个颜色会被合并成一个，直到颜色总数不超过256色为止。

PNG-24 是无损真彩色格式，所以 PNG-24 压缩后能保持和原图质量一样，完全不失真，但付出的代价是极低的压缩比，这张 200 × 200 的图像竟有 67.58k，这是在前端开发中无法接受的。

最后是 JPG，放大图可以看出其相较 PNG-24 有轻微的失真，但比 PNG-8 好很多，在原大小下完全看不出和 PNG-24 有区别。而 JPG 的大小不到 PNG-24 的 1/5，所以说 JPG 是存储照片最理想的格式。

PNG-8 是 GIF 的改进格式，它们的图像质量都是一样的，在几乎所有情况下，PNG-8 的压缩率都比 GIF 略胜一筹，PNG-8 完全可以替代 GIF，所以后文将不再比较 GIF 格式。

简单渐变（横向、纵向线性渐变）

PNG-8：1.503K

PNG-24：0.619K

60品质 JPG：1.97K

PNG-8 放大8倍

PNG-24 放大8倍

60 品质 JPG 放大8倍

在原图下看不出 3 种格式有何区别。但是比较放大图，可以看出 PNG-8 有比较明显的带状颜色条，这是由于储存的颜色不足引起的。JPG 相对较好，虽然有些不自然过渡，但是不太明显。质量最好的依然是 PNG-24，但奇怪的是，它的文件大小也比前两个格式小很多。我猜测是 PNG-24 使用的算法特别适合用于这种线性重复的图像。

不论如何，PNG-24在图像质量和文件大小两方面都有优势，是储存横向、纵向渐变的最佳格式。

复杂渐变

这里说的复杂渐变包括非水平垂直的线性渐变、径向渐变、角度渐变等。

PNG-8：3.762K

PNG-24：10.14K

60 品质 JPG：2.701K

PNG-8 放大8倍

PNG-24 放大8倍

60 品质 JPG 放大8倍

这幅图是把上幅图的线性渐变改为径向渐变得来的。

观察放大图，图像质量和简单渐变的一样，PNG-8 在左上角圆心处颜色已经失去过渡，连成一块。PNG-24 图像质量依然是最好的。理论上 JPG 的图像质量会比 PNG-24 差些，但是即使是在8倍放大图上，差异也非常不明显。

从文件大小上看，PNG-24 变化非常大，从之前的 0.619K 上升到 10.14K，而 JPG 变化很小，从 1.97K 上升到 2.701K。

实际上复杂渐变的颜色分布类似于照片，对图像压缩算法来说，都是无规则的，所以 JPG 得以在这类图像上得到最好的效果。

总结

PNG-8，即 8位（256色） PNG 格式。 PNG-8 擅长存储颜色简单、边缘明确的文字和图形，由于 PNG-8 只能储存256种颜色，所以在存储颜色丰富的照片时，会丢失颜色，导致图像失真。

GIF，GIF 和 PNG-8 非常相似，主要区别在 PNG-8 算法比 GIF 好，所以压缩比较高，除了动画，所有可以用 GIF 的场合都应该用 PNG-8 代替。

PNG-24，即 24位 PNG 格式，这是真正的无损压缩格式，不会像8位格式一样丢失颜色，也不会像 JPG 一样模糊边缘，可以完全保持原图质量。只是在多数情况下，这种格式产生的文件比其他格式大很多。在储存简单渐变时，PNG-24 产生的图像质量、大小都非常完美。

JPG，有损压缩格式。储存照片有较好的效果，对有清晰边缘的文字和图形的储存则不尽理想。可以通过降低图像质量来提高压缩比，压缩比较高时，会产生明显的不自然痕迹。

图像	适用格式
文字和图形	PNG-8
照片	JPG
简单渐变	PNG-24
复杂渐变	JPG