潘杰茂 网络图像优化 V21

网络图像优化

WebRebuild

2010年Webrebuild年会广州站

stevenpan

选择格式

INDEX01_选择格式

真色彩 jpg、png24、png32

原图：大于256色 GIF ：256种色 PNG8： 256种色

INDEX01_选择格式

当真色彩图像，使用GIF或PNG8后？

INDEX01_选择格式

调色板 gif、png8

PNG8：7.7 KB JPG14.5 KB PNG24： 23.4 KB

INDEX01_选择格式

当调色板图像，使用JPG或PNG24后？

INDEX01_选择格式

小图用PNG8

PNG24：8.1 KBGIF：3.1 KB PNG8：3.0 KB

57 X 57

INDEX01_选择格式

INDEX01_选择格式

一些简单的图像

JPG: 1850 byteGIF: 1450bytePNG8: 907byte

JPEG不适合保存图形分明线条简单的图像。

INDEX01_选择格式

优化方法

INDEX02_优化方法

GIF 动画压缩

优化前 177 KB 优化后 107 KB

INDEX02_优化方法

INDEX02_优化方法

INDEX02_优化方法

ImageMagick

ImageMagick (TM) 是一个免费的创建、编辑、合成图片的软件。它可以读取、转换、写入多种格式的图片。图片切割、颜色替换、各种效果的应用，图片的旋转、

组合，文本，直线，多边形，椭圆，曲线，附加到图片伸展旋转。ImageMagick是免费软件：全部源码开放，可以自由使用，复制，修改，发布。它遵守GPL许

可协议。它可以运行于大多数的操作系统。ImageMagick的大多数功能的使用都来源于命令行工具。

http://www.imagemagick.com.cn/

Gifsicle

*Batch mode for changing GIFs in place.

* Prints detailed information about GIFs, including comments.

* Control over interlacing, comments, looping, transparency...

* Creates well-behaved GIFs: removes redundant colors, only uses local color tables if it absolutely has to (local color tables waste

space and can cause * viewing artifacts), etc.

* It can shrink colormaps and change images to use the Web-safe palette (or any colormap you choose).

* It can optimize your animations! This stores only the changed portion of each frame, and can radically shrink your GIFs. You can

also use transparency to make them even smaller. Gifsicle’s optimizer is pretty powerful, and usually reduces animations to within a

couple bytes of the best commercial optimizers.

* Unoptimizing animations, which makes them easier to edit.

http://www.lcdf.org/~eddietwo/gifsicle/

INDEX02_优化方法

隔行扫描

隔行扫描 21.1KB

逐行扫描 18.7KB

INDEX02_优化方法

PhotoshopFireworks

INDEX02_优化方法

INDEX02_优化方法

GIF vs PNG

GIF 15.9 KB PNG8 13.3 KB

INDEX02_优化方法

INDEX01_选择格式

一些简单的小图像

INDEX01_选择格式

PNG8： 218 byteGIF： 205 byte

宽15像素 高11像素

单一的17种红色

INDEX02_优化方法

JPEG压缩品质

品质95% 品质90% 品质85% 品质80%

INDEX02_优化方法

100%品质 79K 80%品质 19K

INDEX02_优化方法

12KB 9KB 5KB

INDEX02_优化方法

22 KB 18 KB

20 KB15 KB

INDEX02_优化方法

删除 锐化颜色边缘

INDEX02_优化方法

101 KB

79 KB

INDEX02_优化方法

优化后品质80％ 79 KB优化前品质80％ 101 KB

INDEX02_优化方法

渐进JPEG

标准JPEG

渐进JPEG 10.9KB

12.4KB

PhotoshopFireworks

INDEX02_优化方法

INDEX02_优化方法

JPEG图像噪点

没有噪音

13,711KB

5 %噪音

14,817KB

10 %噪音

17,408 KB

INDEX02_优化方法

纯色

192 bytes

5%噪音

26,426 bytes

10%噪音

26,457 bytes

INDEX02_优化方法

在Photoshop中去除噪点：

1.打开 图片（废话）。

2. 图像—模式— Lab颜色。

3. 转到通道面板。

4.将a通道进行高斯模糊数值在15左右，b通道也同样处理。

5.回到Lab通道（点一下Lab那里就可以了）。

6.滤镜 — 杂色— 取出杂色（有的版本叫去斑）。

7.最后可以使用模糊工具调整一下比较生硬的图像。

INDEX02_优化方法

INDEX02_优化方法

JPEG 2000

原图 48.9KB JPEG压缩 1.85KB JPEG2000 压缩 1.79KB

JPEG2000详细资料http://baike.baidu.com/view/300613.htm?fr=ala0_1_1

INDEX02_优化方法

INDEX02_优化方法

PNG格式

PNG 的格式

PNG8

调色板图像，支持半透明。

PNG24

真色彩，不支持透明。

PNG32

真色彩，支持半透明。

FireworksPhotoshop

INDEX02_优化方法

INDEX02_优化方法

比PNG32更小的替代品

PNG32

58KB

？

18KB

INDEX02_优化方法

INDEX02_优化方法

Video

INDEX02_优化方法

Alpha PNG

Alpha PNG32 26.9KB Alpha PNG8 8.23KB

INDEX02_优化方法

INDEX02_优化方法

优化工具

GIF 及 PNG 优化工具

http://www.phpied.com/give-png-a-chance/

INDEX03_优化工具

http://www.phpied.com/big-list-image-optimization-tools/

INDEX03_优化工具

INDEX03_优化工具

INDEX03_优化工具

Fireworks vs Photoshop

INDEX03_优化工具

INDEX03_优化工具

INDEX03_优化工具

Fireworks

Photoshop

TweakPNG

INDEX03_优化工具

INDEX03_优化工具

结语

感谢大家的参与和支持！