点拨论坛,菜鸟家园

 找回密码
 立即注册

QQ登录

只需一步,快速开始

教程经验总索引TVMW5/小日本5 索引【视频转换】小日本4/TE4XP 索引【视频转换】TAW4 / TDA3 索引【DVD打包软件】
Nero 索引DVD-Lab 索引【DVD打包软件】编解码器 索引 【必读】固顶帖011号
查看: 6428|回复: 3
收起左侧

Web图像谁领风骚?GIF,JPEG(JPG),还是PNG?

[复制链接]

9299

威望

61万

金钱

1万

贡献

管理员

自由的灵魂

Rank: 9Rank: 9Rank: 9

积分
712177
主题
4911
帖子
30519
注册时间
2003-4-10
最后登录
2020-1-18
发表于 2008-6-18 16:56:15 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
昨天看到一篇精致的小品文,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上仔细研究GIFJPEGPNG吧。

(htmlor注:因为正常的wikipedia中国访问不了,所以文中链接用的都是时灵时不灵的secure版的服务器地址。)
(完)
IsaacZ的发言中如果提到任何字母缩写或专有名词,在本论坛中一般都能搜索到。点此立即搜索点拨论坛。如有搜索不到的,请尝试搜索百度百科,或者跟帖提问。
发帖前请注意看置顶帖。如果你发现自己的问题没有得到回答,说明你的问题提错了地方或者提问前未先阅读本版规则固顶帖011号

5

威望

374

金钱

13

贡献

初级会员

Rank: 2Rank: 2

积分
445
主题
13
帖子
114
注册时间
2009-12-13
最后登录
2018-9-5
发表于 2009-12-31 22:42:05 | 显示全部楼层
好文章,不过还是觉得使用JPG格式吧,最大的原因就是IE支持,和JPEG格式最适用于色彩丰富的图像这两点因素。JPG的压缩率没那么高,但色彩表现丰富,而且就说GIF格式,虽说是无损压缩,但256色以外就无能为力了,就这点而论,相比JPG的有损压缩,损失比JPG格式大的多了哈。PNG格式相比那两格式,虽然说更全面,且集成了JPG和GIF的优点,但支持的比较少,还是不采用了。

9299

威望

61万

金钱

1万

贡献

管理员

自由的灵魂

Rank: 9Rank: 9Rank: 9

积分
712177
主题
4911
帖子
30519
注册时间
2003-4-10
最后登录
2020-1-18
 楼主| 发表于 2009-12-31 23:29:25 | 显示全部楼层
就电脑截图来讲,往往窗体内有大部分区域是同色,而同色区域越大,GIF格式的优势越明显。在GIF格式下,正因为色彩少,所以色彩对比度明显,窗口中的文字更加清楚,没有噪点。
用JPG格式的时候,因为强调色彩的过渡,所以在有文字时,文字周围会有很多噪点或波纹,对截图教程来说是个硬伤。
IsaacZ的发言中如果提到任何字母缩写或专有名词,在本论坛中一般都能搜索到。点此立即搜索点拨论坛。如有搜索不到的,请尝试搜索百度百科,或者跟帖提问。
发帖前请注意看置顶帖。如果你发现自己的问题没有得到回答,说明你的问题提错了地方或者提问前未先阅读本版规则固顶帖011号

51

威望

4879

金钱

227

贡献

管理员

孤魂野草

Rank: 9Rank: 9Rank: 9

积分
6142
主题
167
帖子
2374
注册时间
2011-12-18
最后登录
2020-1-18
QQ
发表于 2015-7-27 21:47:47 | 显示全部楼层
GIF格式的最大不足,就是它对256色之外的颜色无能为力。

这句话不对。GIF可以支持256种颜色,而具体是哪256种,可以自己从32位颜色里面选,而不一定拘泥于256色。Photoshop就可以把照片变成效果可以接受的256种颜色的图像,然后导入GIF制作软件,制作软件就不会再缩减颜色了。通过这种手段,可以把GIF图像丢失的颜色控制在可接受范围内。

评分

参与人数 1贡献 +1 收起 理由
IsaacZ + 1 谢谢分享经验!

查看全部评分

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|小黑屋|Archiver|手机版|点拨网 - 面向新手的教学站

GMT+8, 2020-1-18 23:57 , Processed in 0.177314 second(s), 10 queries , Redis On.

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表