精灵图和 base64 如何选择？

Css Sprites： 介绍： Css Sprites（雪碧图或 css 精灵），是网页图片处理的一种方式，它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。

原理： 将许多的小图片整合到一张大图片中，利用 css 中的 background-image 属性，background-position 属性定位某个图片位置，来达到在大图片中引用某个部位的小图片的效果。

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

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

base64： 介绍： base64 是网络上最常见的用于传输 8Bit 字节代码的编码方式之一，要求把每三个 8Bit 的字节转换为四个 6Bit 的字节，Base64 是网络上最常见的用于传输 8Bit 字节代码的编码方式之一。

通俗点讲：将资源原本二进制形式转成以 64 个字符基本单位，所组成的一串字符串。 比如一张图片转成 base64 编码后就像这样，图片直接以 base64 形式嵌入文件中（很长没截完）：

css_007

生成 base64 编码： 图片生成 base64 可以用一些工具，如在线工具，但在项目中这样一个图片这样生成是挺繁琐。 特别说下，webpack 中的 url-loader 可以完成这个工作，可以对限制大小的图片进行 base64 的转换，非常方便。

优点： base64 的图片会随着 html 或者 css 一起下载到浏览器,减少了请求. 可避免跨域问题

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

适用场景： 应用于小的图片几 k 的，太大的图片会转换后的大小太大，得不偿失。 用于一些 css sprites 不利处理的小图片，如一些可以通过 background-repeat 平铺来做成背景的图片