WEB 图像优化唐友华

youhua@staff.sina.com.cn

为什么要优化？ 性能对业务的影响

Amazon ： 100ms 的延迟导致降低 1% 的销售Yahoo ： 400ms 的延迟降低页面流量 5%-9% 。Google ： 500ms 的延迟降低 20% 的搜索量Bing ： 500ms 的延迟降低 1.2% 的收益Sina: ?

我们的现状对部分 JPEG 图片进行有损 压缩对 PNG 图片格式的认识存在误区和盲区绝大部分页面存在相当大的无损压缩空间

南非世界杯

可优化 401.62 KB 占总量的 18.57%

2010-6-17

新浪微博

可优化 211.20 KB 占总量的 37.33%

2010-6-17

世博会

可优化 176.33 KB 占总量的 7.23%

2010-6-17

博客首页推荐的某图片博客

可优化 985.23 KB 占总量的 10.44%

2010-6-17

新首

可优化 33.29 KB 占总量的 6.75%

2010-6-17

浪首

可优化 26.29 KB 占总量的 4.00%

2010-6-17

世界杯横向对比

公司名 节省字节数 所占比例

新浪 401.62 KB 18.57%

雅虎中国 303.98 KB 33.94%

腾讯 262.23 KB 19.32%

搜狐 30.88 KB 3.66%

网易 20.13 KB 2.84%

2010-6-17

首页横向对比

公司名 节省字节数 所占比例

网易 53.79 KB 7.92%

新浪 26.29 KB 4.00%

腾讯 17.92 KB 7.25%

搜狐 12.39 KB 6.56%

2010-6-17

2010-6-17

2010-6-17

2010-6-17

怎样优化 理论篇

基础颜色理论 常见图片格式 选择合适的图片格式

工具篇 测试工具 输出工具 优化工具 服务端解决方案

2010-6-17

基础颜色理论 神说：要有光 光色三原色： RGB HSV(HSB) 及 YUV 色彩空间

2010-6-17

眼睛成像原理

2010-6-17

RGB 颜色模式

可用灯光模拟

2010-6-17

HSV(HSB) 及 YUV

2010-6-17

HSB

YUV

YUV 模型的特点

2010-6-17

为节省带宽起见，大多数 YUV 格式平均使用的每像素位数都少于 24 位元。主要的采样（ subsample ）格式有 YCbCr 4:2:0 、 YCbCr 4:2:2 、 YCbCr 4:1:1和 YCbCr 4:4:4 。（ Cb 指蓝色色度， Cr 指红色色度） YUV 的表示法称为 A:B:C 表示法：4:4:4 表示完全取样。4:2:2 表示 2:1 的水平取样，没有垂直下采样。4:2:0 表示 2:1 的水平取样， 2:1 的垂直下采样。4:1:1 表示 4:1 的水平取样，没有垂直下采样。YUV 与 RGB 的转换公式：

常见图片格式

图像格式 色彩 透明 压缩算法 诞生时间

JPG 24 不透明 有损压缩1992 年发布1994 年获得ISO 认定

GIF 8 布尔透明 无损压缩1987 年发布1989 年完善

PNG 8&24alpha 通道

半透明 无损压缩

1996 年发布1.01998 年发布1.11999 年发布1.22003 年成为W3C 建议

2010-6-17

JPG

适合存储照片 可以存储缩略图 可以存储额外的文本信息 有损压缩 对线条和文字支持不好 支持渐进显示 每编辑一次损失一次

2010-6-17

JPG 文件头Start Offset: 0x00000000*** Marker: SOI (xFFD8) *** OFFSET: 0x00000000 *** Marker: APP0 (xFFE0) *** OFFSET: 0x00000002 length = 16 identifier = [JFIF] version = [1.1] density = 72 x 72 DPI (dots per inch) thumbnail = 0 x 0 *** Marker: COM (Comment) (xFFFE) *** OFFSET: 0x00000014 Comment length = 41 Comment=Intel(R) JPEG Library, version 1,5,4,36

2010-6-17

JPG Exif 头*** Marker: APP1 (xFFE1) *** OFFSET: 0x00000002 length = 10750 Identifier = [Exif] Identifier TIFF = 0x[49492A00 08000000] Endian = Intel (little) TAG Mark x002A = 0x002A

EXIF IFD0 @ Absolute 0x00000014 Dir Length = 0x0009 [Make ] = "Canon" [Model ] = "Canon PowerShot A710 IS" [Orientation ] = Row 0: top, Col 0: left [XResolution ] = 180/1 [YResolution ] = 180/1 [ResolutionUnit ] = Inch [DateTime ] = "2007:04:27 11:52:06" [YCbCrPositioning ] = Centered [ExifOffset ] = @ 0x00C4 Offset to Next IFD = 0x00000C56

EXIF IFD1 @ Absolute 0x00000C62 Dir Length = 0x0006 [Compression ] = JPEG [XResolution ] = 180/1 [YResolution ] = 180/1 [ResolutionUnit ] = Inch [JpegIFOffset ] = @ +0x13F4 = @ 0x1400 [JpegIFByteCount ] = 5601 Offset to Next IFD = 0x00000000

EXIF SubIFD @ Absolute 0x000000D0 Dir Length = 0x001F [ExposureTime ] = 1/1000 s

…………

JPEG 图像压缩技术

把 RBG 转换成 YCrCb

JPEG 压缩第一步

Y 表示亮度，即 Luminance

Cr 和 Cb 表示色彩，即 ChrominanceCr red(RGB=97,0,0)Cb blue(RGB=0,0,255)

JPEG 压缩第二步

Down Sampling 此步可有各种变换， Y:Cr:Cb 4:4:4(1x1) 4:2:2(2x1) 4:1:1 4:2:0(2x2)

JPEG 压缩第三步

图像拆分成 8*8pixels 每块。

JPEG 压缩第四步每一块使用离散余弦变换 (DCT) 变换成频率数据。例：

推移 128

离散余弦变换，和舍位取最接近的整数，得到结果为

注意左上角之相当大的数值。这就是 DC 系数。

JPEG 压缩第五步Quantization 量化去掉一些高频量，它是利用了人眼对高频部分不敏感的特性来实现数据的大幅简化 。

使用这个量化矩阵与前面所得到的 DCT 系数矩阵，得到结果为：

举个例子，使用− 415 （ DC 系数）且舍位得到最接近的整数

一个普遍的量化矩阵是：

JPEG 压缩第六步

 Z 型扫描矩阵的顺序

每 MCU 使用无损压缩。熵编码中的霍夫曼编码 (Huffman Coding)

熵编码

霍夫曼编码使用变长编码表对源符号（如文件中的一个字母）进行编码，其中变长编码表是通过一种评估来源符号出现机率的方法得到的，出现机率高的字母 使用较短的编码，反之出现机率低的则使用较长的编码，这便使编码之后的字符串的平均长度、期望值降低，从而达到无损压缩数据的目的。

JPG 不适合显示文本

JPEG image, 15% compression (85% quality), standard subsampling (4:2:2), 2193 bytes.

JPEG image, 35% compression (65% quality), no subsampling (4:4:4), 2224 bytes.

PNG Image, 4-bit color(16 color palette) , best compression (level 9), 809 bytes.

GIF image, 4-bit color (16 color palette), non-interlaced, 916 bytes.

2010-6-17

Baseline vs. progressive JPEGs

2010-6-17

10360 张 JPG 图片做实验

2010-6-17

结论

2010-6-17

<10K, 使用 baseline JPEG ( 大约有 75% 的概率会比较小 )>10K progressive JPEG 会有更好的压缩率 ( 实验数据： 94%)

GIF

布尔透明，不支持 Alpha 透明 调色板图像，最高支持 256 色 无损图像格式（ LZW ） 水平扫描压缩 间隔渐进显示

2010-6-17

626KB 1286KB

324KB 1109KB

平行对比垂直

间隔渐进显示

增大文件大小 10% 左右

选择 GIF 格式的情况

1 。带运动的图像，即包含好多祯的图像2 。图像很小 gif 的文件大小要比 png小。(e.g. 尺寸<10x10 px, 或者颜色总数 <

3)

其它情况：通常 PNG 文件小于 GIF 文件 20%以上

PNG

PNG8 ， PNG24 ， PNG32 支持布尔透明和 Alpha 透明 无损图像格式 Deflate 压缩 间隔渐进显示 不支持动画（除非是 APNG ， MNG ）

2010-6-17

PNG 压缩技术

PNG 压缩第一步

Filtering ：0 None 不处理

1 Sub 当前 pixel 与前一个 pexel 的差值

2 Up 当前 pixel 与上方 pexel 的差值

3 Average 左方 pixel 与上方 pixel 的平均值

4 Paeth 当前的 pixel 分別与左方 , 上方 , 左上方的 pixel將以比较 ,找出最相近的 pixel,计算 pixel 之間的差值 .

5 Adaptive 将以上五种算法都算一遍 ,找出相差值最少的方法 .

PNG 压缩第二步

使用 zlib 中第 8 种 Deflate 压缩 , 一種由 LZ77 Huffman coding组合而成

的算法

LZ77策略查找

strategy ：

Z_DEFAULT_STRATEGY = 0 Z_FILTERED = 1 Z_HUFFMAN_ONLY = 2 Z_RLE = 3

间隔渐进显示 Adam7算法

8*8 pixel 为单位 ,將图切成一個個 block. 每个 pixel 的重要性：

1 6 4 6 2 6 4 6 7 7 7 7 7 7 7 7 5 6 5 6 5 6 5 6 7 7 7 7 7 7 7 7 3 6 4 6 3 6 4 6 7 7 7 7 7 7 7 7 5 6 5 6 5 6 5 6 7 7 7 7 7 7 7 7

间隔渐进显示 Adam7效果

http://en.wikipedia.org/wiki/Adam7_algorithm

间隔渐进显示大约增加文件大小 20%.

PNG 对比 GIF 的压缩率

GIF, 2568 bytes PNG, 372 bytes

http://www.smashingmagazine.com/2009/07/15/clever-png-optimization-techniques/

PNG 中的 Filtering

影响 PNG 文件大小的因素

移除不必要的 Chunk 色彩管理 Flitering 的选择 LZ77 中的 strategy Huffman buffers 的大小

色彩管理

File size ： 84KB File size ： 53KB

http://www.smashingmagazine.com/2009/07/15/clever-png-optimization-techniques/

合并几乎相同的颜色

File size ： 75KB File size ： 30KB

http://www.smashingmagazine.com/2009/07/15/clever-png-optimization-techniques/

移除不必要的透明通道

色彩管理

None Up

Sub

http://www.smashingmagazine.com/2009/07/15/clever-png-optimization-techniques/

Filtering 的选择

大部分的 PNG8 使用 Filter None更好

逐行显示增加文件大小约 20% 左右，不要使用

PNG In IE6@Windows

PNG8 在 IE6 Alpha 不被正常显示。

Photoshop输出的是布尔透明的 PNG8 ，非Alpha 透明的 PNG8

Fireworks 能够正常输出 Alpha 透明的 PNG8

PNG32出现灰色。只能用 AlphaImageLoader

选择合适的图片格式 照片，大面积非连续色调图像 JPG 图标，线条，渐变，文本 PNG8 设计师效果图，高质量要求图 PNG32 尺寸非常小或颜色非常少或动画 GIF

2010-6-17

对输出的图像进行处理 JPEG ：选择合适的压缩比例 通常 50 就够

了 JPEG ：去掉网页显示用不着的 meta信息 JPEG ：优化 Huffman table JPEG ：大于 10k 的 JPG ，尝试

progressive 静态的 GIF 转换为 PNG 去掉 PNG 图片中用不着的信息

2010-6-17

质量与尺寸

2010-6-17

Photoshop subsampling

Save as quality 0-6 2x2

Save as quality 7-12 1x1

Save for web quality 0-50 2x2

Save for web quality 51-100 1x1

Photoshop subsampling

Photoshop save for web quality:51File size:13.92KB

Photoshop save for web quality:50File size:11.83KB

测试工具 Smush.it™—— 现已集成到 Yslow Google Page Speed www.webpagetest.org

2010-6-17

Smush.it™

2010-6-17

Smush.it™ 优化结果

2010-6-17

Google Page Speed

2010-6-17

Google Page Speed 结果

2010-6-17

www.webpagetest.org

2010-6-17

Image Compression score : 78431.9 KB total in images, target size = 337.0 KB - potential savings = 94.8 KB

输出工具 Photoshop以下简称 PS Fireworks以下简称 FW

2010-6-17

Photoshop

2010-6-17

PS输出选项—— JPG

2010-6-17

PS输出选项—— Gif

2010-6-17

FW输出选项—— JPG

2010-6-17

支持选择性品质

FW输出选项—— PNG

2010-6-17

PS输出的图片比 FW 大

2010-6-17

http://www.webdesignerwall.com/general/fireworks-vs-photoshop-compression/

优化工具 Smush.it™ 网络在线工具，直观，依赖

网络 IrfanView 免费看图软件，拥有很多插

件 ( 可批量无损压缩 JPG) PngOptimizer 优化 PNG ，将 GIF 转换

成 PNG ，轻量，操作简便。

2010-6-17

服务端解决方案 ImageMagick 很强大、开源、工具包 Pngcrush 处理 PNG ，压缩率很高 Jpegtran 处理 JPG ，速度比

ImageMagick快 Gifsicle 优化动画

2010-6-17

参考资料http://zh.wikipedia.org/zh-cn/Jpghttp://zh.wikipedia.org/zh-cn/gifhttp://zh.wikipedia.org/zh-cn/png http://www.w3.org/TR/PNG/ http://zh.wikipedia.org/zh-cn/Category:%E8%89%B2%E5%BD%A9%E7%A9%BA%E9%97%B4

《 Even Faster Websites》CHAPTER 10 Optimizing Images2010-6-17

参考资料http://www.smashingmagazine.com/2009/07/01/clever-jpeg-optimization-techniques/

http://www.smashingmagazine.com/2009/07/15/clever-png-optimization-techniques/

http://www.webdesignerwall.com/general/fireworks-vs-photoshop-compression/

2010-6-17

Q&A

2010-6-17

谢谢！

2010-6-17