网站性能优化之css sprites

什么是css sprites?

打开一些网站能够看到每张图片相应须要请求一次后台，以下图：

http请求是比较消耗资源的，当网站中存在较多的http请求时，性能就会相应的下降，加载就会变慢，甚至卡住。
减小http请求能提升web性能，css sprites就是经过合并多张图片达到减小请求目的的一种技术。

css sprites工做原理

将多张图片合并成一张大的图片，而后利用css中的background-image,background-repeat以及background-position来实现。
background-image用于指定容器的背景图片，好比background-image:url(xxx.png);,
background-repeat用于指定是否及如何重复背景图像，好比background-repeat:no-repeat;,
最重要的是background-position,用于控制咱们想要显示的图片位置，好比background-position:6px 6px;表示背景图片的左上角将相对容器元素的左上角向右以及向下移动6px。

适用场景

1.通常只能使用到固定大小的盒子（box）里，这样才可以遮挡住不该该看到的部分

2.须要经过下降http请求数完成网页加速。

3.网页中含有大量小图标。或者，某些图标通用性很强。

4.网页中有须要预载的图片。主要是a与a:hover背景图这种关系的。若是a与a:hover的背景图分别加载，那么，就会出现用户鼠标移到某个按钮上，按钮的背景忽然消失再出来，产生“闪烁”，若是按钮文字色与大背景相同或相近，就更囧了，有可能让人产生按钮“消失”了的错觉。

注意事项

1 把几乎不会改变的通用性很强的图标或者其余图片合并最好，能够避免每次更新图片都要从新合并图片
2 利用一些自动工具生成CSS代码，省去本身用ps找偏移量的工做

推荐工具

css sprite tools(客户端工具)，此工具生成的部分代码以下，选择器的名字就是你的小图片的文件名：

.pic1{background:url(../imgs/allbgs.png) no-repeat 0px 0px;width:6px;padding-top:6px;}
.pic2{background:url(../imgs/allbgs.png) no-repeat -6px 0px;width:6px;padding-top:6px;}
.pic3{background:url(../imgs/allbgs.png) no-repeat -12px 0px;width:16px;padding-top:13px;}
.pic4{background:url(../imgs/allbgs.png) no-repeat -28px 0px;width:15px;padding-top:17px;}

测试结果

jsfiddle地址

一些文章

CSS Sprites（截取部分图片）是怎么工做的

csszengarden

CSS Sprites: Image Slicing’s Kiss of Death

CSS Sprites的概念、原理、适用范围和优缺点

在线工具

在线工具sprite-creator