前端优化之图片f优化自动化.docVIP

前端图片优化介绍 随着前端页面越来越复杂，尤其是一些社区型的页面中，图片成了页面中不可或缺的资源，并且随着产品功能的叠加图片大小越来越多。以下是几个网站的图片所占的比重。 由于图片是二进制文件，并不能像js、css、html那些源代码文件一样可以通过gzip压缩大大减小文件的大小。所以图片优化主要是选择合适的图片格式，在不降低图片质量的情况下去掉图片里的元数据信息。 常用的一些优化方案 目前图片优化使用比较多的主要是下面几种方式： 选择合适的图片格式，如：png代替gif，尽量使用png8 png使用pngout优化，jpg使用jpgtran 通过yahoo的smush进行 通过google的page speed插件进行 这些优化方案虽然结果都能将图片优化，但需要比较多的人工操作。如使用smush，先要上传文件，优化完了后还要下载文件。在项目时间限制或者改动很频繁的情况下很多时候就把图片优化这一非常重要的优化步骤给忽略了。 那如何尽量减少人工操作带来的麻烦和不确定因素呢？ 如果在前端模块编译的时候，有图片自动优化的功能，上线前模块编译的时候得到就是优化后的图片，开发人员完全不用管图片优化了，但又不影响线上图片优化的结果。 如何结合一些工具做到图片优化完全自动化呢？先要考虑目前开发中经常用到的图片格式。 图片格式 开发中经常用到的图片格式主要有如下几种： 不透明的gif，全透