对于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。