关于雪碧图

前端新手在入门的时候，一定会听到一个名词，叫做“雪碧图”，什么是雪碧图呢？

 

注意：这个雪碧跟那个饮料雪碧不是一个玩意儿。。。

 

▍含义

也叫CSS sprites精灵图，通俗来说就是有很多小图标合成的一张大的图片就做雪碧图。

 

▍为什么要用雪碧图

在网页中使用雪碧图的主要目的是为了优化页面性能，因为页面中的每一张图片都需要提一次HTTP请求过去，当图片过多的时候会使得加载量过大，然后给页面的加载造成负担，甚至出现卡顿的现象。

 

▍什么样的图片适合使用雪碧图

一般来说非常小的图标是要合成雪碧图的，例如下图这种：

有一些大图片或者是动态加载的图片是不能使用雪碧图的，比如一些网站上面的很大的公告图，或者是一些经常更换的图片是不适合使用雪碧图的。

 

▍雪碧图实现原理

雪碧图的原理就是使用background-position和background-size来控制图片显示的区域。

 

▍优势与不足

优势是减少了http请求的次数，缓解了请求压力；其缺陷在于小图标在高清屏幕上可能会失真，另外频繁使用定位会占用比较多的CPU。

 

▍补充

有观点说，在制作雪碧图的时候，将颜色相近的小图片放在一起会使得整张图片所占用的内存小一些。