前端图片优化介绍

http://www.cnblogs.com/fullhouse/archive/2012/02/20/2360545.html

随着前端页面越来越复杂，尤其是一些社区型的页面中，图片成了页面中不可或缺的资源，并且随着产品功能的叠加图片大小越来越多。以下是几个网站的图片所占的比重。

由于图片是二进制文件，并不能像js、css、html那些源代码文件一样可以通过gzip压缩大大减小文件的大小。所以图片优化主要是选择合适的图片格式，在不降低图片质量的情况下去掉图片里的元数据信息。

常用的一些优化方案

目前图片优化使用比较多的主要是下面几种方式：

这些优化方案虽然结果都能将图片优化，但需要比较多的人工操作。如使用smush，先要上传文件，优化完了后还要下载文件。在项目时间限制或者改动很频繁的情况下很多时候就把图片优化这一非常重要的优化步骤给忽略了。

那如何尽量减少人工操作带来的麻烦和不确定因素呢？

如果在前端模块编译的时候，有图片自动优化的功能，上线前模块编译的时候得到就是优化后的图片，开发人员完全不用管图片优化了，但又不影响线上图片优化的结果。

如何结合一些工具做到图片优化完全自动化呢？先要考虑目前开发中经常用到的图片格式。

开发中经常用到的图片格式主要有如下几种：

对于全透明的png，ie6要通过下面的filter进行hack。

对于alpha透明的png，ie6下必须使用png24，目前还没有找到ie6下hack alpha透明png8的方式，如果有哪位大拿对这个有解决方案，麻烦告诉我。

经过筛选和优化原则要满足上面的图片格式的条件，选择的软件如下：

需要安装imagmagick, gifsicle, jpegtran, pngcrush，

图片优化

然后执行sh image-optizimation.sh imgdir 就可以将imgdir目录下的图片进行优化，上线的时候只要拷贝优化后的图片就可以了。

以下是前端一个模块的优化前后的文件大小比较:

优化后，图片大小减小了66.6K，优化率达到35.2%。

从数据中可以发现，png图片优化还是非常多的，也是优化准则里尽量使用png图片的原因。

除了上面用到的图片优化工具，还有其他很多可以优化图片的工具。但各种各样的小问题，最终并没有使用它们。