图片问题的一些总结
png8由于仅有2^8种颜色，因此体积较小，同时，他还对透明有比较友好的支持，因此，png8也是很多人喜欢使用的图片格式。
png8+alpha透明
png8的alpha透明，由于不能够使用ps来进行导出，因此我们需要使用fireworks来导出。这次，我选择了一张黑色的透明背景来对透明的支持做一次比对
图中下为png32，上为png8+alpha透明
可以看出，png8对于半透明，有不错的支持性。同时，因为其比较小的体积。在现代浏览器上，对于颜色不太复杂的小按钮之类的的东西，以及对于图片的要求并没有那么高的移动端端来说png+alpha透明也是显得十分友好的。当然，对于颜色较为复杂，以及要求较为严格的pc端上需要采用的东西，我认为还是应该采用png32的好。不过alpha透明的png8在ie6上的表现并不如人意，在ie6上，其半透明处会以全透明来显示，并且毛边严重。之前也提及到了，png8的alpha透明对于半透明，只是有不错的支持性，其真正的表现事实上还是不如png32。在我测试过程中发现，png8采用alpha透明，依然会出现一些毛边
比对可以发现，上面png8+alpha透明的图片比起下面png32的图片还是多了一些锯齿。不过整体影响不算太大。
png8+索引透明
png8的索引透明终于可以用ps来进行导出了，导出方式也很简单。导出的时候直接选择ps的png8或者ps预设的png-8 128仿色。此时我们就可以导出索引透明的png8了。如下图
从上面的图可以看到，我们将导出图片，四周部分变为了白色（当然，你一打开看到的也可能是没有白边的）。这个时候，把图片右边那个杂边改为无，就可以去掉图片的白边。如下
左边的png32的图与右边png8的图对比可以看出，右边的图明显有一些锯齿。原因是索引透明对于透明的支持并不完善，其仅仅支持全透明以及全不透明，而不支持半透明。当选择了杂边为无的时候，所有的半透明转换为了不透明，也就产生了锯齿。那如何解决这些锯齿呢？
刚刚将四周白色，变为无的杂边的选项，其实就是ps对于锯齿的一个解决方法。如果这张图的需求是在纯色的背景下的话，我们可以将杂边，改为该图在网页中所在的背景的颜色，以做到在视觉上的一种无锯齿的感觉。这种方案在ie6下也可以很好地实现，不过也有他的局限性??倘若背景颜色比较复杂，那么这种方案将会无效。
###图片的选择
那么就总体来说下图片格式的选择应用场景吧（虽然上面多少都有些提到了）
关于jpg
由于其可压缩的特点，对于背景颜色较为复杂（比如照片等图）并且没有透明的图片，建议采用jpg。这样在保证了图片肉眼几乎看不出很大区别的情况下，把图片压得更小，压缩更快。不过对于有线条及文字的内容，不推荐用jpg。
关于gif
如果需要动图的话，由于APNG对兼容性对不友好gif依然还是首选。
关于png
png8+alpha可以加入日常的开发中。对于桌面端，在不用考虑ie6的情况下，alpha透明的png8可以用在一些图片颜色较为简单的地方。对于移动端，可以考虑直接采用alpha透明的png8，而不采用png32，因为移动端的网络相较pc端较差，因此，采用png8+alpha可以节省流量。png32在桌面端中，还是可以作为主要的图片格式。因为桌面端相较于移动端，网速更友好，同时，显示器的浏览对于图片的精细程度要求更高，因此，一些比较复杂的按钮，logo还是应当采用png32来处理
png8+索引透明可以用来处理桌面端对于低版本浏览器的（ie6）的兼容问题，虽然采用背景杂边的方式只能解决部分锯齿问题，但总好过于无。ie6已然是很早之前的浏览器，本身对其的兼容就势必会牺牲一些东西。因此，个人感觉还是对于背景简单的，直接采用杂边的方式来解决，而对于背景较为复杂的，目前我也只能想到采用去掉杂边的方法去解决（其实也就是说锯齿直接不管了）。
结束时的话
……恩，对于图片的总结应该是还没有结束的。这里就只能写到这么多了。还有关于体积更小，效果更好的WebP，以及对于这种图片方案与前端自动化工具的结合还没有纳入实践……嗯，搞不好哪天懒癌治好了就继续写了。
查看更多关于前端图片选择问题_html/css_WEB-ITnose的详细内容...