雪碧图最佳实践

对于web开发人员来说，经常会处理网站上的小图标。为了减少请求次数和提高加载速度，把小图标合并成一张大图，然后利用相关技术呈现需要的图标部分。目前市面上最常用的小图标解决方案有以下两种：

• 图标字体 （svg sprite)
• 雪碧图（css sprite）

图标字体，不作为今天的讨论范围。今天主要探讨下雪碧图的基本原理和常见的几种实现方案，并最后给出笔者认为比较高效的雪碧图开发流程。

---

什么是雪碧图

雪碧图是一种css图像合成技术，通过css的background-image（为元素设置背景图像）和background-position（设置背景图像的起始位置）属性显示需要显示的图片部分。
假如我们把四个图标在Photoshop里面排列成下图所示并导出成一张合并的大图（icons.png).

那么通过css样式定位的时候的坐标系是:外层块元素的左上角为（0，0）点，向右是x轴正向，向下是y轴正向。由于background-position 的作用是设置背景图像的起始位置，默认起始坐标是（0，0），如果想要只显示图中从左边起第二个绿色的图标，那么我们需要把整个背景图片向左偏移60像素，并设置整个块元素的尺寸为绿色图标大小,关键样式如下：

background-image: url("icons.png");
background-position: -60px 0px;
width:50px;
height:50px;

由此可见，实现雪碧图的关键有两个：

• 打包成合并的大图；
• 根据每个小图标在大图的位置形成css的坐标和尺寸的配置文件；

下面就来探讨下实现以上技术的几种方案。

---

方案一：Photoshop手动拼图

如下图所示，我们把所有需要打包的图标拖入Photoshop编辑器，然后手动排版好。利用标尺和参考线获取每个图标的坐标和大小，也可以选中具体图标图层，使用快捷键ctrl+T弹出信息面板查看图层信息。最后再根据坐标信息编写对应的样式文件。
合并的大图文件（icons.png)

对应的样式文件（icons.css)如下：

.icon1{
    background-image: url("icons.png");
    background-position: 0px 0px;
    width:50px;
    height:50px;
}
.icon2{
    background-image: url("icons.png");
    background-position: -60px 0px;
    width:50px;
    height:50px;
}

.icon_mobile{
    background-image: url("icons.png");
    background-position: -114px -10px;
    width:26px;
    height:32px;
}

.icon_pc{
    background-image: url("icons.png");
    background-position: -156px -10px;
    width:32px;
    height:30px;
}

优点

• 使用psd文件，可重复编辑图标；
• 手写的css文件可以很灵活的加入任意其他属性；
• 手写可以支持任意的样式类型（css、less、sass、scss)；

缺点

• 增加，删除，更新图标麻烦；
• 手动获取坐标效率低下，不准确；
• 导出合并大图的尺寸有很多空白区域，并不是最优拼合；
• 对开发者的ps使用有一定要求；
• 导出的合并大图图片质量控制不够灵活（压缩等）；

---

方案二：TexturePacker打包+less\sass\scss混合+koala（推荐）

工具介绍

TexturePacker 是一个优秀的纹理打包工具，可以根据散图打包成大图并生成对应的小图标坐标尺寸等配置信息。现在被很多游戏开发团队广泛使用，用于构建丰富的逐帧动画角色和特效动画等。这个工具功能很全很强大，这儿简单介绍下它的几个特点：

• 支持的框架和导出的格式丰富（支持css、less、sass及其他格式）；
• 强大的自定义格式导出（默认提供的格式不够用可以自己造）；
• 导出图片的格式丰富（可根据需求选择更适合的图片格式，比如RGBA4444格式比RGBA8888格式的图片体积小接近一半）；
• 支持命令行操作（方便和其他自动打包流程集成）；

Koala 是一个前端预处理器语言图形编译工具，支持Less、Sass、Compass、CoffeeScript，帮助web开发者更高效地使用它们进行开发。跨平台运行，完美兼容windows、linux、mac。

TexturePacker雪碧图制作

为了方便说明，我们新建一个简单的Html项目SpriteSheetDemo作为演示（以下说到的相对目录都是相对于项目SpriteSheetDemo的根目录而言） 其目录结构如下：

并默认认为你已经安装好了上面的两个工具：TexturePacker和koala。