本文轉(zhuǎn)載自以下地址：

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

前端圖片優(yōu)化介紹

隨著前端頁(yè)面越來(lái)越復(fù)雜，尤其是一些社區(qū)型的頁(yè)面中，圖片成了頁(yè)面中不可或缺的資源，并且隨著產(chǎn)品功能的疊加圖片大小越來(lái)越多。以下是幾個(gè)網(wǎng)站的圖片所占的比重。

由于圖片是二進(jìn)制文件，并不能像js、css、html那些源代碼文件一樣可以通過(guò)gzip壓縮大大減小文件的大小。所以圖片優(yōu)化主要是選擇合適的圖片格式，在不降低圖片質(zhì)量的情況下去掉圖片里的元數(shù)據(jù)信息。

常用的一些優(yōu)化方案

目前圖片優(yōu)化使用比較多的主要是下面幾種方式：

1. 選擇合適的圖片格式，如：png代替gif，盡量使用png8
2. png使用pngout優(yōu)化，jpg使用jpgtran
3. 通過(guò)yahoo的smush進(jìn)行
4. 通過(guò)google的page speed插件進(jìn)行

這些優(yōu)化方案雖然結(jié)果都能將圖片優(yōu)化，但需要比較多的人工操作。如使用smush，先要上傳文件，優(yōu)化完了后還要下載文件。在項(xiàng)目時(shí)間限制或者改動(dòng)很頻繁的情況下很多時(shí)候就把圖片優(yōu)化這一非常重要的優(yōu)化步驟給忽略了。

那如何盡量減少人工操作帶來(lái)的麻煩和不確定因素呢？

如果在前端模塊編譯的時(shí)候，有圖片自動(dòng)優(yōu)化的功能，上線前模塊編譯的時(shí)候得到就是優(yōu)化后的圖片，開(kāi)發(fā)人員完全不用管圖片優(yōu)化了，但又不影響線上圖片優(yōu)化的結(jié)果。

如何結(jié)合一些工具做到圖片優(yōu)化完全自動(dòng)化呢？先要考慮目前開(kāi)發(fā)中經(jīng)常用到的圖片格式。

圖片格式

開(kāi)發(fā)中經(jīng)常用到的圖片格式主要有如下幾種：

1. 不透明的gif，全透明的gif，動(dòng)畫(huà)gif
2. 不透明的png，全透明的png，半透明(alpha透明)的png
3. jpg圖片

對(duì)于全透明的png，ie6要通過(guò)下面的filter進(jìn)行hack。

對(duì)于alpha透明的png，ie6下必須使用png24，目前還沒(méi)有找到ie6下hack alpha透明png8的方式，如果有哪位大拿對(duì)這個(gè)有解決方案，麻煩告訴我。

經(jīng)過(guò)篩選和優(yōu)化原則要滿足上面的圖片格式的條件，選擇的軟件如下：

1. 動(dòng)畫(huà)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
  

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

圖片優(yōu)化

      #/bin/bash
    

      OPTI_PATH=$1
    

      cd $OPTI_PATH;
    

      CURRENT_PATH=$PWD;
    

      SH_LIST='jpegtran gifsicle pngcrush';
    

      COMMOND_EXIST=1
    

      #先檢查相關(guān)的軟件是否已經(jīng)正確安裝
    

      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
    

      #優(yōu)化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
    

      #優(yōu)化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
    

      #優(yōu)化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 ?圖片優(yōu)化方面的ppt
2. http://www.smushit.com/ysmush.it/ ?smush
3. https://github.com/thebeansgroup/smush.py ?smush的python實(shí)現(xiàn)
4. http://code.google.com/speed/page-speed/docs/payload.html#CompressImages ?google關(guān)于圖片優(yōu)化的文檔
5. http://www.welefen.com/fcp-introduce.html ?FCP前端編譯平臺(tái)里包含了圖片優(yōu)化功能

前端優(yōu)化之圖片優(yōu)化自動(dòng)化