Web前端优化:图片自动优化

前端图片优化介绍

随着前端页面越来越复杂，尤其是一些社区型的页面中，图片成了页面中不可或缺的资源，并且随着产品功能的叠加图片大小越来越多.

常用的一些优化方案

目前图片优化使用比较多的主要是下面几种方式：

1. 选择合适的图片格式，如:png代替gif，尽量使用png8
2. png使用pngout优化，jpg使用jpgtran
3. 通过yahoo的smush进行
4. 通过google的page speed插件进行

为了尽量减少人工操作带来的麻烦和不确定因素呢？

需要工具

软件安装

需要安装imagmagick, gifsicle, jpegtran, pngcrush，安装脚本如下：

#!/bin/sh
#安装imagemagick
wget ftp://ftp.kddlabs.co.jp/graphics/ImageMagick/ImageMagick-6.7.2-10.tar.gz
tar zxvf ImageMagick-6.7.2-10.tar.gz
cd ImageMagick-6.7.2-10
./configure
make
make install
cd ../
#安装gifsicle
wget http://www.lcdf.org/gifsicle/gifsicle-1.64.tar.gz
tar zxvf gifsicle-1.64.tar.gz
cd gifsicle-1.64
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.15/pngcrush-1.7.15.tar.gz/download
tar zxvf pngcrush-1.7.15.tar.gz
cd pngcrush-1.7.15
sudo make
sudo cp ./pngcrush /usr/local/bin

将上面的代码拷贝到一个文件如：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;

将上面的代码保存如：yhimg.sh,执行sh yhimg.sh imgdir，就可以将imgdir目录下的图片进行优化，上线的时候只要拷贝优化后的图片就可以了。

优化结果

优化前!

优化后!

参考文档

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前端编译平台里包含了图片优化功能