一、sprite精灵图是什么
在网页开发过程中,在网页中经常会用到一些小图标,虽然是小图标但是每个小图标都会发起一个http请求。如果整个网站使用很多这种小图标,那就会产生很多http请求。这个无疑会增加网站的负担,降低网站的性能。CSS sprite技术的出现解决了这个问题,通过将很多个这种小图标融合到一张大的图片中,再通过css的background-image
,background- repeat
,background-position
的组合进行背景定位,达到和之前http请求多张小图标一样的效果。极大的提高了网站性能。
二、使用场景
就像上面说的,sprite精灵图是整合多个小图标,对于尺寸较大的图片不推荐使用。本身尺寸较大的图片整合到一起后会使生成的图片非常大,会造成图片加载时间变长,影响性能。
三、优缺点
优点
减少http请求,提高网站性能。
缺点
- 需使用ps等工具制作大图。
- 额外的css样式,增加了开发工作量。
- 对于合成的大图标在使用css布局时需精确定位到每个小图标的位置,会比较繁琐。
- 当后期如果有小图标变更或者新增需要重新生成大图片,css式样可能需要重新调整。
以上的这些缺点可以通过工具解决。