前端项目中处理图片过多问题

几种文件格式的选用依据

• 颜色丰富的照片，JPG是通用的选择
• 如果需要较通用的动画，GIF是唯一可用的选择
• 如果图片由标准的几何图形组成，或需要使用程序动态控制其显示特效，可以考虑SVG格式
• 如果需要清晰的显示颜色丰富的图片，PNG比较好

前端的图片优化方案

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

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

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

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

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

6.响应式图片
场景：不同终端对同一个图片需求不一样，可以根据终端加载不同的图片来节省没必要的流量
原理：通过picture元素，picturefill或平台判断来为不同终端平台输出不同的图片
优势：减少没必要的图片加载，灵活控制，慢速用户加载小图片不至于加载失败，移动端没必要加载大尺寸图片等，可以通过不同方式兼容所有浏览器
劣势：无法避免图片的加载过程，图片本身没优化。

7.压缩图片
场景：在不得不加载图片的前提下，要进一步提升优化效果，只能通过有损或无损压缩来减少图片的大小，
原理：对图片进行无损、有损压缩或格式转换，转为压缩后图片或压缩率更高的图片格式来实现
优势：减少图片加载流量，效果比较明显
劣势：服务器和浏览器压力增大，而且服务器需要额外的服务支持，格式转换要考虑浏览器的兼容性。