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

本文来自《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文件虽然能够做到完全无损，但这却是以增大文件大小的代价换来的。