您的位置：首页 > Web前端

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

2011-12-09 16:30 531 查看
前端优化之图片优化自动化(2011-10-21 11:10:11)
标签：分类：未分类

前端图片优化介绍

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





由于图片是二进制文件，并不能像js、css、html那些源代码文件一样可以通过gzip压缩大大减小文件的大小。所以图片优化主要是选择合适的图片格式，在不降低图片质量的情况下去掉图片里的元数据信息。

常用的一些优化方案

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

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



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

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

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

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

图片格式

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

不透明的gif，全透明的gif，动画gif
不透明的png，全透明的png，半透明(alpha透明)的png
jpg图片

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



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

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

动画gif使用gifsicle
png使用pngcrush
jpeg使用jpegtran

软件安装

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

view source

print?

01
#!/bin/sh
02
#安装imagemagick
03
wget
ftp
://
ftp
.kddlabs.co.jp/graphics/ImageMagick/ImageMagick-6.6.4-10.
tar
.gz
04
tar
zxvf ImageMagick-6.6.4-10.
tar
.gz
05
cd
ImageMagick-6.6.4-10
06
./configure
07
make
08
make
install
09
cd
../
10
#安装gifsicle
11
wgethttp://www.lcdf.org/gifsicle/gifsicle-1.60.[/code]
tar
.gz
 
12
tar
zxvf gifsicle-1.60.
tar
.gz
13
cd
gifsicle-1.60
14
make
15
make
install
16
cd
../
17
#安装jpegtran
18
wgethttp://jpegclub.org/droppatch.v8.[/code]
tar
.gz
 
19
tar
zxvf droppatch.v8.
tar
.gz
20
sudo
cp
./jpegtran /usr/
local
/bin
21
#安装pngcrush
22
wgethttp://sourceforge.net/projects/pmt/files/pngcrush/00-1.7.13/pngcrush-1.7.13.[/code]
tar
.gz/download
 
23
tar
zxvf pngcrush-1.7.13.
tar
.gz
24
cd
pngcrush-1.7.13
25
sudo
make
26
sudo
cp
./pngcrush /usr/
local
/bin
将上面的代码拷贝到一个文件如：image.s，执行dos2unix image.sh，然后执行sh image.sh安装软件

图片优化

图片优化的代码如下：

view source

print?

01
#/bin/bash
02
OPTI_PATH=$1
03
cd
$OPTI_PATH;
04
CURRENT_PATH=$PWD;
05
SH_LIST=
'jpegtran gifsicle pngcrush'
;
06
COMMOND_EXIST=1
07
#先检查相关的软件是否已经正确安装
08
for
ITEM
in
$SH_LIST
09
do
10
SH_EXIST=`
which

$ITEM 2>/dev/null |
wc

-l`;
11
if

[[$SH_EXIST ==
'0'

]];
then
12
echo

"$ITEM commond not exist"
;
13
COMMOND_EXIST=0;
14
fi
15
done
16
if
 
[[
"COMMOND_EXIST"
 
==
"0"
 
]];

then
17
exit
 
1;
18
fi
19
#优化jpg
20
JPG_FILES=`
find

. -
type
 
f -name
"*.jpg"
 
-or -name
"*.jpeg"
`;
21
for
 
FILE
in
 
$JPG_FILES
22
do
23
OUTPUT_FILE=
"$FILE.png"
24
jpegtran -optimize -progressive -copy none -outfile $OUTPUT_FILE $FILE > /dev/null
25
mv

$OUTPUT_FILE $FILE
26
done
27
#优化gif
28
GIF_FILES=`
find

. -
type
 
f -name
"*.gif"
`;
29
for
 
FILE
in
 
$GIF_FILES
30
do
31
DEPTH=`identify $FILE |
wc
 
-l`;
32
if

[[
"$DEPTH"
 
==
"1"
 
]];

then
33
OUTPUT_FILE=
"$FILE.png"
;
34
OUTPUT_FILE_LEN=${
#OUTPUT_FILE}-8;
35
NEW_FILE_SUB=${OUTPUT_FILE:0:$OUTPUT_FILE_LEN};
36
NEW_FILE=
"$NEW_FILE_SUB.png"
37
convert $FILE $NEW_FILE > /dev/null;
38
else
39
OUTPUT_FILE=
"$FILE.gif"
40
gifsicle -o $OUTPUT_FILE $FILE > /dev/null
41
mv

$OUTPUT_FILE $FILE
42
fi
43
done
44
#优化png
45
PNG_FILES=`
find

. -
type
 
f -name
"*.png"
`;
46
for
 
FILE
in
 
$PNG_FILES
47
do
48
OUTPUT_FILE=
"$FILE.png"
49
pngcrush -rem alla -brute -reduce $FILE $OUTPUT_FILE > /dev/null
50
mv

$OUTPUT_FILE $FILE
51
done
52
cd
 
$CURRENT_PATH;
将上面的代码保存如：image-optimation.sh，执行dosunix image-optizimation.sh，

然后执行sh image-optizimation.sh imgdir 就可以将imgdir目录下的图片进行优化，上线的时候只要拷贝优化后的图片就可以了。
优化结果
以下是前端一个模块的优化前后的文件大小比较:



优化后，图片大小减小了66.6K，优化率达到35.2%。

从数据中可以发现，png图片优化还是非常多的，也是优化准则里尽量使用png图片的原因。

其他优化工具
除了上面用到的图片优化工具，还有其他很多可以优化图片的工具。但各种各样的小问题，最终并没有使用它们。

pngrewrite
optpng
pngout
pngquant
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航