H5移动应用的发布优化（四）图片优化

H5移动应用常常是一个手机网页应用，或被包装成一个安卓或苹果的应用程序。
在开发完成后，将本地开发版本上线时常常需要优化，主要的优化思路是：

• 减少交互次数，即减少对服务器的访问，主要手段有缓存优化、文件合并等。
• 减少交互数据，主要手段有文件最小化（minify）、WEB服务器配置gzip压缩等。

图片优化 - 制作精灵图

图片优化有以下思路：

• 小图片合并。减小对服务器的访问次数，加快图片显示，尤其是各种小图标。
• 图片在用到时再加载，尽量不要打开应用就加载。例如逻辑页中的图片，应该等逻辑页显示时才去加载。一般由应用框架保证，如筋斗云框架中，天然支持逻辑页中图片的按需加载。
• 使用合理的图片格式，控制图片大小。例如使用webp格式图片等，不在本文讨论范围内。

本文主要介绍小图片合并的方法，也就是常说的精灵图（sprite）的制作。

定义一个icon.css文件，包含用到的小图标如下：

.icon-back {    background-image: url(icon/16/back.png);}.icon-menu {    background-image: url(icon/16/menu.png);}.icon-add {    background-image: url(icon/16/add.png);}...

我们先将所用到的图标合并成一列竖图，每一行一个图标，假定生成的图片为icon-16.png。
根据icon.css生成icon.out.css文件，修改背景图的位置属性如下：

icon.out.css:

.icon-back {    background-image: url(icon/icon-16.png); background-size: 16px !important; background-position: 0 0px !important;}.icon-menu {    background-image: url(icon/icon-16.png); background-size: 16px !important; background-position: 0 -16px !important;}.icon-add {    background-image: url(icon/icon-16.png); background-size: 16px !important; background-position: 0 -32px !important;}...

这时，在H5应用中直接使用icon.out.css即可。
上面过程可以使用筋斗云工具jdcloud-sprite完成。注意：使用前应下载安装imagemagick软件，用于图片合并。

php jdcloud-sprite.php icon.css

这样便可生成icon.out.css以及合并后的图片。此外，它可以支持生成2倍图、按图片宽度分组生成的选项，具体可参考筋斗云工具文档(doc/jdcloud-sprite.html)。

实际在使用筋斗云移动框架的项目中，不用直接手工调用上述命令，而是在tool/Makefile中设置好命令：

sprite: ../server/m2/icon.out.css../server/m2/icon.out.css: ../server/m2/icon.css    php jdcloud-sprite.php $< -2x -group -sprite icon/[e-mail]-sprite:    -rm -rf ../server/m2/icon.out.css ../server/m2/icon/icon@2x-*.png

设置好后，直接运行tool/make-sprite.sh即可生成精灵图和相应的css文件。