使用雪碧图Css Sprite精灵 | 加速网页响应速度

什么是CSS Sprite精灵？

是用于前端的一种图片应用技术，通常情况，我们的开发的网页或许有很多张图片，假如在一个页面上有50多张小图片，这意味着浏览器要逐个下载50张图片。Css Sprite它允许你将一个页面涉及到的所有零星图片都包含到一张图中，这样一来，当访问页面时，就只需要下载1张图片了，这显然大大减低了服务器请求压力。

这个技术加速网页响应速度，加速的关键，不是降低质量，而是减少个数。传统切图讲究精细，图片规格越小越好，重量越小越好，其实规格大小无所谓，计算机统一都按byte计算。客户端每显示一张图片都会向服务器发送请求。所以，图片越多请求次数越多，造成延迟的可能性也就越大。

---

什么是雪碧图？

雪碧图就是许多在网页中需要的小图片被合并到了一张图片当中，那么这张图片就叫雪碧图，例如:

可以用来合并动画帧等用途，最多常在网页游戏中应用

---

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

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

将需要的图片导入到在线网页工具中，就会自动生成雪碧图，如下图

可以看到在线工具自动生成了雪碧图你可以点击下载，然后还生成了css样式，会基本网页的你就应该自然会用了

我们下载生成的雪碧图得到如图:

---

使用后的效果案例：

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

并非本人开发，我只是拿这个作为例子。

---

Css Sprite原理：

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。

---

雪碧图使用总结

优点

• 利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；

• CSS Sprites能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。

• 解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。

• 更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便。

假如不使用这个在线生成工具，那么将是及其的麻烦，当然这也是全职开发者必备的工具