一张JPG图片的解析过程
jpg 图片实际上在我们的使用过程中是使用 jpg 压缩的一个方式。那他是怎么处理的呢？对于原图片数据的话，首先要进行一个颜色空间的转化，将 rgb 的颜色空间转到其他颜色空间，然后进行重采样，去区分高屏和低屏的颜色变化，从而进一步进行一个 DCT 的过程。对于高屏的颜色进行一个压缩，这样压缩的收益会比较大，最后对我们的数据进行一个量化，jpg 的特点就是会进行一个有损压缩，有损压缩，跟原始数据是有差异的，但是这些损失的数据在图片中不是很重要。对于肉眼是看不出来的。
png8/png24/png32之间有什么区别
png应该是做网站使用最多的一种图片格式了，那他们之间有什么区别呢
png8 - 256色，支持透明 (索引表，2^8)
png24 - 2^24色，不支持透明
png32 - 2^24色，支持透明 (在png24的基础上，支持8位颜色透明)
如果能用 png8 代替 png24，当然用 png8, png8 会小很多。每种图片格式都有自己的特点，针对不同的业务场景选择不同的图片格式非常重要
不同格式图片常用的业务场景
jpg有损压缩，压缩率高，不支持透明
大部分不需要透明图片的业务场景，都可以用jpg，压缩率高，更小
png支持透明，浏览器兼容好（他有png8,png24,png32，在压缩的时候会有一个降阶的过程）
大部分需要透明图片的业务场景，在真实情况下用的最多，大部分需要透明场景
webp压缩程度更好，在 ios webview 有兼容性问题（webp 是 2010 年谷歌提出来的一种格式）
安卓全部，新起的文件格式，就是对 ios 支持不太好，但其他都比较优秀，优于 jpg,png
svg矢量图，代码内嵌，相对较小，图片样式相对简单的场景（svg标签绘制，不会随着图片的放大缩小而失真，比如iconfont这样的库，对于这样的矢量图，尽量使用他）
图片样式相对简单的业务场景。比如Logo。小的icon。
gif是不可替代的，跟上面4种图片不冲突，对动画有要求就可以使用。
图片压缩的几种方法
什么是图片压缩，就是针对真实图片情况，舍弃一些相对无关紧要的色彩信息。保证大部分信息是完整的，让我们看到的真正在人眼中变化是不大的，甚至人眼是察觉不出来的。
1、css雪碧图 - 减少网站的 http 请求数量
把你的网站上用到的一些图片合到一张单独的图片中，他的优点是减少了网站的 http 请求数量。现在很多场景下，已经不太用 css 雪碧图了。因为这个雪碧图有几个问题，我本来10张图片的话，可以通过其他方式，比如inine 压缩来减少请求数量，减少请求的大小，但是合并到一张图的时候，这张图片的大小可能会特别大，如果这张图片在加载中没有正常的加载进来的话，就会导致整个页面都失去图片信息，在实战过程中，有些地方还是会使用雪碧图，既要保证这张图片不要太大，同时又能合适的合并减少请求数量，基本上 pc 使用的会多一点
2、Image inline - 减少网站的 http 请求数量
将图片的内容内嵌到html当中。 在网站构建的时候，将图片的内容内嵌到 html 上。以 base 64 的格式都 inline 到整个页面中，这样也是减少了网站的 http 请求数。对于这种 case ，是非常常用，比如10个非常非常小的 icon . 比如 0.1 kb。这种实际上损耗不是图片大小了，而是网站请求。
3、使用矢量图 - 减少网站的 http 的请求数量
使用 svg 进行矢量图的绘制，使用 iconfont 解决 icon 问题
4、在安卓下使用 webp
webp 的优势体现在它具有更优的图像数据压缩算法，能带来更小的体积图片，而且拥有肉眼识别无差异的图像质量，同时具备了无损和有损的压缩模式，Alpha 透明以及动画的特性，在 jpg 和 png 上的转化效果非常优秀、稳定和统一。
案例分析
facebook 还是使用的雪碧图。但是他的雪碧图没有都使用在一张图片上，分了多张，因为使用雪碧图有代价，就是一加载不出来，就都出不来了。他根据业务场景进行了拆分。利用 background-image,background-size,background-position。雪碧图在移动端用的非常少
淘宝的手机端都是 webp 格式。也会有 jpg 的降级，如果支持就展示 webp，如果不支持，就降级到 jpg 。而且很多图片都是 base64 inline 到 dom 中。减少网络的传输次数。如果是要透明的就是支持展示 webp ，不支持就降级到 png。
iconfont 网站都是以矢量图为主的 icon。分别下载 svg 和 png 的格式，svg 比 png 小很多，而且不需要请求。矢量图的局限性是颜色会单调一些。他只适合小的 icon 和非常简答的业务场景。
实战
1、png 转 webp 网站： https://zhitu.isux.us/
第一种替换掉原来的图片
第二种fis3配置，match住 jpg,png，然后通过 webp 这个插件转成 webp 格式，quality 标识压缩率
fis.match('*.{jpg,png}', {
rExt: '.webp',
parser: fis.plugin('webp',{
quality: 80
})
})
第三种 webpack 构建，使用 imagemin-webp 插件
2、inline-image
第一种，base64 直接替换
第二种fis3配置
var imlineImage = _inline('./xxx.png')
通过 _inline 语法将图片转成 base64 ，赋值给一个变量，然后使用这个变量
第三种 webpack 配置 通过url-loader（file-loader）来完成对符合要求图片资源进行base64编码转换的功能
inline 会比本身更大一些，但不会大很多。好处就是减少 http 请求。这种情况下，inline-image更优
3、雪碧图
将几个icon合成一张雪碧图，这个合并过程一般是设计去做的。
雪碧图样式生成网站：http://www.spritecow.com/，选中某块区域，就能实现，雪碧图主要通过 background-position实现
div{
background: url('xxx.png') no-repeat -18px -17px
20px;
height: 20px;
}
-18px -17px 相对于整张图片向左向右偏移多少，就是这个图标移到左上角，就是这个图标向左移动18，向上移动17，这就是雪碧图的一个原理
4、svg
有个 svg 标签，里面可以定义很多种 dom 元素，绘制各种图形，比如 <rect/><circle/> 等等，比如
<svg width="100%" height="100%" version="1.1">
<rect width="300" height="100" style="fill:rgb(0,0,255);stroke-1; stroke:rgb(0,0,0)"/>
</svg>
我们只要几行的标签，就绘制了图形，非常小，而如果是图片的话，就会大很多。