本文轉載自以下地址：

http://www.welefen.com/image-optimization.html

前端圖片優化介紹

隨著前端頁面越來越復雜，尤其是一些社區型的頁面中，圖片成了頁面中不可或缺的資源，并且隨著產品功能的疊加圖片大小越來越多。以下是幾個網站的圖片所占的比重。

由于圖片是二進制文件，并不能像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，安裝腳本如下：

    #!/bin/sh
  

    #安裝imagemagick
  

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

    tar zxvf ImageMagick-6.6.4-10.tar.gz
  

    cd ImageMagick-6.6.4-10
  

    ./configure
  

    make
  

    make install
  

    cd ../
  

    #安裝gifsicle
  

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

    tar zxvf gifsicle-1.60.tar.gz
  

    cd gifsicle-1.60
  

    make
  

    make install
  

    cd ../
  

    #安裝jpegtran
  

    wget http://jpegclub.org/droppatch.v8.tar.gz
  

    tar zxvf droppatch.v8.tar.gz
  

    sudo cp ./jpegtran /usr/local/bin
  

    #安裝pngcrush
  

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

    tar zxvf pngcrush-1.7.13.tar.gz
  

    cd pngcrush-1.7.13
  

    sudo make
  

    sudo cp ./pngcrush /usr/local/bin
  

將上面的代碼拷貝到一個文件如：image.s，執行dos2unix image.sh，然后執行sh image.sh安裝軟件

圖片優化

      #/bin/bash
    

      OPTI_PATH=$1
    

      cd $OPTI_PATH;
    

      CURRENT_PATH=$PWD;
    

      SH_LIST='jpegtran gifsicle pngcrush';
    

      COMMOND_EXIST=1
    

      #先檢查相關的軟件是否已經正確安裝
    

      for ITEM in $SH_LIST
    

      do
    

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

          if [[ $SH_EXIST == '0' ]]; then
    

              echo "$ITEM commond not exist";
    

              COMMOND_EXIST=0;
    

          fi
    

      done
    

      if [[ "COMMOND_EXIST" == "0" ]]; then
    

      exit 1;
    

      fi
    

      #優化jpg
    

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

      for FILE in $JPG_FILES
    

      do
    

          OUTPUT_FILE="$FILE.png"
    

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

          mv $OUTPUT_FILE $FILE
    

      done
    

      #優化gif
    

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

      for FILE in $GIF_FILES
    

      do
    

          DEPTH=`identify $FILE | wc -l`;
    

          if [[ "$DEPTH" == "1" ]]; then
    

              OUTPUT_FILE="$FILE.png";
    

              OUTPUT_FILE_LEN=${#OUTPUT_FILE}-8;
    

              NEW_FILE_SUB=${OUTPUT_FILE:0:$OUTPUT_FILE_LEN};
    

              NEW_FILE="$NEW_FILE_SUB.png"
    

              convert $FILE $NEW_FILE > /dev/null;
    

          else
    

              OUTPUT_FILE="$FILE.gif"
    

              gifsicle -o $OUTPUT_FILE $FILE > /dev/null
    

              mv $OUTPUT_FILE $FILE
    

          fi
    

      done
    

      #優化png
    

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

      for FILE in $PNG_FILES
    

      do
    

          OUTPUT_FILE="$FILE.png"
    

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

          mv $OUTPUT_FILE $FILE
    

      done
    

      cd $CURRENT_PATH;
    

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前端編譯平臺里包含了圖片優化功能

前端優化之圖片優化自動化