在开始讲解之前要普及一个知识 索引透明颜色和Alpha透明通道
索引透明颜色：百度百科给的解释是位图图片的一种编码方法，需要基于RGB、CMYK等更基本的颜色编码方法。可以通过限制图片中的颜色总数的方法实现有损压缩。挑选一副图片中最有代表性的若干种颜色（通常不超过256种），编制成颜色表。 我个人对这句话的理解就是在生成这张图片的时候会找一系列与你图片接近的颜色（不超过256种颜色）然后重新组合成一张图片很明显，说到这里如果是索引颜色的编码方式注定这张照片的质量不是很高，所以最好是矢量图的时候使用。
而索引透明颜色其实就跟索引红色，黑色，绿色是同一种表现性质的颜色，只不过它的表现形式是透明。IE6就支持索引透明色，而GIF和PNG就是索引编码方式的图，片所以该类图片的透明块在IE6是可以展现的相对美好的。你也可以对现有的图片强行转换成索引颜色编码方式，会发现图片细节变的十分不能忍受
（原本的）
（转换后）
Alpha透明通道：一个8位的灰度通道，该通道用256级灰度来记录图像中的透明度信息，定义透明、不透明和半透明区域，其中黑表示透明，白表示不透明，灰表示半透明。
它是通过红绿蓝三个通道的亮度来展现图片。注意三个通道和主通道（RGB）一样，用来储存颜色信息，只不过他们最后还是要合并到主通道去。
JPG:
优点:体积比PNG24小,但是比gif大很多，打开速度比PNG24快,能展示1600万种颜色。
缺点:有损压缩，每次保存都会有数据损失, 所以尽量不要多次保存。不然图像会失真。无法支持动态图。
适用区域：适合需要高保真展示的图片。色彩丰富的大图片
不适用区域：ICON类的小标签会加重下载量
GIF：
优点： 支持动态图，体积小
缺点：它是索引颜色的编码方法，所以只能拥有256种颜色，如果用于大图展示就会看起来很渣。但是由于其体积小所以可以用于小ICON的展示。
适用区域：动态图，小ICON，矢量图。
不适用区域：需要高保真展示的图片如商品展示。
PNG8/PNG24:
PNG8用的也是索引颜色编码方式，如果不是GIF支持动画其实PNG8完全可以胜过GIF。但是如果是同样的图片下，PNG8的更小。PNG8有1位的布尔透明通道（要么完全透明，要么完全不透明）。
PNG24用的就是Alpha透明通道,就是有8位（256阶）的布尔透明通道（所谓半透明），它也有1600万种颜色而且是无损压缩。看看下面的对比图，一图胜前言。
（PNG8）、
（PNG24）
适用区域：尺寸小的，色彩不丰富的图片最好就用PNG8例如小icon。有半透明需求的就用PNG24吗，而且如果改图片需要频繁下载保存的最好就用PNG24因为它是无损压缩。
不适用区域：如果是特别大的而且需要展现多色彩的图片不适用于PNG8。对图片大小有要求的就最好不要用PNG24。
webp:是一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器带宽资源和数据空间（乍看之下感觉是为了移动和大流量门户网站而生啊）。
在新的出的编码规则下webp支持有损和无损压缩，但相同质量的图片下。webp的图片体积比JPG和PNG小40%左右（这不就印证了我刚刚说的为了移动和大流量门户网站而生的定论吗！！！毕竟流量都是钱啊！！！）
美中不足的是，WebP格式图像的编码时间“比JPEG格式图像长8倍”，而且目前安卓5.0以下版本兼容有时候有问题，且在低端手机解析webp图片的时候cpu的使用率将在20%-36%之间波动。（那移动端的适用领域不就瞬间定格在Iphone和安卓旗舰机，(╬▔皿▔)这让小米和魅族的低端型号手机情何以堪。。。 ）
但是根据以往的经验PNG 格式的表情使用 CPU 波动比较大。从搜查到的资料来看 WebP 格式表情占用的 CPU 会比 PNG 表情的占用率大 ，因为webp使用一种高级预测编码方法对图片进行编码，这种方法使用临近像素块中的值来预测当前块中的图像值，然后只需要对这种差异进行编译耗时但是质量好导致CPU占用率大。
WebP 使用的是 Fancy 采样算法，既然是采样算法必然有采样区块，而 JPEG 的采样区块是 8*8，对于原始图片的长宽不是 8 的倍数，都需要先补成 8 的倍数，使其能一块块的处理，所以对于 8 的整数倍的图片，压缩会更高效。而webp的采样区块是16n*16n所以选择 256*256 或者 192*192 能获得更高的 WebP 压缩效率。（这不是表情包的大小吗？难道google的潜意思是让我们对表情包用webp？）.
webp也支持动态图
目前 Animated WebP 支持将 GIF 直接转换成 Animated WebP，或者将多张 WebP 图片组合成 Animated WebP。与传统的 GIF 图比较，Animated WebP 的优势在于
①体积更小，GIF 转成有损 Animated WebP 后可以减小 64% 的体积，转成无损可以节省 19% 的体积
②颜色更丰富，支持 24-bit 的 RGB 颜色以及 8-bit 的 Alpha 透明通道（而 GIF 只支持 8-bit RGB 颜色以及 1-bit 的透明）（终于不是gif一家独大了，而且还更小！webp看来想做霸主了！）
当然他的确定目前也是很大的，
①消耗较多的 CPU 和解码时间（多 1.5~2.2 倍）
②和 GIF 相比起来支持度还不够，目前仍无法通用
综上所述有以下的适用区域总结
①大流量门户网站且无需有过多兼容浏览器的需求
②针对高端用户机型的用户推广活动页面
我的个人博客：http://zengjinchao.com/wordpress/
