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

前端圖片優化介紹

隨着前端頁面愈來愈複雜，尤爲是一些社區型的頁面中，圖片成了頁面中不可或缺的資源，而且隨着產品功能的疊加圖片大小愈來愈多。如下是幾個網站的圖片所佔的比重。

因爲圖片是二進制文件，並不能像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;

將上面的代碼保存如：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前端編譯平臺裏包含了圖片優化功能