如何转换PNG图片让其兼容所有浏览器透明和避免发生锯齿

如何转换PNG图片让其兼容所有浏览器透明和避免发生锯齿

    png格式的图片在网站中应用非常广泛,基本上在页面布局的时候我们都会用到它来做例如:图片按钮,有小图标的布局,渐变按钮,圆角按钮(因老版本的IE不支持CSS3属性)等等功能,现在我们基本上都会将上面所有的小图片都收集到一张png格式的图片里面,然后通过background-position来定位图片中要使用的那个图标,这样子使用的方法是为了减少http请求次数,因为如果每增加多一张图片,就会像服务器多请求一次。


    今天要讲的话题是怎么处理这样的图片,让它兼容所有浏览器。为什么这么说呢,其实前几天跟同事聊天中才发现原来他们处理这种png图片时为了要兼容在IE6下对png32或png24不透明的时候,他们都是用js处理的,其实当时听到他们的解决方法时我有点纳闷,为什么要用这种处理方法呢,既麻烦也不高效。


    png分为三种格式png8,png24,png32这三种格式,数值越高图片的精度质量就越好,相对的图片大小也会跟着增大,我发现现在的人非常喜欢用photoshop来切图,说实在话,我一直都是使用Fireworks进行网页切图的,因为我处理图片也就是三脚猫的功夫,不懂的用photoshop的图层,用Fireworks切图刚好,不过其实Fireworks本身就是用来处理网页的设计工具。我多年来一直使用。虽然很多人说Fireworks各方面都不如photoshop,但是Adobe公司仍然更新到了CS6这个版本了,他的存在必然是有价值的。

好的废话一堆,马上进入主题吧。其实IE6是可以兼容png8图片透明的,但是我的同事还会选择用png24和png32呢,因为他们说,许多圆角的图片如果转换成png8的时候会出现锯齿的现象。我们来做一个圆角的按钮,然后转换成PNG8和png32的,对比一下是否png8发生了锯齿。


png8转换后:


png32转换后:


为了好对比两个的差异我把图片背景调成了黑色的,对比下大家可以清楚的看到png8的图片确实发生了锯齿,在photoshop下转换后(坑爹啊)这样的结果即使是IE6是兼容了这张图片,但是图片失帧了,或许因此你的按钮看起来很奇怪,会不够精致。


    上面的操作都是用photoshop完成的,估计现在很多人都用这个软件切图,这就是为什么很多人用png24或png32的原因,为了不然跟图片出现锯齿,然后兼容IE6再加载一段JS来实现兼容png32。

    但是我多年来用的方法跟上面的方法不同,我直接用Fireworks来转换png8图片,不但不会出现锯齿,而且图片大小还比用photoshop转换出来的锯齿png8图片还要小。神奇吧。好了说下我的转换方法吧:


第一步,我把photoshop画的原始图放到firework中,然后转换,如图方法:

请记住上面的设置的参数必需和我的一样,否则转换出来的png8还是会出现锯齿,而且锯齿比photoshop还严重。


第二步:导出图片,千万不要使用另存为,否则也是无效的。



好的最后导出后的png8图片为了观看直观,我也把背景调成了黑色,请看效果:



用Firework转换出来的png8效果跟png32的是一样的,这样以来,我们就可以直接用png8的图片了,而不用担心图片发生锯齿。并且通过Firework转换出来的图片还比用photoshop的图片大小还小:


嘿嘿,是不是很神奇,Fireworks的功能居然能够如此强大,赶紧去试一下吧,有什么问题给我及时留言。


---------------------------------------------------------------------------------

2014-03-13补充:

    有许多同学反应了我上面转换的一些缺点,虽然上面的png8转换后比图片是透明了,而且图片质量也是最小的,但是同时也造成了有些精度较高要求的图标出现锯齿,这个问题其实我也遇到了。很多人会问,那到底有没有两全的方法,既保证现有方法的大小不变,又不让图片出现锯齿呢?


    经过无数次尝试我发现还是没能达到那个目标,在一个月黑天高的夜晚我突然发现了一个神器,PNGOUTWin,通过这个软件转换后的png8完全可以达到俺们上面想要的要求。


    PngoutWin是一款聪明的png图片压缩工具,别的压缩工具压缩PNG是通过丢弃透明层来达到减肥的目的。可是不能透明的PNG还能叫PNG吗?PngoutWin它不会丢弃原本的透明,而是通过删除图像中不重要的数据来达到减肥的目的,体积缩小后,凭肉眼是看不出区别的。


    要通过这个软件转换png8,我们不能再使用FW来转换了,我们要通过PS里面将我们的图片先转换成png24这个PS,因为PS没有转换成png8的参数选,实际上在png24导出后就是png8,但是图片质量较高,且不出现锯齿。然后我们再将这个转换好的png图片放到PNGOUTWin里面在转换一次,经过软件减肥后后的png8质量相当于我上文用FW导出的大小,不出现锯齿,而且在IE6下依旧保持透明。神器啊!!!


转载请注明来自 520UED http://www.520ued.com/article/53882a12b992a7c43f5c2047

comments powered by Disqus