找回密码
 注册

只需一步,快速开始

蓝色理想 最新研发动态 新增登录提醒插件 - 用至我的站点 地图任务一定要做 - 给官方提建议

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

MIUI手机主题设计大赛,奔驰大奖等你拿! 想加薪?!蓝色理想招聘提供你更多机会 悬赏答疑,赚取积分兑奖品!

查看: 1022|回复: 7

[网页制作] fireworks网页图片导出优化 [复制链接]

redsky1987 楼主

啄米鸟

银牌会员  

帖子
414
体力
1537
威望
10
居住地
浙江省 杭州市
发表于 2012-2-15 15:20:27 |显示全部楼层
本帖最后由 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要更优化,不过大小就会大很多了。
附件: 你需要登录才可以下载或查看附件。没有帐号?注册
已有 2 人评分威望 收起 理由
凌志 + 3 新手老手都要看的
WaveF + 1 原创扫盲贴,加分鼓励!

总评分: 威望 + 4   查看全部评分

UED 
帖子
1728
体力
1044
威望
1
居住地
安徽省 合肥市
发表于 2012-2-15 17:59:29 |显示全部楼层
很不错,感谢分享。切图优化技能是优秀的前端必须会的。
希望与坚持,勇气和坚韧。男人的职责。爱与幸福。
蓝色帮助

看见未来

银牌会员  

帖子
553
体力
2139
威望
0
居住地
河北省 石家庄市
发表于 2012-2-15 21:56:04 |显示全部楼层
恩,最近用的着,正在做电子签章
帖子
728
体力
8806
威望
36
居住地
广东省 广州市
发表于 2012-2-16 09:48:13 |显示全部楼层
我觉得到了今时今日应该完全放弃掉IE6用户了,基本上IE系列的话我只会照顾9或以上版本的用户,IE6/7/8用户 不配/没有资格/ 看我的东西,IE6用户快去撞墙好了
 ┏━━━━━━━━┓ ♡
 ┃ miniCG.com ┃╯
 ┗━━━━━━━━┛
redsky1987 楼主

啄米鸟

银牌会员  

帖子
414
体力
1537
威望
10
居住地
浙江省 杭州市
发表于 2012-2-16 16:25:04 |显示全部楼层
版主可能较少接触前端或者对国内互联网现状了解较少。
目前IE6在国内至少还有30%以上的用户。
许多时候作为前端,都是很无奈的,我们必须要去支持它,但又非常痛恨它,虽然youtube、google、facebook、twitter都已经宣布逐渐放弃IE6,但显然这些网站国内是无法访问或者被限制访问的,这是国情。
我们只能通过更多的提醒,提示,去让用户升级他们的浏览器,但,我们自己却必须安装它,因为我们还需要照顾那些没有升级的。

杯莫停

超级版主  

帖子
7800
体力
12630
威望
74
居住地
辽宁省 鞍山市
发表于 2012-2-17 09:19:33 |显示全部楼层
楼主总结的很到位。
不过我最近如果不涉及透明背景的话,用FW里的PNG24更多一些。

水楼楼主

银牌会员

帖子
2180
体力
1030
威望
12
居住地
江苏省 徐州市
发表于 2012-2-17 10:19:57 |显示全部楼层
WaveF 发表于 2012-2-16 09:48
我觉得到了今时今日应该完全放弃掉IE6用户了,基本上IE系列的话我只会照顾9或以上版本的用户,IE6/7/8用户  ...



我觉得国内极大互联网商也应该联手放弃支持IE6了,不要想着银行等还在支持,他们作为非互联网企业,而且目前的企业运营模式,是不可能那么有自觉的。
出租签名位   1块/字/月
帖子
1
体力
6
威望
0
发表于 2012-4-24 21:05:26 |显示全部楼层
是呀,碰上ie6,真的很难处理...
您需要登录后才可以回帖 登录 | 注册


Archiver|手机版|blueidea.com ( 京ICP备05002321号 )    

GMT+8, 2012-5-17 15:49 , Processed in 0.118406 second(s), 8 queries , Gzip On, Memcache On.

Powered by Discuz! X2

© 2001-2011 Comsenz Inc.

回顶部