该技术加快了网页的响应速度。加速的关键不是降低质量，而是减少数量。传统的图像切割讲究精度。图像尺寸越小越好，权重越小越好。其实大小并不重要，计算机都是以字节来计算的。每次客户端显示图像时，都会向服务器发送请求。因此，图片越多，请求就越多，延迟的可能性就越大。

什么是雪碧图？

精灵图片是网页中需要的很多小图片合并成一张图片，那么这张图片就称为精灵图片，例如：

它可以用于合并动画帧等用途，最常用于网页游戏。

如何毫不费力的制作雪碧图并加以使用？

前往Css Sprites在线工具地址：https://www.toptal.com/developers/css/sprite-generator

将需要的图片导入到在线web工具中，会自动生成精灵图，如下图

可以看到在线工具自动生成了精灵图片，可以点击下载，然后还生成了css样式。如果您了解基本的网页，您应该能够自然地使用它。

我们下载生成的精灵图片，得到如图：

使用后的效果案例：

案例来自：http://mc.163.com/index.html 我的世界官网

我没有自己开发它，我只是用这个作为例子。

Css Sprite原理：

CSS Sprites实际上是将网页中的一些背景图片整合到一个图片文件中，然后利用CSS“background-image”、“background-repeat”和“background-position”的组合来定位背景。 Position可以使用数字来准确定位背景图像。

雪碧图使用总结

优点

使用CSS Sprites可以大大减少网页的http请求，从而大大提高页面的性能。这也是CSS Sprites的最大优点，也是它被广泛传播和应用的主要原因；

CSS Sprites 可以减少图像的字节数。我多次比较了将三张图像合并为一张图像的字节数，并且字节总是小于这三张图像的字节总和。

它解决了网页设计师对图片命名的问题。他们只需要说出一组图片的名称即可。不需要对每一个小元素都进行命名，从而提高了网页制作的效率。