网页图片导出终极优化大法之Fireworks篇
点击数:9866 更新时间:2014-04-06 15:20:00 来源: 昕竹轩网站设计-【返回】
很多网页设计人员都搞不明白,那么多图片格式,什么情况应该用什么格式图片。我在这里就简单分享下我的经验。
原则:保证图片不失真的前提下,以最小的图片大小来导出图片。
目前我们网络上普遍使用的图片格式分为JPG、GIF、PNG-8、PNG-32(PS中的PNG24)。
具体图片格式的原理,我就不说了,大家可以去百度查询下。
我只说明什么情况使用什么格式,以及它们的优缺点。
JPG:
一般来说,大型的、颜色丰富的图片可以用JPG,例如照片、商品图片。
缺点:JPG会损伤一些像素化的东西,例如文字,如果你的照片上有些像素字体,这些字会被扩散,周边会出现杂点。
PNG-8:
目前使用图片最多的格式之一,仅次于jpg,PNG-8是用来代替以前的GIF的,大部分情况PNG-8要比GIF小20%。
跟GIF一样PNG-8是以像素点来存储图像的,所以比起JPG来说,它更加精确,不会产生像素字出现杂点的现象,一般用在按钮、导航背景、图标等地方。
PNG-8和GIF一样,是支持图片透明效果的。
缺点:大型、颜色丰富的图片中,PNG-8的大小会越来越大,甚至达到PNG-32的大小。FW导出PNG-8的时候大跨度渐变会产生失真(这个如何处理后面会说)。
GIF:
目前GIF属于淘汰阶段,因为PNG-8比它更为优化,当然优点也显而易见,那就是动画。
PNG-32:
无损压缩,32位真彩色图片+alpha透明通道,几乎完美的格式。
缺点:图片大小很大,IE6下透明部分会产生灰底。
如何使用FW导出图片
1.为什么使用Firewroks
fw有着比PS更好的图片优化功能,
fireworks于photoshop的图片优化比较。http://blog.dmtuan.com/?p=270
2.使用
FW导出图片利用文件-图像预览来导出图片,类似PS的导出web格式功能。
jpg:
默认是80优化度,这个程度跟PS的60是一样的,不过有时候会增加些,我一般用84。
png-8:。
png-8导出选项中有分:不透明、索引色透明、alpha透明。
不透明,顾名思义,不说了。
索引色透明中,你可以选择一个颜色当作色板,那么你选择的这个颜色会以透明显示,其他颜色则不透明。
半透明的地方会以色板颜色+半透明颜色的混合值输出。
如图,我们使用白色作为索引色,那么这个圆中的文字也同样变成了透明,这个方面真心PS做的好,我会用个笨办法,外面画个白色底,合并平面化所选后用0-实边的魔术棒把白色删了再用alpha透明导出。
另外,如果背景是深色调的,会有明显的白色毛边出现,这个和PS是一样的毛病。
重点来了,PNG-8 alpha透明
我使用最多的就是这个模式。
此模式PS是不具备的,这也是FW的强大,此模式下,png-8能支持图片半透明,也就是说我们可以解决上面白色毛边问题了!!
所以,个人觉得PNG-8优美的图片大小今后必将代替PNG-32!!
我上面说了今后,是的,PNG-8 alpha透明还是有它的缺点,依然是IE6,不过这个缺点对比PNG-32的灰底来说已经是好了很多。
PNG-8 ALPHA透明在IE6下会把所有半透明的部分解析成全透明。
所以有些半透明的诸如背景、边框,还是老老实实的采用png-32,然后滤镜或者VML处理,直到IE6消亡为止。
当然,更多地方我们可以以优雅降级的思想来处理更多的透明问题。
例如按钮,小图标。这些只有边缘少量半透明像素的东东,其他浏览器很完美,就如同PNG-32那样,IE6中会处理成边缘像素化。
见google使用的png-8 alpha透明 http://blog.dmtuan.com/demo/google_png8/Google.htm
这是google在纪念牛顿诞辰的时候的皮肤,我们见到,google这里的苹果用的就是png-8 alpha透明,你可以自行测试IE6和其他浏览器的区别。
大跨度渐变失真问题
如图,当FW导出png-8的时候,渐变有可能产生失真现象,这个时候可采取抖动来消除这个现象,不过抖动后,有时候会产生一些颗粒状像素,这个时候我就要考虑是否用JPG来代替了,因为这张图的颜色数可能过于丰富了。
当然,在制作css spirtes拼合图的时候,可能必须采用png-8来导出,这时颗粒状像素如果真的无法忍受,那么就导出PNG32再使用PS导出吧,比起质量来说PS要更优化,不过大小就会大很多了。
Copyright © 2014-2015 Htmcss.Com All Rights Reserved 版权所有昕竹轩网站设计 备案号:闽ICP备16024510号-4
你设置的联系邮箱是*: (当有人给你留言回复之时,联系邮箱可以及时通知你)
我们建议你填写正确的邮箱地址,如果你之前填写邮箱地址是错误的可以通过 【修改资料】 来重新设置