前端优化之图片优化自动化

  1. 云栖社区>
  2. 博客>
  3. 正文

前端优化之图片优化自动化

技术小美 2017-11-14 15:48:00 浏览544
展开阅读全文

前端图片优化介绍

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

 

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

常用的一些优化方案

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

  1. 选择合适的图片格式,如:png代替gif,尽量使用png8
  2. png使用pngout优化,jpg使用jpgtran
  3. 通过yahoo的smush进行
  4. 通过google的page speed插件进行

 

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

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

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

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

图片格式

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

  1. 不透明的gif,全透明的gif,动画gif
  2. 不透明的png,全透明的png,半透明(alpha透明)的png
  3. jpg图片

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

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

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

  1. 动画gif使用gifsicle
  2. png使用pngcrush
  3. jpeg使用jpegtran

软件安装

需要安装imagmagick, gifsicle, jpegtran, pngcrush,安装脚本如下:

 
 

  1.  
  2. 01 #!/bin/sh    
  3.  
  4. 02 #安装imagemagick    
  5.  
  6. 03 wget ftp://ftp.kddlabs.co.jp/graphics/ImageMagick/ImageMagick-6.6.4-10.tar.gz    
  7.  
  8. 04 tar zxvf ImageMagick-6.6.4-10.tar.gz    
  9.  
  10. 05 cd ImageMagick-6.6.4-10    
  11.  
  12. 06 ./configure    
  13.  
  14. 07 make   
  15.  
  16. 08 make install   
  17.  
  18. 09 cd ../    
  19.  
  20. 10 #安装gifsicle    
  21.  
  22. 11 wget http://www.lcdf.org/gifsicle/gifsicle-1.60.tar.gz    
  23.  
  24. 12 tar zxvf gifsicle-1.60.tar.gz    
  25.  
  26. 13 cd gifsicle-1.60    
  27.  
  28. 14 make   
  29.  
  30. 15 make install   
  31.  
  32. 16 cd ../    
  33.  
  34. 17 #安装jpegtran    
  35.  
  36. 18 wget http://jpegclub.org/droppatch.v8.tar.gz    
  37.  
  38. 19 tar zxvf droppatch.v8.tar.gz    
  39.  
  40. 20 sudo cp ./jpegtran /usr/local/bin    
  41.  
  42. 21 #安装pngcrush    
  43.  
  44. 22 wget http://sourceforge.net/projects/pmt/files/pngcrush/00-1.7.13/pngcrush-1.7.13.tar.gz/download    
  45.  
  46. 23 tar zxvf pngcrush-1.7.13.tar.gz    
  47.  
  48. 24 cd pngcrush-1.7.13    
  49.  
  50. 25 sudo make   
  51.  
  52. 26 sudo cp ./pngcrush /usr/local/bin   

将上面的代码拷贝到一个文件如:image.s,执行dos2unix image.sh,然后执行sh image.sh安装软件

图片优化

图片优化的代码如下:
 

  1. 01 #/bin/bash    
  2.  
  3. 02 OPTI_PATH=$1    
  4.  
  5. 03 cd $OPTI_PATH;    
  6.  
  7. 04 CURRENT_PATH=$PWD;    
  8.  
  9. 05 SH_LIST='jpegtran gifsicle pngcrush';    
  10.  
  11. 06 COMMOND_EXIST=1    
  12.  
  13. 07 #先检查相关的软件是否已经正确安装    
  14.  
  15. 08 for ITEM in $SH_LIST    
  16.  
  17. 09 do   
  18.  
  19. 10     SH_EXIST=`which $ITEM 2>/dev/null | wc -l`;    
  20.  
  21. 11     if [[ $SH_EXIST == '0' ]]; then   
  22.  
  23. 12         echo "$ITEM commond not exist";    
  24.  
  25. 13         COMMOND_EXIST=0;    
  26.  
  27. 14     fi   
  28.  
  29. 15 done   
  30.  
  31. 16 if [[ "COMMOND_EXIST" == "0" ]]; then   
  32.  
  33. 17 exit 1;    
  34.  
  35. 18 fi   
  36.  
  37. 19 #优化jpg    
  38.  
  39. 20 JPG_FILES=`find . -type f -name "*.jpg" -or -name "*.jpeg"`;    
  40.  
  41. 21 for FILE in $JPG_FILES    
  42.  
  43. 22 do   
  44.  
  45. 23     OUTPUT_FILE="$FILE.png"   
  46.  
  47. 24     jpegtran -optimize -progressive -copy none -outfile $OUTPUT_FILE $FILE > /dev/null    
  48.  
  49. 25     mv $OUTPUT_FILE $FILE    
  50.  
  51. 26 done   
  52.  
  53. 27 #优化gif    
  54.  
  55. 28 GIF_FILES=`find . -type f -name "*.gif"`;    
  56.  
  57. 29 for FILE in $GIF_FILES    
  58.  
  59. 30 do   
  60.  
  61. 31     DEPTH=`identify $FILE | wc -l`;    
  62.  
  63. 32     if [[ "$DEPTH" == "1" ]]; then   
  64.  
  65. 33         OUTPUT_FILE="$FILE.png";    
  66.  
  67. 34         OUTPUT_FILE_LEN=${#OUTPUT_FILE}-8;    
  68.  
  69. 35         NEW_FILE_SUB=${OUTPUT_FILE:0:$OUTPUT_FILE_LEN};    
  70.  
  71. 36         NEW_FILE="$NEW_FILE_SUB.png"   
  72.  
  73. 37         convert $FILE $NEW_FILE > /dev/null;    
  74.  
  75. 38     else   
  76.  
  77. 39         OUTPUT_FILE="$FILE.gif"   
  78.  
  79. 40         gifsicle -o $OUTPUT_FILE $FILE > /dev/null    
  80.  
  81. 41         mv $OUTPUT_FILE $FILE    
  82.  
  83. 42     fi   
  84.  
  85. 43 done   
  86.  
  87. 44 #优化png    
  88.  
  89. 45 PNG_FILES=`find . -type f -name "*.png"`;    
  90.  
  91. 46 for FILE in $PNG_FILES    
  92.  
  93. 47 do   
  94.  
  95. 48     OUTPUT_FILE="$FILE.png"   
  96.  
  97. 49     pngcrush -rem alla -brute -reduce $FILE $OUTPUT_FILE > /dev/null    
  98.  
  99. 50     mv $OUTPUT_FILE $FILE    
  100.  
  101. 51 done   
  102.  
  103. 52 cd $CURRENT_PATH;   
 
 
将上面的代码保存如:image-optimation.sh,执行dosunix image-optizimation.sh,
然后执行sh image-optizimation.sh imgdir 就可以将imgdir目录下的图片进行优化,上线的时候只要拷贝优化后的图片就可以了。

优化结果

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

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

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

其他优化工具

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

  1. pngrewrite
  2. optpng
  3. pngout
  4. pngquant

参考文档

  1. http://www.slideshare.net/stoyan/image-optimization-for-the-web-at-phpworks-presentation 图片优化方面的ppt
  2. http://www.smushit.com/ysmush.it/ smush
  3. https://github.com/thebeansgroup/smush.py smush的python实现
  4. http://code.google.com/speed/page-speed/docs/payload.html#CompressImages google关于图片优化的文档
  5. http://www.welefen.com/fcp-introduce.html FCP前端编译平台里包含了图片优化功能

 

【本文首发于:搜索研发部官方博客http://stblog.baidu-tech.com/?p=1011
关注百度技术沙龙











本文转自百度技术51CTO博客,原文链接:http://blog.51cto.com/baidutech/743723,如需转载请自行联系原作者

网友评论

登录后评论
0/500
评论
技术小美
+ 关注