前端图片优化（三）：css sprite精灵图

博客链接

一、sprite精灵图是什么

在网页开发过程中，在网页中经常会用到一些小图标，虽然是小图标但是每个小图标都会发起一个http请求。如果整个网站使用很多这种小图标，那就会产生很多http请求。这个无疑会增加网站的负担，降低网站的性能。CSS sprite技术的出现解决了这个问题，通过将很多个这种小图标融合到一张大的图片中，再通过css的background-image,background- repeat,background-position的组合进行背景定位，达到和之前http请求多张小图标一样的效果。极大的提高了网站性能。

二、使用场景

就像上面说的，sprite精灵图是整合多个小图标，对于尺寸较大的图片不推荐使用。本身尺寸较大的图片整合到一起后会使生成的图片非常大，会造成图片加载时间变长，影响性能。

三、优缺点

优点

减少http请求，提高网站性能。

缺点

1. 需使用ps等工具制作大图。
2. 额外的css样式，增加了开发工作量。
3. 对于合成的大图标在使用css布局时需精确定位到每个小图标的位置，会比较繁琐。
4. 当后期如果有小图标变更或者新增需要重新生成大图片，css式样可能需要重新调整。

以上的这些缺点可以通过工具解决。