您所在的位置:首页>>常见问题

网页图片导出终极优化大法之Fireworks篇

点击数:3175 更新时间: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要更优化,不过大小就会大很多了。


【责任编辑:CSW8923
展开