« 上一篇下一篇 »

解决png在火狐firefox和IE下颜色不一样的问题

PNG8 格式大部分情况下会比GIF的图片小不少,很多情况下为设计师保存WEB素材格式首选,但是PNG与其它图片格式所不同的是,它可以保存 gamma 信息。而IE浏览器(包括IE7以上) 会使用这个 gamma 信息来渲染图像,于是就会图片偏色,造成网页效果失真,尤其是PS3以下版本导出的PNG8格式图片;只要去掉PNG8图片信息中的gamma值,就可以 解决这个偏色问题;

PNG8格式图片在FF下和IE下显示的颜色不一致,IE中图片颜色要比正常的深一点。做个示例,一张纯色的图片,色值是#0099ff,放在FF和IE 2种浏览器下:

PNG8图片在IE下有色差,不过解决方法也很简单 - UED.网易杭州 - 以用户为中心的设计 
从 截屏中我们可以看出,IE下看到的图片,实际色值是#008fff;比原图颜色要深了一些。一般情况下发现不了,但是如果图片需要与CSS设置的背景色一 同使用就会出现明显色差。用tweakpng工具查看png图中的数据信息,可以看到这张图中有一个gAMA的值,正是这个gAMA值使得IE的对图片的 解析出了偏差。

gAMA值是一个色彩校正值,在这张图片里 gAMA = 0.45,不同的浏览器或其它可查看图片的软件都可能根据这个值对图片色彩进行校正。没有gAMA值的png图片,在浏览器中就不会产生色差。

解决方法:
1. 从源头杜绝gama值
由 Photoshop CS3以及以上的版本 和 Fireworks 保存的png图片是不带gAMA值的,不会有色差问题。但Photoshop CS2和它以下的版本会保留gAMA值;

2. 用tweakpng工具删除gama值
tweakpng(官网 | 下载)是一款轻量级png图片处理软件,它可以查看png中的信息参数,也可以删除你不需要的数据信息。打开软件,把你要查看的图片拖进去,便会显示图片所带的数据信息,如示例图。然后选中你要编辑的信息,双击就可以修改,或者删除此条信息,然后另存为图片即可。