将一个页面中涉及的所有图片合成到一张大图上去,然后通过css的background-image,background-repeat,background-position等属性去定位背景图片
优点:
减少http的请求次数
图片合并到一张上,只需要请求一次,减少了请求次数,有利于性能优化
减少图片字节数
合并到一张大图的字节数总是小于3张图片的字节总和
缺点:
要把所有图片有序的、合理的合成一张图,还要留有足够的空间,而在宽屏及高分辨率下的自适应页面,如果背景不够宽,很容易出现背景断裂;
在开发时候需要借助photoshop或其他工具来对每个背景单元测量其准确的位置。
在维护的时候比较麻烦,当一个图片做改动的时候,就需要重新改这张合成的大图,如果在原来的地方放不下,又只能(最好)往下加图片,这样图片的字节就增加了,还要改动CSS。