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

标签: 未分类 | 发表时间:2011-10-21 19:07 | 作者:editor jinn
出处:http://stblog.baidu-tech.com

前端图片优化介绍

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

由于图片是二进制文件,并不能像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前端编译平台里包含了图片优化功能

相关 [前端 优化 图片] 推荐:

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

- jinn - 搜索研发部官方博客
随着前端页面越来越复杂,尤其是一些社区型的页面中,图片成了页面中不可或缺的资源,并且随着产品功能的叠加图片大小越来越多. 以下是几个网站的图片所占的比重. 由于图片是二进制文件,并不能像js、css、html那些源代码文件一样可以通过gzip压缩大大减小文件的大小. 所以图片优化主要是选择合适的图片格式,在不降低图片质量的情况下去掉图片里的元数据信息.

Web前端优化

- - JavaScript - Web前端 - ITeye博客
优点:直接使用浏览器内存的缓存数据,减少网站后台压力,用户体验(速度)好. 缺点:对于时时变化的动态页面,这种情况就不能容忍了,因为每次访问的都是第一次访问的内容,这样即使所请求的页面已经变化了,用户也不可能知道,所以此场景必须要消除这种缓存的影响. 延迟加载,将资源延迟到需要的时候的加载,例如detail页面,相关产品推荐,当用户浏览更多的信息往下拉动滚动时,才进行加载,异步加载可以大幅减少对后端资源的使用,在需要的时候加载,是资源合理使用常用的方式,但是也带来一个问题,当往下拉才去加载,如果性能不够好,用户的体验其实是不好的,“菊花”转动的时间会比较长,同时异步加载对前端性能的作用也是非常明显的,渲染的节点数量大幅减少.

前端性能优化

- - JavaScript - Web前端 - ITeye博客
  在浏览器(客户端)和服务器发生通信时,就已经消耗了大量的时间,尤其是在网络情况比较糟糕的时候,这个问题尤其的突出.   一个正常HTTP请求的流程简述:如在浏览器中输入" www.xxxxxx.com"并按下回车,浏览器再与这个URL指向的服务器建立连接,然后浏览器才能向服务器发送请求信息,服务器在接受到请求的信息后再返回相应的信息,浏览器接收到来自服务器的应答信息后,对这些数据解释执行.

Web性能优化之图片优化

- - 极客521 | 极客521
HTTP Archieve有个统计,图片内容已经占到了互联网内容总量的62%,也就是说超过一半的流量和时间都用来下载图片. 从性能优化的角度看,图片也绝对是优化的热点和重点之一,Google PageSpeed或者Yahoo的14条性能优化规则无不把图片优化作为重要的优化手段,本文覆盖了Web图片优化的方方面面,从基本的图片格式选择、到尚未被广泛支持的响应式图片均有所提及.

图片原理与优化

- - TID-财付通设计中心
前言:该文收集了前辈们的一些关于图片优化的技巧,在此收拢到一起,对于各个方法的优化原理做了一些研究,希望能给大家对于图片优化这一块起到抛砖引玉的作用. 提到图片,我们不得不从位图开始说起,位图图像(bitmap),也称为点阵图像或绘制图像,是由称作像素(图片元素)的单个点组成的. 这些点可以进行不同的排列和染色以构成一副图片.

Web前端优化最佳实践

- Jimmy - 中文热文榜|最新
还有 Jason, Bixuan, 曦, 推荐,查看全部 8 个推荐. 博评 - Sting的网经发表于2010-08-08 08:41:10. Google的前端优化最佳实践 Yahoo的前端优化最佳实践. Web前端优化最佳实践之Content篇. 尽量减少 HTTP 请求 (Make Fewer HTTP Requests).

前端开发中的HTML优化

- - 可咔酷 | 网络杂货铺
在前端领域中,对Javascript和CSS的优化一直是大家关注的焦点,相应的压缩优化工具也非常丰富,相对而言对HTML优化的关注则显得有些冷淡. 在 Steve Souders的大作《Even Faster Web Sites》中谈到非常多有效的前端优化方法,例如Javascript的加载、CSS选择符、图片优化、gzip、iframe问题等,唯独没有细说HTML优化.

mod_pagespeed:傻瓜式前端优化

- - 知道分子
曾经有位朋友自己做了个小网站,刚开始没什么人气,后来不小心把流量搞大了,用户抱怨访问缓慢,就让我帮忙看看哪里可以优化. 那时 Steve Souders 老师的 YSlow 14条军规刚刚新鲜出炉,开宗明义第一句便是:网页性能 80% 消耗在前端. 于是运用 Firefox+Firebug+YSlow 工具,轻松找到那些大图小用、过期时间太短、JS/CSS位置不正确、没有精简压缩的罪恶之源.

前端工程与性能优化

- - FEX 百度 Web 前端研发部
每个参与过开发企业级 web 应用的前端工程师或许都曾思考过前端性能优化方面的问题. 我们有雅虎 14 条性能优化原则,还有两本很经典的性能优化指导书:《高性能网站建设指南》、《高性能网站建设进阶指南》. 经验丰富的工程师对于前端性能优化方法耳濡目染,基本都能一一列举出来. 这些性能优化原则大概是在 7 年前提出的,对于 web 性能优化至今都有非常重要的指导意义.

雅虎前端优化法则 - 思齐_

- - 博客园_思齐
1、尽量减少HTTP请求次数.   网页加载中大部分时间都在下载js,css,flash,图片.   1、合并文件 css,js,图片(css sprite).   2、内联图像 data:URL scheme 低级浏览器不支持,如过放到页面中会加大html,放到css中最好,因为他可以在客户端进行缓存.