为什么要使用css-sprite

什么是Css sprite？

Css sprite：又被称为Css精灵，它是一种性能优化技术，它将多个图像合并到一个通常被称为雪碧图的图像中。

Sprint通过减少呈现网络所需的下载次数来减少网络堵塞。

在一个网站里，每一个图片通常储存在一个单独的文件中，其中的一些图片可能是相关的，或者是同一个图片的变体，例如一个按钮在普通状态和高亮状态下使用的两个不同的图片。当用户打开网络时，他们的浏览器必须一个一个的请求这些图片，这样便可能导致页面呈现较慢。

然而使用CSS Sprite,多个图片被整合到一个精灵图中，用户不需要下载多个文件，而是只需要下载单个文件，当需要特定的图像时，CSS引用这张雪碧图，通过偏移和定义尺寸来达到目的。

应用场景

• 各种小图标：如导航图标，功能按钮，标签。。。
• 相对固定，不会频繁更换的背景修饰图

CSS Sprite 的优点##

• 更流畅的用户体验，因为一旦雪碧图被下载，所有使用雪碧图上面的图片的地方都会得到渲染，而不是一个文件一个文件的加载。
• 减少HTTP请求，将原本需要的多个请求合并为一个，较少服务器压力，从而较少网络堵塞。对于拥有百万级别用户的web服务，雪碧图可能意味着下载数量从一亿变为一百万的区别。
• 减少图片的字节。多次比较，三张图片合并成一张图片之后的字节总是小于这三长图片的总和。
• 更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便。