存档八月, 2006

web图像谁领风骚?GIF,JPEG,还是PNG?

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

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

(完)

评论(8)

flickr添加geotag和map功能

重大升级!flickr添加令人兴奋的照片geotag功能!(详情

功能主要体现在几个方面:

  • 能为照片添加地理信息(geotag)。通过在orgnaizr里把照片拖放到地图上某地实现,非常方便。
  • flickr map上能够浏览到所有公开用户的照片分布信息,相当直观。
  • 能根据地理信息搜索照片。
  • 在一个group用户set或者照片页面的url后加上/map,就能看到其在map上的信息。
  • 可以导入地理标注过的照片。

wikipedia上对geotag的定义

GeoTagging,有时也称为Geocoding,是一种把地理标识元数据添加在媒体(如网站、rss feed、图片等)之上的过程。这些元数据通常包括经度和纬度座标,有时也会加上海拔和地名。

评论(1)

flickr推荐用户使用greasemonkey

flickr今天的blog上,专门提到了firefox的插件greasemonkey,推荐用户安装使用。blog里举了两个“极为有用的”(extremely useful)脚本例子,一个是flickr联系人管理(Flickr Contacts Organiser),另一个是group照片管理(Group Pool Admin: Warn + Delete)。联系人超多的用户使用前者可以提高效率,掌管受欢迎group(人多图更多)的管理员使用后者更能事半功倍。

greasemonkey是个通过客户端脚本改变页面内容的firefox插件,容易开发、功能强大、应用多样,因此很得firefox用户的喜爱。有段时间因为使用其自定义gmail(添加功能,屏蔽广告等)的用户较多,google还专门下达封杀令:谁用greasemonkey禁谁(详情)!想不到这次flickr公开推荐用户使用,还说“这给了我们提升flickr功能的动力”(Definitely gives us nice motivation to improve Flickr!)。既然屡禁不止,索性疏而导之。两厢对比,flickr的心胸度量(或者说策略)明显胜过google一筹啊。

当然,flickr没忘了提醒用户:“我们不对第三方工具负责。”

评论(2)

欧洲豪门郁闷:别夸我,烦着呢!

这几天欧洲足坛有个奇怪的现象:往往球队刚获大胜,被媒体球迷一致赞美,接着就马上输球。这不,先是完胜西班牙人夺得西班牙超级杯、又以4:0羞辱拜仁的巴萨,被赞的天上有地下无,“已经超越了昔日梦之队”,马上就在欧洲超级杯上0:3完败于塞维利亚,一点脾气也没有;刚刚德甲两连胜的不来梅,中场球员迭戈几乎被众口一词的吹捧声淹死,却立即在第3轮0:2输给沙尔克;切尔西,英超首轮3球大胜曼城,众人皆赞(包括我),接下来却被神经刀米堡2:1斩于马下;拜仁,德甲两连胜酣畅淋漓,大家都说“看,德甲老大就是强,卖了巴拉克也还是巨人”,随即在甘珀杯上被巴萨4球完胜羞辱的痛不欲生……

估计这些俱乐部、球队、教练都在郁闷:以后少tmd夸我,还嫌我不够烦啊?!

说实话,这些豪门球队各有败因,有的是比赛密集身体疲劳,有的是有历史原因,有的是国内龙国外虫,不能完全归结于“捧杀”。不过大家齐刷刷的制造新闻吸引眼球,还真是难得的很。

留言

用漫画调侃blog圈的网站blaugh

blaugh是一个很有意思的站点,它用漫画的形式表述、刻画、调侃现下的互联网和blog圈,往往画的一针见血、入木三分。它还鼓励blogger们在自己的blog上贴出它的漫画,恭敬不如从命,我就贴几幅有代表性的出来吧。

Matt Cutts, Cat Blogger
给猫写blog的那个人

If Lincoln Blogged
假如林肯也写博……

Senior Netizens
高级网民

Windows Dead Writer
Windows Dead Writer

Even Viagra Won't Help
“伟哥”也帮不上忙

AJAX Makes Everything Better
ajax让一切都更美好

留言

« Previous entries