先看一张图:

  1. 一个页面一般会加载多少张css背景图?
  2. 一般会有哪几种类型的雪碧图?
  3. 雪碧图的尺寸该设置多大?如何排列?
  4. 雪碧图在站点中如何分布?

是否曾经烦恼过以上几点问题?带着上面几点问题,我们一起来探讨站点的雪碧图该如何规划比较合理。

首先让我们回忆一下,以前切页面时,会用到哪些类型的素材图?

我努力的想…努力的想啊…大概有:按钮、图标、其它固定尺寸背景图、横竖平铺背景图、横铺背景图、竖铺背景图、左右自适应背景图、上下自适应背景图、颜色鲜艳且尺寸较大的背景图。

好像有点乱,让我们分下类。

按雪碧图使用的作用域可分为:跨项目通用、全局、栏目级、页面级

按雪碧图实现方式可分为:固定尺寸雪碧图、横铺雪碧图、竖铺雪碧图(比较少用)、横竖平铺背景图(比较少用)

 那么,再把我们回想的素材图归下类:

按作用域:这些素材在不同站点都有可能出现在不同作用域中

按实现方式:

  • 固定尺寸雪碧图:按钮、图标、其它固定尺寸背景图、颜色鲜艳且尺寸较大的背景图
  • 横铺雪碧图:横铺背景图、左右自适应背景图(不使用九宫格的实现方式)
  • 竖铺雪碧图:竖铺背景图、上下自适应背景图(不使用九宫格的实现方式)
  • 横竖平铺背景图:这种图不能合成雪碧图,一般用于网页背景花纹,大部分站点比较少出现

最后,从站点的可实现性上考虑,我们该做多少张雪碧图?请看下面这张表:

雪碧图的规划

从表中可以分析出,一个页面的背景图的请求数为:

雪碧图请求数

看到最最多的情况,是不是震惊了?呵呵,其实很少会发生全部用的情况,根据页面实际情况组合使用,请求的个数不会很多,跟第一张图例的背景图请求数相比,规划清晰很多,请求数也减少很多了。

这些图该如何切、如何分布、命名,有没什么讲究?以下是我个人的观点和建议:

  1.  横铺图宽度使用20px, 使用1px宽度横铺会有渲染性能问题,竖铺同理。我就不详细说明了,网上搜索,有相关示例。
  2. 固定尺寸的雪碧图一般可设定为宽度是网页宽度的一半,高度随图片内容增长。因为切图前你可能不确定用多大尺寸,我的见解是,到切图后期你可能不需要单独用一张repeat-x.png的图放左右自适应的背景图,多数情况我们会用2个标签采用滑动门的方式实现左右自适应的背景,而页面宽度的一半即可实现最大宽度的左右自适应背景,那么这时你可以把左右自适应的背景放进这张雪碧图中了
  3. 拼合图片时固定尺寸的图与图之间相隔1像素,避免浏览器放大时,尺寸多计算1像素时可见到临近的图片
  4. 栏目级雪碧图的名称按栏目级目录名命名,页面级雪碧图的名称按页面名称命名,组件类和皮肤类雪碧图同理,其它的可按表中的名称命名,这样方便区分和后期管理
  5. 跨项目通用的组件或某个组件的图片内容较多、修改频繁,可以独立出一张组件图,按组件名命名,方便管理
  6. 如果站点的全局图标比较多,可以考虑将图标单独做一张雪碧图
  7. 建议图标使用一个新标签实现,而不是直接用有内容的那个标签设定图标背景,这样你需要给雪碧图图标与图标之间多留一些间距,另外遇到不同行高的时候,为了让图标背景垂直居中,还需要重新设定background-position,这种实现方式不利纳入全局样式

以上是个人的一些经验和观点,仅供参考,大家对雪碧图的规划有什么好的建议和看法,欢迎留言一起探讨。