IsaacZ 发表于 2008-6-18 16:56:15

Web图像谁领风骚?GIF,JPEG(JPG),还是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(JPG)

(htmlor注:Joint Photographic Experts Group,联合图像专家小组。文件扩展名通常简化为JPG。)

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




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版的服务器地址。)
(完)

窗外的雨 发表于 2009-12-31 22:42:05

好文章,不过还是觉得使用JPG格式吧,最大的原因就是IE支持,和JPEG格式最适用于色彩丰富的图像这两点因素。JPG的压缩率没那么高,但色彩表现丰富,而且就说GIF格式,虽说是无损压缩,但256色以外就无能为力了,就这点而论,相比JPG的有损压缩,损失比JPG格式大的多了哈。PNG格式相比那两格式,虽然说更全面,且集成了JPG和GIF的优点,但支持的比较少,还是不采用了。

IsaacZ 发表于 2009-12-31 23:29:25

就电脑截图来讲,往往窗体内有大部分区域是同色,而同色区域越大,GIF格式的优势越明显。在GIF格式下,正因为色彩少,所以色彩对比度明显,窗口中的文字更加清楚,没有噪点。
用JPG格式的时候,因为强调色彩的过渡,所以在有文字时,文字周围会有很多噪点或波纹,对截图教程来说是个硬伤。

伤心的笔 发表于 2015-7-27 21:47:47

GIF格式的最大不足,就是它对256色之外的颜色无能为力。
这句话不对。GIF可以支持256种颜色,而具体是哪256种,可以自己从32位颜色里面选,而不一定拘泥于256色。Photoshop就可以把照片变成效果可以接受的256种颜色的图像,然后导入GIF制作软件,制作软件就不会再缩减颜色了。通过这种手段,可以把GIF图像丢失的颜色控制在可接受范围内。
页: [1]
查看完整版本: Web图像谁领风骚?GIF,JPEG(JPG),还是PNG?