随着web的发展，网站资源的流量也变得越来越大。据统计，60%的网站流量均来自网站图片，可见对图片合理优化可以大幅影响网站流量，减小带宽消耗和服务器压力。
一、现有web图片格式我们先来看下现在常用的web图片的格式：
几种文件格式的特点概述
baseline-jpeg这种类型的JPEG文件存储方式是按从上到下的扫描方式，把每一行顺序的保存在JPEG文件中。打开这个文件显示它的内容时，数据将按照存储时的顺序从上到下一行一行的被显示出来，直到所有的数据都被读完，就完成了整张图片的显示。如果文件较大或者网络下载速度较慢，那么就会看到图片被一行行加载的效果，这种格式的JPEG没有什么优点，因此，一般都推荐使用ProgressiveJPEG
preogressive-jpeg和Baseline一遍扫描不同，ProgressiveJPEG文件包含多次扫描，这些扫描顺寻的存储在JPEG文件中。打开文件过程中，会先显示整个图片的模糊轮廓，随着扫描次数的增加，图片变得越来越清晰。这种格式的主要优点是在网络较慢的情况下，可以看到图片的轮廓知道正在加载的图片大概是什么。__这两种jpeg格式文件的效果对比如下：
jpeg优势：非常通用，JPEG在色调及颜色平滑变化的相片或是写实绘画（painting）上可以达到它最佳的效果。
jpeg劣势：它并不适合于线条绘图（drawing）和其他文字或图示（iconic）的图形,因为它的压缩方法用在这些图形的型态上,会得到不适当的结果；
gifGIF(GraphicsInterchangeFormat)的原义是“图像互换格式”，GIF文件的数据，是一种基于LZW算法(串表压缩算法)连续色调的无损压缩格式。是目前web网页中十分常用的一种动画文件格式。优势：
劣势： 由于采用了8位压缩,最多只能处理种颜色（2的8次方）,故不宜应用于真彩图像。
优秀的压缩算法使其在一定程度上保证图像质量的同时将体积变得很小
可插入多帧,从而实现动画效果
可设置透明色以产生对象浮现于背景之上的效果
pngpng文件分为png8(8位透明png)、png2(色png)、png32(多阶透明png)，png的有点在于使用位图实现web上的透明图片，以实现比较好的体验。
优势：-支持色调色板技术以产生小体积文件-最高支持8位真彩色图像以及16位灰度图像。-支持Alpha通道的半透明特性。-支持图像亮度的gamma校正信息。-支持存储附加文本信息,以保留图像名称、作者、版权、创作时间、注释等信息。-使用无损压缩。-渐近显示和流式读写,适合在网络传输中快速显示预览效果后再展示全貌。-使用CRC循环冗余编码防止文件出错。-最新的PNG标准允许在一个文件内存储多幅图像。
劣势：-但也有一些软件不能使用适合的预测，生成的文件较大(IE6只支持PNG8)
webp
目前移动端Android.0以上、PC端chorme10+（1~16有渲染bug）、opera11+、safri均支持webp格式图片。WEBP与JPG相比较，编码速度慢10倍，解码速度慢1.5倍，而绝大部分的网络应用中，图片都是静态文件，所以对于用户使用只需要关心解码速度即可。但实际上，webp虽然会增加额外的解码时间，但是由于减少了文件体积，缩短了加载的时间，实际上文件的渲染速度反而变快了。
图片加载测试样例
webp上目前可行的应用场景：-1.客户端软件，内嵌了基于Chromium的webview，这类浏览器中应用的网页是可以完全使用webp格式，提升加载渲染速度，不考虑兼容。-2.用node-webkit开发的程序，用webp可以减少文件包的体积。-3.移动应用或网页游戏,界面需要大量图片,可以嵌入webp的解码包,能够节省用户流量，提升访问速度
优势：-对于png图片,webp比png小了5%,但是缺点是你压缩的时候需要的时间更久了；
劣势：-兼容性不太好,只有opera,和chrome支持;
apng
简单来讲apng格式图片使用多个单张png连接起来的动画图片格式，支持全透明通道动画。相比于gif动画，没有毛刺，质量更高，但目前支持的浏览器并不完全。可以去caniuse查看其兼容性。目前可用性相对较低，适用于对动画质量要求很高的情况。
svg是一种矢量图片，支持透明，缩放，动画，除了android2.3的手机，其它场景都支持，是一种比较好的图片代替方案。优势：
劣势：-DOM比正常的图形慢，而且如果其结点多而杂，就更慢了-不适合网页游戏等；当然，我们可以结合Canvas+SVG来实现
矢量图形，不受像素影响——SVG的这个特性使得它在不同的平台或者媒体下表现良好，无论屏幕分辨率如何
SVG对动画的支持较好；其DOM结构可以被其特定语法或者JavaScript控制，从而轻松的实现动画
JavaScript可以完全控制SVGDom元素
SVG的结构是XML，其可访问性（盲文、声音朗读等）、可操作性、可编程性、可被CSS样式化完胜Canvas。另外，其支持ARIA属性，使其如虎添翼。
bpg