cychai的专栏

曾经在幽幽暗暗反反复复中追问,才知道平平淡淡从从容容才是真!

使png 图片在网页上透明显示

     周六参加webtech 第八期web交流会,讲到图片优化方面,其实涉及到一个png图片替代gif ,但是在网页中无法实现透明效果。

 

     观察淘宝的图片,其实都是png的。解决的方案是采用png-8 实现透明。


     PNG,是一种非失真性压缩位图图形文件格式。PNG格式是非失真性压缩的,允许使用类似于GIF格式的调色板技术,支持真彩色图像,并具备阿尔法通道(半透明)等特性。现在有很多人使用PNG格式于互联网及其他方面上。

     PNG,是一种非失真性压缩位图图形文件格式。PNG格式是非失真性压缩的,允许使用类似于GIF格式的调色板技术,支持真彩色图像,并具备阿尔法通道(半透明)等特性。现在有很多人使用PNG格式于互联网及其他方面上。

     PNG的的英文名称为Portable Network Graphics,即便携式网络图片。另有说法是名称来源于非官方的“PNG is Not GIF”。

 

特性

    * 支持256色调色板技术以产生小体积文件
    * 最高支持48位真彩色图像以及16位灰度图像。
    * 支持阿尔法通道的半透明特性。
    * 支持图像亮度的gamma校正信息。
   * 支持存储附加文本信息,以保留图像名称、作者、版权、创作时间、注释等信息。
   * 使用无损压缩
   * 渐近显示和流式读写,适合在网络传输中快速显示预览效果后再展示全貌。
   * 使用CRC循环冗余编码防止文件出错。
   *
最新的PNG标准允许在一个文件内存储多幅图像。

  

 

PNG分为两种格式: PNG-8和PNG-24。PNG-8跟GIF一样最高支持256色,PNG-24支持48位真彩色,有时候比JPG更好,这一点不在讨论范围。

 

如何生成 PNG-8 和 PNG-24 的图像?使用 PS 的“储存为 Web 所用格式”(快捷键:Alt + Shift + Ctrl + S),在右侧属性窗口选择图像格式。如果使用fireworks则是“文件--图像预览”(快捷键:ctrl+shift+x),在相关栏目选择“格式 ”“调色板”“索引色等”导出...

一、PNG-8 与 GIF

PNG-8跟GIF一样支持单色透明。GIF有的有点PNG-8都有,GIF没有的PNG-8还有,比如:同样的文件PNG-8格式的却比GIF要小。

 

二、PNG-8 与 PNG-24 对IE6的支持程度

PNG-24是支持alpha通道透明的格式,支持半透明,IE6不支持PNG-24,但是他完全支持PNG-8。
如果是不透明的PNG-24,IE6也是完美支持,之所以说IE6不支持PNG-24是因为PNG-24的半透明会在IE6里显示不正常。

 

三、PNG-8 与 PNG-24 的透明区别

PNG-8 和 gif 有一些相似之处,模式都是索引颜色,只支持像素级的纯透明,不支持 alpha 透明。我们通常说的“IE6 不支持 PNG 透明”,是指不支持 PNG-24 的透明(将透明区域显示为灰色)。但是 IE6 支持 PNG-8 的透明,就像支持 gif 的透明一样。

 

四、PNG-8 的高压缩比

切图时,有时选择 PNG-8 可以获得更高的压缩比。注意,是 PNG-8,不是 PNG-24。不过有些情况下还是 gif 或 jpg 会小一些,需要根据实际情况调试以选择最佳方案。

阅读更多
个人分类: DHTML
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭