web前端-图片，优化，压缩

据网络统计，60%的网站流量均来自网站图片，可见对图片合理优化可以大幅影响网站流量，减小带宽消耗和服务器压力。

常用格式：

图片格式	支持透明	动画支持	压缩方式	浏览器支持	相对原图大小	适应场景
jpg	不支持	不支持	有损	所有	由画质决定	所有通用场景
jpeg	不支持	不支持	有损	所有	由画质决定	所有通用场景, 渐进式加载
gif	支持	支持	无损	所有	由帧数和每帧图片大小决定	简单颜色，动画
png	支持	不支持	无损	所有	由png色值位数决定	需要透明时
webp	支持	不支持	有损	Chrome、Opera	由压缩率决定	复杂颜色及形状，浏览器平台可预知
apng	支持	支持	无损	Firefox、Safari、iOS Safari	由每帧图片决定	需要半透明效果的动画
svg	支持	支持	无损	所有(IE8以上)	由内容和特效复杂度决定	简单图形，需要良好的放缩体验，需要动态控制图片特效
bpg	支持	支持	有损	不支持，需要js解码	由画质决定	jpeg上需要极限优化的场景

优化方案：

使用base64编码代替图片

1. 场景：适用于图片大小小于2KB，页面上引用图片总数不多的情况
2. 原理：将图片转换为base64编码字符串inline到页面或css中 
3. 优势：减少http的请求次数，并可以放到后台数据库中，只传输字符串，有较多的构建工具可以直接实现 
4. 劣势：这种方法仅限于图片总数较少，而且图片大小小于2KB的情况。否则图片字符串会变得很长很长

合并图片sprite(雪碧图)

1. 场景：任何用到页面图片的场景 
2. 原理：将多个页面上用到的背景图片合并成一个大的图片在页面中引用 
3. 优势：可以有效的较少请求个数，而且，而不影响开发体验，使用构建插件可以做到对开发者透明。适用于页面图片多且丰富的场景。 
4. 劣势：生成的图片体积较大，减少请求个数同时也增加了图片大小，不合理拆分将不利于并行加载

使用css、svg、canvas或iconfont代替图片

1. 场景：适用于移动端或较高级的浏览器，而且绘制的图案较为简单。
2. 原理：css方式可以用来绘制相对简单的团来代替图片， 一般使用before或者after伪元素来丰富图案的复杂度。  
3. 优势：具有实现简单，图片体积小的特点，可以实现简单的动态效果 
4. 劣势：也受限于css的兼容性特点，绘制复杂图案困难
5. svg的描述和适用场景上文已说明。

canvas代替图片

1.  场景： 需要高性能的图片或动画 原理：适用html5的canvas元素绘制创建图片 
2. 优势：整个就是画2D图形时，页面渲染性能比较高，页面渲染性能受图形复杂度影响小，性能只受图形的分辨率的影响，画出来的图形可以直接保存为 .png 或者 .jpg的图形，适合于画光栅图像或者不规则图形 
3. 劣势：  没有dom操作，必须依赖定时器， 文字渲染性能差，不能添加描述(title属性什么的)，兼容性限制

iconfont是一种web字体来代替图片的解决方案：     

1. 场景：代替页面上色彩单一的图片 
2. 优势：兼容性好，应用广，目前使用也很广泛 
3. 劣势：但是由于字体的颜色设置单一，只能用于代替颜色单一的图片，对于色彩复杂的图片，iconfont处理起来比较困难

图片压缩

1. 场景：在不得不加载图片的前提下，要进一步提升优化效果，只能通过有损或无损压缩来减少图片的大小
2. 原理：对图片进行无损、有损压缩，转为压缩后图片来实现  优势：减少图片加载流量，效果比较明显 
3. 劣势：服务器和浏览器压力增大，而且服务器需要额外的服务支持
4. 工具：  https://tinypng.com/   打开网址后，直接将图片拖入网页中即可

个人总结：

1. 图片上线前需要进行压缩处理。
2. 可以使用雪碧图， 合理切图， 把多个小图合成一个，减少请求数量。
3. 使用cdn，例如七牛。
4. 浏览器对单个域名下的请求并发数是有限制的，如果是图片量很多的页面，需要考虑使用多域名。
5. 尽量少用图片，特别是非内容性质的，能用CSS画就尽量画一下。