css精灵（雪碧图）

 css sprites是指把网页中的很多的小图片（很多图标文件）做成按规律排列的一张大图上，在显示的时候通过background-image、background-position显示图片特定部分达到和分散的一张张小图片一样的效果。

优点：

a.提高页面的下载速度：页面中的图片文件等外部文件都要单独下载，图片文件时另外进程来下载的，并且不同的浏览器会对一次下载图片的数量有所限制，要是页面图片比较多，这样就会不断要下载。

b：减少HTTP请求，提高网站性能，每个图片下载都是一次HTTP请求，而把每个小图片几种到一张图片上，这样只需要一个HTTP请求响应，在现在网速条件下不超过200K的图片，下载速度都是差不多的，下载一次之后无论是该页面还是站点其他页面使用包含在这张大图上的图片时就可以使用缓存，不会带来反复下载的开销，所以只有一个HTTP请求响应。

 c：省流量：因为HTTP请求响应会再客户端和服务器端交互HTTP报文，所以下载一个图片所用的流量不只是图片大小，每个HTTP报文会占用网络流量。

d：如果我们使用的图标内容是透明的，而边框是白色（和网站的背景颜色相同），我们可以通过简单的css来使整个网站的icon改变，这个在换theme的时候很贴心。

实现方法：

使用backgroung-position和background-img属性