理解并合理选择图片文件格式

本文来自《CSS 禅意花园》4.1.2，部分内容有增减和改动。

网页中应用的图片文件格式一般有三种，分别为 GIF、JPEG、PNG。每种图片文件格式都有自己的色彩模型、表示形式、压缩方案以及透明效果支持 dent 特性。只有充分的了解每一种格式的优劣之处，才能根据实际需要作出合理的选择。

无损压缩将保留原图像的所有细节，有损压缩会对细节有所取舍，以换来更小的文件。二者都有其适用的地方。

色深是指某种图像格式包含的颜色的多少。色深用位计量，更高的色彩表示将包含更多的颜色种类。例如 8 位的色深只有 256 种颜色，而 24 位色深则能够包含一千六百万种颜色。

1、GIF

Gif 出现的历史最早，大约在 20 年前就已经初具雏形。Gif 使用一种叫做 LZW 的无所压缩格式，非常适合带有大块相同颜色区域的图像。单色插图、文本、色块等文件非常适合存为此格式。

Gif 需要使用颜色索引来实现无损压缩，但这却是把双刃剑。该格式的色深只允许同一张图像中最多出现 256 种颜色，对于超过范围的若干种颜色只能忍痛割爱。但对于少于 256 种颜色的图像，其颜色索引也会相应的变小，这也就意味着图片文件的整体大小也将随之降低。当然，对于超过 256 种颜色的图像，我们仍可以将其存为 Gif 格式，不过某些颜色信息将丢失，最终变成有损压缩。

Gif 支持 1 位的透明度，即某个像素要么完全透明，要么完全不透明，没有任何中间值。若在图像编辑软件中使用各种范围的透明度，那么在保存为 Gif 的时候将会受到限制并不得不进行妥协。但若是预先知道该图像在网页中所处区域的背景颜色，那么这也不会带来太大问题。此外，Gif 还支持基于帧的简单动画以及隔行加载技术，但这两者都将增加文件大小。

2、JPEG

Jpeg 的 24 位色深让其能够很好的显示照片等色彩、细节丰富的图像。Jpeg 支持有损压缩且可以设置压缩等级，这样我们即可通过合理的压缩等级找到图像颜色和细节与文件大小之间的平衡点。

压缩比很大的 Jpeg 图像将会高度失真，并引发一种叫做非自然痕迹的小块像素缺陷问题。虽然图像中的丰富细节将会淡化非自然痕迹的影响，但在使用 Jpeg 时仍要把握好图像质量和文件大小之间的平衡关系。Jpeg 不支持任何形式的透明度。

3、PNG

PNG 格式在有些方面与 Gif 类似，但它提供了两种色深模式：24 位和 8 位。24 位色深的 PNG 文件通常都很大，但却能保证完全无损。原始图片的所有细节都将被精确的保留。8 位色深的 PNG 文件使用类似 Gif 的颜色索引。但很多时候，同样设置下用 PNG 压缩的图像要比 Gif 更小。

PNG 支持两种模式的透明度设置，1 位和 8 位。前者与 Gif 的行为一样，而后者则能够实现 256 级的透明度。当我们无法预知图像在网页中所处区域的背景颜色时，8 位的透明度模式将非常使用。浏览器支持问题曾经一度让 PNG 的透明度支持大打折扣，目前的主流浏览器都可以很好的支持 PNG 图像的透明度设置。

由于 PNG 同时支持这两种色深模式，所以理论上它可以用于任何图像，但实际上最好还是用 Gif 和 Jpeg。前者用于带有相同颜色区域的图像，后者用于照片等色彩、细节丰富的图像。24 位色深的 PNG 文件虽然能够做到完全无损，但这却是以增大文件大小的代价换来的。