htmlor’s blog

昨天看到一篇精致的小品文，Jonathan Snook的《Which Image Format is Best》（其实2005年就有了），不禁又见猎心喜。与作者联系之后，翻译了过来。全文如下：

哪种图像格式最好？

作者：Jonathan Snook

在网站开发过程中，用什么图像格式你可能不会考虑太多。不过，明智的选择会为你自己（或公司）节省一大笔带宽开支。当今主流的web图像压缩格式有3种：GIF、JPEG和PNG。它们采用不同的图像信息压缩技术，各有利弊。

GIF

（htmlor注：Graphics Interchange Format，图形交换格式。）

GIF是无损压缩，即在压缩过程中图像没有质量损失。未压缩的图像信息以线性方式存储。（下载时）每行象素从左到右依次读取。交错式GIF图像（htmlor注：fireworks导出GIF时有交错式图像可选）用不同的顺序存储图像行。（下载时）先读取第4、8、12、16、20行，然后是第2、6、10、14、18行，…… 以此类推，直到读取完整个图像。以这种方式下载时，网速较慢的用户能把过程看得清清楚楚。（htmlor注：查看这个页面可以看到上述下载效果。）

GIF的压缩方式是把文件中重复的色块消除，然后把（这些色块的）位置信息存在一个表里（也叫hash表）。（因此）图像中相同色块越多，压缩率就越高。如背景图、包含文字的图像和被图样填充的图像等。

GIF的一大显著优势就是能制作动画图像。你肯定在网上见过铺天盖地的GIF动画（尤其是90年代的全盛时期）。根本上讲，一个GIF动画就是一串含有时间信息的GIF静态图像。不过GIF动画有个问题：即便帧数不多，字节数也会变得很大。（举例来说）如果1帧GIF有15kb，那么20帧将超过100kb（对于web图像显然是太大了）。在这个GIF大行其道的时代，如果要做动画，还是用flash好些。

GIF的另一优势是透明度。你可以选择颜色表里的某一种颜色作为透明色。这样的话，原本这种颜色出现的地方（会变得透明）可以看到下层的HTML背景。

（有利自然有弊）GIF格式的最大不足，就是它对256色之外的颜色无能为力。如果一幅含有成千上万种色彩的照片用GIF格式压缩，将会变得惨不忍睹。

JPEG

（htmlor注：Joint Photographic Experts Group，联合图像专家小组。文件扩展名通常简化为JPG。）

JPEG是有损压缩，即在压缩过程中图像质量会有损失。其压缩过程首先把图像从RGB转换为YUV，用亮度、色调和饱和度储存每个象素的信息。然后减少色调和饱和度的信息数量，这种差别不容易被肉眼察觉到。在图像字节数递减时（比如在photoshop里移动质量控制滑块），你会看到在色块上产生模糊的斑点，尤其是边缘附近。总的来说，JPEG格式最适用于色彩丰富的图像。（因为）把含有渐变色彩的图像或者照片压缩成低质量，损失并不显眼（却能大幅减少字节数）。而包含文字或者有大块实心背景色的图像的压缩，更适合交给GIF和PNG格式去做。

PNG

（htmlor注：Portable Network Graphics，便携式网络图形。）

PNG在现有的多种图像格式中算是晚辈，却来势汹汹，大有后来居上之势。它在某些方面与GIF类似，却在其他方面更胜一筹。与GIF同为无损压缩，PNG还支持24位色（GIF只支持8位色），同时支持alpha透明（GIF只支持单色透明）。PNG使用多种压缩过滤器减小图像字节数，它能针对每行使用不同的过滤器从而实现高压缩率。alpha透明是PNG最令人心动的一大特点。不过可惜，ie现在还不能完全支持（尽管通过一些小手段可以实现）。

如果你不需要alpha透明或者256色已经够用，可以使用8位色PNG。平均来说，在同等图像质量的条件下，8位色PNG的字节数要比GIF小。在处理相同色块很多的图像时，PNG和GIF非常相似，都能出色的完成任务。如果你还想储存比256色更丰富的色彩，就用24位色PNG吧。只是别忘了测试一下24位色PNG和JPEG哪个实际效果更好。

（人家的优点它都有，缺点自然也少不了）PNG的缺点跟GIF相同：对于照片的优化，不如JPEG好。

谁是老大？

没有哪种图像格式独领风骚、老少咸宜。所以，该用哪个用哪个、该怎么压缩怎么压缩，不拘泥于一种格式，就是最好的方案。

如果你有兴趣进一步了解这些图像格式的历史和更深层的技术，就到wikipedia上仔细研究GIF、JPEG和PNG吧。

（htmlor注：因为正常的wikipedia中国访问不了，所以文中链接用的都是时灵时不灵的secure版的服务器地址。）

（完）