前端优化之图片优化自动化

时间 2019-11-19

标签前端优化图片自动化栏目测试自动化繁體版

原文原文链接

前端图片优化介绍

随着前端页面愈来愈复杂，尤为是一些社区型的页面中，图片成了页面中不可或缺的资源，而且随着产品功能的叠加图片大小愈来愈多。如下是几个网站的图片所占的比重。php

因为图片是二进制文件，并不能像js、css、html那些源代码文件同样能够经过gzip压缩大大减少文件的大小。因此图片优化主要是选择合适的图片格式，在不下降图片质量的状况下去掉图片里的元数据信息。css

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

这些优化方案虽然结果都能将图片优化，但须要比较多的人工操做。如使用smush，先要上传文件，优化完了后还要下载文件。在项目时间限制或者改动很频繁的状况下不少时候就把图片优化这一很是重要的优化步骤给忽略了。前端

那如何尽可能减小人工操做带来的麻烦和不肯定因素呢？python

若是在前端模块编译的时候，有图片自动优化的功能，上线前模块编译的时候获得就是优化后的图片，开发人员彻底不用管图片优化了，但又不影响线上图片优化的结果。git

如何结合一些工具作到图片优化彻底自动化呢？先要考虑目前开发中常常用到的图片格式。github

开发中常常用到的图片格式主要有以下几种：web

对于全透明的png，ie6要经过下面的filter进行hack。bash

对于alpha透明的png，ie6下必须使用png24，目前尚未找到ie6下hack alpha透明png8的方式，若是有哪位大拿对这个有解决方案，麻烦告诉我。ide

通过筛选和优化原则要知足上面的图片格式的条件，选择的软件以下：

须要安装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图片的缘由。

除了上面用到的图片优化工具，还有其余不少能够优化图片的工具。但各类各样的小问题，最终并无使用它们。