您的位置: 首页  >  文章  >  前端优化之图片优化自动化

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

分类: 文章 • 2025-04-08 16:04:15

前端图片优化介绍

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

 

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

由于图片是二进制文件，并不能像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. 

  2. 01 #!/bin/sh    
    3. 

  3.  
    4. 

  4. 02 #安装imagemagick    
    5. 

  5.  
    6. 

  6. 03 wget ftp://ftp.kddlabs.co.jp/graphics/ImageMagick/ImageMagick-6.6.4-10.tar.gz    
    7. 

  7.  
    8. 

  8. 04 tar zxvf ImageMagick-6.6.4-10.tar.gz    
    9. 

  9.  
    10. 

  10. 05 cd ImageMagick-6.6.4-10    
    11. 

  11.  
    12. 

  12. 06 ./configure    
    13. 

  13.  
    14. 

  14. 07 make   
    15. 

  15.  
    16. 

  16. 08 make install   
    17. 

  17.  
    18. 

  18. 09 cd ../    
    19. 

  19.  
    20. 

  20. 10 #安装gifsicle    
    21. 

  21.  
    22. 

  22. 11 wget http://www.lcdf.org/gifsicle/gifsicle-1.60.tar.gz    
    23. 

  23.  
    24. 

  24. 12 tar zxvf gifsicle-1.60.tar.gz    
    25. 

  25.  
    26. 

  26. 13 cd gifsicle-1.60    
    27. 

  27.  
    28. 

  28. 14 make   
    29. 

  29.  
    30. 

  30. 15 make install   
    31. 

  31.  
    32. 

  32. 16 cd ../    
    33. 

  33.  
    34. 

  34. 17 #安装jpegtran    
    35. 

  35.  
    36. 

  36. 18 wget http://jpegclub.org/droppatch.v8.tar.gz    
    37. 

  37.  
    38. 

  38. 19 tar zxvf droppatch.v8.tar.gz    
    39. 

  39.  
    40. 

  40. 20 sudo cp ./jpegtran /usr/local/bin    
    41. 

  41.  
    42. 

  42. 21 #安装pngcrush    
    43. 

  43.  
    44. 

  44. 22 wget http://sourceforge.net/projects/pmt/files/pngcrush/00-1.7.13/pngcrush-1.7.13.tar.gz/download    
    45. 

  45.  
    46. 

  46. 23 tar zxvf pngcrush-1.7.13.tar.gz    
    47. 

  47.  
    48. 

  48. 24 cd pngcrush-1.7.13    
    49. 

  49.  
    50. 

  50. 25 sudo make   
    51. 

  51.  
    52. 

  52. 26 sudo cp ./pngcrush /usr/local/bin   
    53. 









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


图片优化


图片优化的代码如下：






 




    

  1. 01 #/bin/bash    
    2. 

  2.  
    3. 

  3. 
02 OPTI_PATH=$1    

    4. 

  4.  
    5. 

  5. 03 cd $OPTI_PATH;    
    6. 

  6.  
    7. 

  7. 
04 CURRENT_PATH=$PWD;    

    8. 

  8.  
    9. 

  9. 
05 SH_LIST='jpegtran gifsicle pngcrush';    

    10. 

  10.  
    11. 

  11. 
06 COMMOND_EXIST=1    

    12. 

  12.  
    13. 

  13. 07 #先检查相关的软件是否已经正确安装    
    14. 

  14.  
    15. 

  15. 08 for ITEM in $SH_LIST    
    16. 

  16.  
    17. 

  17. 09 do   
    18. 

  18.  
    19. 

  19. 
10     SH_EXIST=`which $ITEM 2>/dev/null | wc -l`;    

    20. 

  20.  
    21. 

  21. 
11     if [[ $SH_EXIST == '0' ]]; then   

    22. 

  22.  
    23. 

  23. 12         echo "$ITEM commond not exist";    
    24. 

  24.  
    25. 

  25. 
13         COMMOND_EXIST=0;    

    26. 

  26.  
    27. 

  27. 14     fi   
    28. 

  28.  
    29. 

  29. 15 done   
    30. 

  30.  
    31. 

  31. 16 if [[ "COMMOND_EXIST" == "0" ]]; then   
    32. 

  32.  
    33. 

  33. 17 exit 1;    
    34. 

  34.  
    35. 

  35. 18 fi   
    36. 

  36.  
    37. 

  37. 19 #优化jpg    
    38. 

  38.  
    39. 

  39. 
20 JPG_FILES=`find . -type f -name "*.jpg" -or -name "*.jpeg"`;    

    40. 

  40.  
    41. 

  41. 21 for FILE in $JPG_FILES    
    42. 

  42.  
    43. 

  43. 22 do   
    44. 

  44.  
    45. 

  45. 
23     OUTPUT_FILE="$FILE.png"   

    46. 

  46.  
    47. 

  47. 
24     jpegtran -optimize -progressive -copy none -outfile $OUTPUT_FILE $FILE > /dev/null    

    48. 

  48.  
    49. 

  49. 25     mv $OUTPUT_FILE $FILE    
    50. 

  50.  
    51. 

  51. 26 done   
    52. 

  52.  
    53. 

  53. 27 #优化gif    
    54. 

  54.  
    55. 

  55. 
28 GIF_FILES=`find . -type f -name "*.gif"`;    

    56. 

  56.  
    57. 

  57. 29 for FILE in $GIF_FILES    
    58. 

  58.  
    59. 

  59. 30 do   
    60. 

  60.  
    61. 

  61. 
31     DEPTH=`identify $FILE | wc -l`;    

    62. 

  62.  
    63. 

  63. 32     if [[ "$DEPTH" == "1" ]]; then   
    64. 

  64.  
    65. 

  65. 
33         OUTPUT_FILE="$FILE.png";    

    66. 

  66.  
    67. 

  67. 
34         OUTPUT_FILE_LEN=${#OUTPUT_FILE}-8;    

    68. 

  68.  
    69. 

  69. 
35         NEW_FILE_SUB=${OUTPUT_FILE:0:$OUTPUT_FILE_LEN};    

    70. 

  70.  
    71. 

  71. 
36         NEW_FILE="$NEW_FILE_SUB.png"   

    72. 

  72.  
    73. 

  73. 
37         convert $FILE $NEW_FILE > /dev/null;    

    74. 

  74.  
    75. 

  75. 38     else   
    76. 

  76.  
    77. 

  77. 
39         OUTPUT_FILE="$FILE.gif"   

    78. 

  78.  
    79. 

  79. 
40         gifsicle -o $OUTPUT_FILE $FILE > /dev/null    

    80. 

  80.  
    81. 

  81. 41         mv $OUTPUT_FILE $FILE    
    82. 

  82.  
    83. 

  83. 42     fi   
    84. 

  84.  
    85. 

  85. 43 done   
    86. 

  86.  
    87. 

  87. 44 #优化png    
    88. 

  88.  
    89. 

  89. 
45 PNG_FILES=`find . -type f -name "*.png"`;    

    90. 

  90.  
    91. 

  91. 46 for FILE in $PNG_FILES    
    92. 

  92.  
    93. 

  93. 47 do   
    94. 

  94.  
    95. 

  95. 
48     OUTPUT_FILE="$FILE.png"   

    96. 

  96.  
    97. 

  97. 
49     pngcrush -rem alla -brute -reduce $FILE $OUTPUT_FILE > /dev/null    

    98. 

  98.  
    99. 

  99. 50     mv $OUTPUT_FILE $FILE    
    100. 

  100.  
    101. 

  101. 51 done   
    102. 

  102.  
    103. 

  103. 52 cd $CURRENT_PATH;   
    104. 



 






 






将上面的代码保存如：image-optimation.sh，执行dosunix image-optizimation.sh，

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


优化结果


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


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


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


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


其他优化工具


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


    

  1. pngrewrite
    2. 

  2. optpng
    3. 

  3. pngout
    4. 

  4. pngquant
    5. 



参考文档


    

  1. 
http://www.slideshare.net/stoyan/image-optimization-for-the-web-at-phpworks-presentation 图片优化方面的ppt
    2. 

  2. 
http://www.smushit.com/ysmush.it/ smush
    3. 

  3. 
https://github.com/thebeansgroup/smush.py smush的python实现
    4. 

  4. 
http://code.google.com/speed/page-speed/docs/payload.html#CompressImages google关于图片优化的文档
    5. 

  5. 
http://www.welefen.com/fcp-introduce.html FCP前端编译平台里包含了图片优化功能
    6. 



 







































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







															

																					

								

									相关推荐