加载中…
个人资料
charies
charies
  • 博客等级:
  • 博客积分:0
  • 博客访问:24,862
  • 关注人气:21
  • 获赠金笔:0支
  • 赠出金笔:0支
  • 荣誉徽章:
相关博文
推荐博文
正文 字体大小:

如何选择图片格式

(2009-06-15 13:40:26)
标签:

png8

png24

png32

gif

杂谈

GIF

GIF是一种调色板型(palette type)(或者说是索引型)的图片。它含有多达256种的颜色。每一个象素点都有一个对应的颜色值。因为这种格式不再存在专利权的问题(译者注:想简单地了解一下gif的历史,请点这里),所以你在创建gif图片的时候不会再有被抓进监狱的危险。(想要了解更多关于gif的历史,请点击这里.)

GIF是一种无损压缩的格式,这意味着当你修改并且保存了图片的时候,它的质量不会有任何损耗。

GIF格式也支持动画.在黑暗的web1.0时代,它导致了大量多余的昙花一现的“新”图片(blinking “new” images),循环的@符号(rotating @ signs),birds dropping,a email以及其他一些让人厌烦的东西的出现。在更加文明的web2.0时代,在等待一个更新页面的ajax请求的时候,我们仍然会看到 “loading”动画,但是也有一些比较讨人喜欢的东西,人们喜欢把它们放在自己的网络上。不管怎么说,如果你有需要,就可以使用动画支持。

GIF也支持透明度,透明度的值是一种布尔类型数据。GIF图片里的一个象素要么完全透明,要么完全不透明。

JPEG

JPEG图片不象GIF图片那样只能有256种颜色,它可以包含数百万种颜色,而且有极高的压缩率。这使得JPEG图片比较适合用来保存相片。事实 上,大多数的相机以jpeg格式保存照片。JPEG是一种有损压缩的格式,这意味着你每次进行编辑的时候都会有质量损耗,所以如果你打算进行多次编辑,那 么最好把中间生成的图片换一种格式存储。但是,还有一些不会损耗图片质量的操作,比如说裁剪图片,旋转图片或者修改元信息。元信息包括,比如说,存储在图 片文件中的注释。

JPEG不支持透明度。

PNG

PNG是一种无损压缩的格式,而且它有很多种类。单考虑实际的用途,我们可以把它分为两种:

  • 1.PNG8
  • 2.真彩色PNG

PNG8是一种调色板型(palette)图象格式,就象GIF。 8代表8位, 28, 或者 256。 PNG8, 调色板型PNG以及索引型 PNG,这些术语都可以互换使用。

那么,PNG8比起GIF有哪些优缺点呢?

    优点:
             通常文件体积比较小
             支持alpha(可变)透明度
    缺点:
             不支持动画

第二种类型的PNG格式是真彩色PNG。这类图片可以包含百万种颜色,就象JPEG。你有时候会碰见它们以PNG24或PNG32命名。

那么真彩色PNG和JPEG相比怎么样呢?从优点方面来说,它是无损压缩的而且支持alpha透明度。从缺点方面来说,它文件的体积比较大。This makes truecolor PNG an ideal format as an intermediate between several edits of a JPEG and also in cases where every pixel matters and the file size doesn’t matter much, such as taking screeenshots for a help manual or some printed material.

IE浏览器和PNG透明度

我们说过,前面两种PNG格式都支持alpha透明度。但是你应该知道,有一些浏览器比较反常,它们对这两种类型的文件支持并不完整。

拿PNG8来说,不管什么时候,一些不完全透明的象素在IE(IE6或更低版本)浏览器中会变得全透明。这并不理想,但是它仍然是有用的,你能得到 与gif相同的效果。所以使用PNG8的时候,最坏的情况下(ie<7)你会得到与使用GIF相同的用户体验,而使用其他浏览器(比如说 firefox、safari、opera)你会获得一种更好的体验。下面的一个例子说明了这个问题,注意围绕在灯泡周围不完全透明的光晕效果在IE6中 是怎么样消失的。

对于真彩色PNG,这种情况带来的麻烦更不易被人察觉。所有不完全透明的象素点在版本7之前的IE浏览器中都变成灰色了(来源:W3C)。


对于PNG8和真彩色PNG,IE7都提供了alpha透明度正确的原生的支持。对于早期版本的IE浏览器你需要使用css和AlphaImageLoader滤镜来修复全彩色PNG中的透明度问题。对于这个问题,在接下来的文章中,我们将会讨论一些更多的细节。

“所有人都在说:给PNG一个表现的机会吧。”

虽然PNG8应该作为PNG类型文件的首选,因为它的文件体积更小而且在早期版本的IE浏览器中不需要使用特别的css滤镜就能很好地降级,但是在使用的时候仍然有需要注意的地方:

  • 1.当PNG8的256种颜色不够用的时候,你可能需要使用全彩色PNG。这种情况应该 尽量避免。一方面,如果你想使用成千上万的颜色,那么这种情况下JPEG将会比较适合,而且能够有更好的压缩率。另一方面,如果颜色数在一千左右,你应该 尽量把这种图片转换为PNG8格式,然后看看它是不是看起来还能够接受。很多情况下,当颜色数达到200到1000的时候,人的肉眼就分辨不出来了。当 然,这也得看是哪种图片了;通常你可以非常安全地删掉1000种颜色,但是有些时候只是删掉2种颜色,图片的效果就不能让人接受了。不管怎么样, 尽可能地把真彩色PNG转换为PNG8和JPEG格式,看看你能不能接受它们的质量和体积。
  • 2.图片的大部分象素是半透明的情况。如 果图片种只有一小部分是不完全透明的,象围绕在圆角周围的象素点,那么PNG8的类GIF(GIF-like)降级通常都没有问题。但是如果图片的大部分 是半透明的(象视频播放器上的播放按钮),那么你除了使用AlphaImageLoader hack你可能别无选择。

最后,让我们总结一下我们刚刚讨论的主要内容:

  • 1.JPEG格式比较适合用来存储照片
  • 2.GIF格式可以用来做动画
  • 3.PNG8可以用来做小图标(icons),按钮,背景等等。

0

阅读 评论 收藏 转载 喜欢 打印举报/Report
  • 评论加载中,请稍候...
发评论

    发评论

    以上网友发言只代表其个人观点,不代表新浪网的观点或立场。

      

    新浪BLOG意见反馈留言板 电话:4000520066 提示音后按1键(按当地市话标准计费) 欢迎批评指正

    新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 会员注册 | 产品答疑

    新浪公司 版权所有