很多网页设计人员都搞不明白，那么多图片格式，什么情况应该用什么格式图片。我在这里就简单分享下我的经验。

原则：保证图片不失真的前提下，以最小的图片大小来导出图片。

目前我们网络上普遍使用的图片格式分为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要更优化，不过大小就会大很多了。