又名雪碧图,一种网页图片应用处理方式。通俗讲就是将页面涉及到的所有零星图片都包含到一张大图中去,再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位。
CSS Sprites简介
加速的关键,不是降低质量,而是减少个数。传统切图讲究精细,图片规格越小越好,重量越小越好,其实规格大小无所谓,计算机统一都按byte计算。客户端每显示一张图片都会向服务器发送请求。所以,图片越多请求次数越多,造成延迟的可能性也就越大。(百度百科)
优点
1. CSS Sprites能很好地减少网页的http请求,从而大大的提高页面的性能;
2. CSS Sprites能减少图片的字节;(3张图片合并成1张图片的字节总是小于这3张图片的字节总和);
3. CSS Sprites解决了网页设计师在图片命名上的困扰,只需对一张集合的图片命名,不需要对每一个小图片进行命名,从而提高了网页制作效率;
4. CSS Sprites只需要修改一张或少张图片的颜色或样式来改变整个网页的风格。
缺点
1. 图片合并麻烦:图片合并时,需要把多张图片有序的合理的合并成一张图片,并留好足够的空间防止版块出现不必要的背景。
2. 图片适应性差:在高分辨的屏幕下自适应页面,若图片不够宽会出现背景断裂。
3. 图片定位繁琐:开发时需要通过工具测量计算每个背景单元的精确位置。
4. 可维护性差:页面背景需要少许改动,可能要修改部分或整张已合并的图片,进而要改动css。在避免改动图片的前提下,又只能(最好)往下追加图片,但这样增加了图片字节。