想要在页面展现一些图标，传统的方式使用的就是图片，但是使用图片存在许多的弊端，主要表现是下面三个方面 1. 增加了页面的请求：我们知道每张图片都是一个请求，所以有些网站为了提高性能会使用雪碧图，把网页中比较小的一些小图片整合到一张图片文件中，再利用CSS的background-image属性插入图片，然后利用background-position属性对图片所需要的部分进行精确定位。但是它有个问题就是，雪碧图比较适合固定功能的网站。而我们的网站每隔几天就要加一个新的功能，添加和替换雪碧图是个很繁琐的工作。而且目前我们公司网站设计全部使用sktech，我都好久没打开过ps了，对于sketch来说，雪碧图位置的标识也是个挺麻烦的事情。 2. 图片的大小和颜色不容易改变：background-size是一个CSS3的属性,ie8是不支持的，所以不能够使用它来设置图片的大小，有的时候为了更加清晰，设计会给我一个二倍图，那我想让他在IE8下面正常的尺寸展示，就只能使用img标签，这种形式不仅加重了请求，而且对雪碧图很不友好。其次是颜色，这些icon 有很多时候，想要hover上去有个效果，目前必须准备两张图片，如果想改变成多个颜色，就要准备多个图片。 3. 最后一个也是近些年面临的一个问题，就是苹果的屏幕清晰度越来越高，在高像素下面，传统的位图会出现马赛克，不够清晰，为了调高清晰度，图片越来越大。 ### 小图片base64 在应用开发中有时会把一些图片转成Base64编码放在代码里，这会使数据量增大30%左右，所以这种方式不适合较大图片。而对于小图标来说，增加的绝对数据量并不大，却能减少一个http请求，也不失为一种优化方案。不过，组件库较普通应用对数据量更为敏感，这种方式不是上策。 ### css sprite（雪碧图） 另一种处理小图标的经典方案是雪碧图（CSS Sprite），但这种基于精准位置信息的图标引用方式在移动端基于rem的布局中并不是那么受欢迎，因为rem布局自身就难以精确，如果用于组件库也会给按需引用带来一些不便。 对于小图标，在移动端更需要的是矢量方案，天然适配各种像素密度的屏幕。