版权声明：本文为博主原创文章，转载时请注明出处。 https://blog.csdn.net/i_dont_know_a/article/details/82019689
前端新手在入门的时候，一定会听到一个名词，叫做“雪碧图”，什么是雪碧图呢？
注意：这个雪碧跟那个饮料雪碧不是一个玩意儿。。。
▍含义
也叫CSS sprites精灵图，通俗来说就是有很多小图标合成的一张大的图片就做雪碧图。
▍为什么要用雪碧图
在网页中使用雪碧图的主要目的是为了优化页面性能，因为页面中的每一张图片都需要提一次HTTP请求过去，当图片过多的时候会使得加载量过大，然后给页面的加载造成负担，甚至出现卡顿的现象。
▍什么样的图片适合使用雪碧图
一般来说非常小的图标是要合成雪碧图的，例如下图这种：
有一些大图片或者是动态加载的图片是不能使用雪碧图的，比如一些网站上面的很大的公告图，或者是一些经常更换的图片是不适合使用雪碧图的。
▍雪碧图实现原理
雪碧图的原理就是使用background-position和background-size来控制图片显示的区域。
▍优势与不足
优势是减少了http请求的次数，缓解了请求压力；其缺陷在于小图标在高清屏幕上可能会失真，另外频繁使用定位会占用比较多的CPU。
▍补充
有观点说，在制作雪碧图的时候，将颜色相近的小图片放在一起会使得整张图片所占用的内存小一些。