IT工程師數位筆記本

前端圖片優化介紹

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

由于圖片是二進制文件，并不能像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前端編譯平臺里包含了圖片優化功能