收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 3178|回复: 4

[CSS] fireworks网页图片导出优化

  [复制链接]
发表于 2012-3-30 17:04:18 | 显示全部楼层 |阅读模式
本帖最后由 redsky1987 于 2012-2-15 15:21 编辑

一直想分享点网页切图中图片优化的东西。
不知道应该放在哪个版,不过我是用FW来切图的,所以我就放在这里吧。
很多同学都搞不明白,这么多图片格式,什么情况用什么格式图片。
我在这里就简单分享下我的经验。
原则:保证图片不失真的前提下,以最小的图片大小来导出图片。
目前我们网络上普遍使用的图片格式分为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要更优化,不过大小就会大很多了。
发表于 2012-5-2 15:13:08 | 显示全部楼层
绝世好帖!!真是不错
回复 支持 反对

使用道具 举报

发表于 2012-5-2 17:01:11 | 显示全部楼层
fw一直导出来的图片都是不错的,可惜现在都被ps代替了。
回复 支持 反对

使用道具 举报

发表于 2012-5-2 22:16:00 | 显示全部楼层
好久没用FW了
回复 支持 反对

使用道具 举报

发表于 2012-5-4 13:22:09 | 显示全部楼层
一般都是用ps
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( ICP05002321 )  

GMT+8, 2019-6-26 20:12 , Processed in 0.112024 second(s), 9 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表