css sprites 和 base64

一、css sprites（雪碧图或精灵图）

网页图片处理的一种方式，它允许你将一个页面涉及到的所有零星图片都包含到一张大图中，当访问页面时，载入的图片就不会像以前那样一副一副的慢慢的显示出来了。

原理：使用background-image属性，background-position属性定位某个图片位置，来达到在大图中引用某个部位小图片的效果。

优点：减少网页的http请求，提升网页的加载速度；合成多张小图为大图，能减少字节总数（大图大小<=多张小图大小）

缺点：前期需要处理图片将小图合并多工作量；对于需要经常改变的图片维护起来麻烦

使用场景：一些不需要多变动的小图、表情、标志等；应用于小图片，太大的图片不利于合并，且定位麻烦，一次加载时间过长，导致全部推片出现延迟。

二、base64

是网络上最常见的用于传输8Bit字节代码的编码方式之一，要求把每3个8Bit的字节转换为4个6Bit的字节。就是：将资源原本的二进制形式转成以64个字符基本单位，所组成的一串字符串。

比如图片转换之后，直接以base64形式嵌入文件中。

生成base64编码：webpack中的URL-loader可以转换，或者一些在线工具

优点：base64图片会随着HTML或者css一起下载到浏览器，减少了http请求。可以避免跨域问题

缺点：老版本的IE浏览器不兼容；体积会比原来的图片大一点；使用过多的base64图片会使得css过大，不利于加载

应用场景：用于小的图片几k的，用于处理雪碧图不利于处理的小图片。