前端管窥：图片Sprite管理

Sprite是每个前端工程师处理图片的基本技能。有些工程师昵称这项技能为“雪碧”，可见大家对这个东西的关爱程度。所谓图片的sprite技术，就是把网站用到的小图片整合在一张比较大的“地图”上，然后在页面容器里对这张“地图”采用背景图片定位的方式来调用此处需要用到的那张小图片的位置。

Sprite的优势：

使用图片sprite技术的优势有三：一，减少针对图片的http请求数，如果使用许多小图片的方式来组织页面，势必会造成加载页面的时候对每个图片文件形成一个http请求，如果使用sprite技术，则页面只需要对这些小图片组成的大图进行一次请求即可，减小了网络负担。二，减小图片大小。使用sprite生成的大图其文件大小比其组成部分的小图片大小的总和要小，图片越小，下载越快。且图片下载后所有在大图上的图片同时刷新出来，而不是每个图片分别刷新，网页的视觉整体性要好。三，便于图片管理。网页需要的各种尺寸的icon图标和按钮图片等以整齐的顺序排列，便于图片修改和管理。

Sprite的劣势：

sprite的好处就是上面那些，不好之处也是有的，比如，如果你需要一张背景透明的图片，众所周知IE6对png图片的支持不好，处理img图片尚有解决方法，处理背景平铺也有对策，但是处理一个sprite定位的背景图片现在还没有好的解决方案。有些方案虽然能解决，但是对客户端造成的负担可以让你得不偿失。

这让我想到table和div之间的争论，有人做页面重构工作，将一切table均使用div代替，事实是显示数据的表格还是table效果最好，非但数据表格，有些页面布局能够使用table简单解决，就不必把问题复杂化。facebook和人人的弹窗就是用table写的，效果很好。

一些经验和建议：

现在在工作中，sprite图片越来越大，有的项目中sprite图片居然超过1000px，这时我们就得去看看，这些组成sprite的小图片组织得是否合理。举例来看，google的logo图片下方充满了小图标，整个google搜索页只用了这么一张28k大小的图片：

这么做对于google这种sprite基本不变，同时十分重视每1k图片大小的优化的网站来说，这么做有他的道理。但是在一般网站来说，我不建议采用google的sprite排列方式，尤其不建议把logo做到sprite里。出于经常维护的需要，我们需要更好的图片维护，sprite最好能够有一种规则，让你对其中每一个图标的位置都清清楚楚。

比如，利用PS的网格工具做参考，或者在PSD文件中建立一个框架图层，将网站各种尺寸的图标放在不同的横行，每个图标之间留出同样的尺寸，如果是16px的icon，可以在每个16px的空间右边空出5px的距离放下一个图标，这样的话两个图标左边缘的距离就是21px，如果sprite左边第一个icon的background-position为0 0的话，第10个icon的background-position就是-210px 0。这样你可以精确地知道每个图标的位置，今后调用图标只需要心算一下即可。

如果sprite图片的第一行放了16px的icon，第二行就可以用来安放24px的icon。如果sprite图片的宽度过大，也会对图片管理形成不便，这时候就可以把头一行的icon换行，放在24px的icon下方即可。

工作中还会碰到一种情况，做好的sprite图，优化得不是很好，出现了大的空隙，同时还有好多小图标放的地方不合适，想把这些图标移到空隙里面去，这种工作岂不是要一个一个计算图标位置，麻烦可大了。我在这里给大家介绍个经验，开着css文件的同时开着excel，可以给你很大帮助。

如图，icon图标已经按照上面说的方法每21px安放一个，每个的位置我都很清楚，第一个图标的定位是-735px 0，第二个图标的定位是-756px 0。需要移动的图标在同一横行，图标数是23个。然后我把需要调整的icon整行剪切到图中另外一个位置，记下第一个图标在新位置的定位-63px -242px，第二个图标在新位置的定位是-84px -242px。于是把这两组数按图写进excel表里，并向下拉出共23行的等差数列，23个图标新旧位置的对应关系便出来了。然后在css中查找原来的值并替换新值即可。如果找不到原来的值，说不定是原来在工作中为了处理特殊效果改变了正常的定位，后面做出“无”标记，单独处理就可以了。

总结

所以说，写好一个sprite对今后维护是多么重要的事情呵。下课~