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.cssphp jdcloud-sprite.php $< -2x -group -sprite icon/icon@2x.pngclean-sprite:-rm -rf ../server/m2/icon.out.css ../server/m2/icon/icon@2x-*.png

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

H5移动应用的发布优化（四）图片优化相关推荐

前端每周清单第 34 期：Vue 现状盘点与 3.0 展望，React 代码迁移与优化，图片优化详论
新闻热点国内国外,前端最新动态 Microsoft 宣发面向 iOS 与 Android 平台的 Microsoft Edge:为了保证 Windows 用户各平台使用体验的一致性,Microsof ...
前端每周清单第 34 期：Vue 现状盘点与 3.0 展望，React 代码迁移与优化，图片优化详论... 1
前端每周清单第 34 期:Vue 现状盘点与 3.0 展望,React 代码迁移与优化,图片优化详论作者:王下邀月熊编辑:徐川前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解 ...
MySQL优化四（优化表结构）
MySQL优化四(优化表结构) MySQL优化四(优化表) 昨晚吃吃喝喝的太多,熬夜到凌晨二点.今天头发杂乱,脸庞憔悴,像是吸毒了.下午去买衣服,肚子一看大了不少.奈何女朋友还没有一个,就已经发福了. ...
前端性能优化（图片优化）
从输入URL到页面加载完成的过程:首先通过DNS(域名解析)把URL解析为对应的IP地址,然后与该IP地址确定的服务器建立起TCP网络连接.随后向服务器发送HTTP请求,服务器处理完HTTP请求后把目 ...
网站SEO优化之图片优化方法
网站SEO优化之图片优化方法网站中图片的优化是很多站长都比较容易忽略的细节,我们知道,对于搜索引擎目前的技术来讲,是无法识别图片的内容信息的,但为了提升用户体验,我们在进行文章或者网站布局时,必须进 ...
前端性能优化之图片优化
图片优化的价值为什么要做图片优化?图片优化的收益有多大? Google官方的最佳实践中关于图片优化有下面这样一段描述: 对于网页来说,在所下载的字节数中,图片往往会占很大比例.因此,优化图片通常可以 ...
Web 性能优化：图片优化让网站大小减少 62%
摘要: 压缩各种格式的图片. 原文:Web 性能优化: 图片优化让网站大小减少 62% 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 这是 Web 性能优化的第二篇,上一篇在下面看点 ...
html的细节优化,网站图片优化细节放送（seo技巧）
做seo的老铁们难免会遇到网站图片优化处理不到位,大多数的套话都是围绕着数据来说的,其实这也没什么,重点是我们的细节处理不到位就算数据正确也不好办,那么接下来让凯夜seo为您放送一些图片优化的细节,规 ...
前端每周清单第 34 期：Vue 现状盘点与 3.0 展望，React 代码迁移与优化，图片优化详论...
作者:王下邀月熊编辑:徐川前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点:分为新闻热点.开发教程.工程实践.深度阅读.开源项目.巅峰人生等栏目.欢迎关注[前端之巅 ...
Android内存优化之图片优化
关于图片优化,大概如下为什么要进行图片优化相信大概刚开始学习Android的时候有过图片过大而直接报错的情况,下面简单介绍一下OOM问题,Android支持的图片格式及图片优化的几种方式什么是O ...

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

图片优化 - 制作精灵图

H5移动应用的发布优化（四）图片优化相关推荐

最新文章

热门文章