[转载]前端管窥:图片Sprite管理

[转载]前端管窥:图片Sprite管理 – BENNY CHIA! – 博客园.


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对今后维护是多么重要的事情呵。下课~

赞(0) 打赏
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏