Web图像谁领风骚?GIF,JPEG,还是PNG?
昨天看到一篇精致的小品文,Jonathan Snook的《Which Image Format is Best》(其实2005年就有了),不禁又见猎心喜。与作者联系之后,翻译了过来。全文如下:
哪种图像格式最好?
作者:Jonathan Snook
翻译:htmlor
在网站开发过程中,用什么图像格式你可能不会考虑太多。不过,明智的选择会为你自己(或公司)节省一大笔带宽开支。当今主流的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版的服务器地址。)
(完)
![htmlor [at] gmail.com](http://static.blog.htmlor.com/myimages/htmlor_gmail.gif)

15条评论 »
wei
2006-08-31 16:40
“总的来说,JPEG格式最适用于色彩丰富的图像。(因为)把含有渐变色彩的图像或者照片压缩成低质量,损失并不显眼(却能大幅减少字节数)。而包含文字或者有大块实心背景色的图像的压缩,更适合交给GIF和PNG格式去做。”——这句话应该拿来作为总结
htmlor
2006-08-31 16:50
呵呵,不知道谁说的,“忠实的女人不漂亮,漂亮的女人不忠实”。
读网 060831 - 大树园™ v2.0
2006-08-31 16:50
[…] web图像谁领风骚?GIF,JPEG,还是PNG?——htmlor’s blog——20060831 […]
linux-fans.com
2006-09-01 13:04
我喜欢 Gif 图片. 小巧又支持动画哦 :D
hhalloyy
2006-09-02 03:42
长知识了,原来在ie对png支持不好,以后还是全用jpg存了
gigi
2006-09-24 03:02
以前好像看过JPG的动画形式,很惊讶,不知道怎么实现的….
htmlor
2006-09-24 15:07
gigi
JPG本身不可能有动画形式,有可能是脚本合成的。
Coolnalu
2006-09-27 04:01
SVG 也在走上舞台.
简单的用法:16位色彩的图片用JPG, 256色的用gif.要半透明的用PNG, 虽然IE支持不好, 但是有方法hack一下.
枯の灵
2006-11-26 07:54
……
PNG是24位色啊……
看来还是要换一个格式……
yskin
2006-11-28 13:39
JPEG是有损的,PNG是无损的。如果不用透明,PNG在IE6上的显示不会有问题。为啥还要用JPEG格式?
liumingtao
2007-07-13 23:33
因为PNG压缩率没有JPEG高呀
abc
2007-08-18 23:37
png可唔可以用来做动画嘎?
htmlor
2007-08-19 12:51
yskin
对于颜色丰富的图片(比如照片),用png是比较尴尬的。在几乎同等质量的前提下,png文件体积会比jpg大出不少。
abc
png是做不了动画的。
小心
2007-12-21 15:15
我超级爱用.png格式的
macrochen
2008-06-20 17:28
如果论图片大小的话,*.jpg决定比*.gif要小的多.
评论feed