fireworks网页图片导出优化

redsky1987 楼主

一直想分享点网页切图中图片优化的东西。
不知道应该放在哪个版，不过我是用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要更优化，不过大小就会大很多了。

UED

很不错，感谢分享。切图优化技能是优秀的前端必须会的。

yebinghai

恩，最近用的着，正在做电子签章

WaveF

我觉得到了今时今日应该完全放弃掉IE6用户了，基本上IE系列的话我只会照顾9或以上版本的用户，IE6/7/8用户 不配/没有资格/ 看我的东西，IE6用户快去撞墙好了

redsky1987 楼主

版主可能较少接触前端或者对国内互联网现状了解较少。
目前IE6在国内至少还有30%以上的用户。
许多时候作为前端，都是很无奈的，我们必须要去支持它，但又非常痛恨它，虽然youtube、google、facebook、twitter都已经宣布逐渐放弃IE6，但显然这些网站国内是无法访问或者被限制访问的，这是国情。
我们只能通过更多的提醒，提示，去让用户升级他们的浏览器，但，我们自己却必须安装它，因为我们还需要照顾那些没有升级的。

凌志

楼主总结的很到位。
不过我最近如果不涉及透明背景的话，用FW里的PNG24更多一些。

newyoungerit

WaveF 发表于 2012-2-16 09:48
我觉得到了今时今日应该完全放弃掉IE6用户了，基本上IE系列的话我只会照顾9或以上版本的用户，IE6/7/8用户  ...

我觉得国内极大互联网商也应该联手放弃支持IE6了，不要想着银行等还在支持，他们作为非互联网企业，而且目前的企业运营模式，是不可能那么有自觉的。

susan418

是呀，碰上ie6，真的很难处理...