Optimizing Images for sina

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

新首
2010-6-17

浪首
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 的转换公式：

常见图片格式
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表示色彩，即Chrominance
Cr 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压缩第六步
每MCU使用无损压缩。
熵编码中的霍夫曼编码(Huffman Coding)
熵编码
霍夫曼编码使用变长编码表对源符号（如文件中的一个字母）进行编码，其中变长编码表是通过一种评估来源符号出现机率的方法得到的，出现机率高的字母使用较短的编码，反之出现机率低的则使用较长的编码，这便使编码之后的字符串的平均长度、期望值降低，从而达到无损压缩数据的目的。
Z型扫描矩阵的顺序

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

1286KB
626KB
1109KB
324KB
平行对比垂直

间隔渐进显示
增大文件大小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压缩第一步

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效果
间隔渐进显示大约增加文件大小20%.
http://en.wikipedia.org/wiki/Adam7_algorithm

PNG对比GIF的压缩率
GIF, 2568 bytes
PNG, 372 bytes
PNG中的Filtering
http://www.smashingmagazine.com/2009/07/15/clever-png-optimization-techniques/

影响PNG文件大小的因素
移除不必要的Chunk
色彩管理
Flitering的选择
LZ77中的strategy
Huffman buffers的大小

色彩管理
File size：84KB
File size：53KB
合并几乎相同的颜色

色彩管理
File size：75KB
File size：30KB
移除不必要的透明通道

Filtering的选择
None
Up
Sub
大部分的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

Photoshop subsampling
Photoshop save for web quality:51
File size:13.92KB
Photoshop save for web quality:50
File 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/Jpg
http://zh.wikipedia.org/zh-cn/gif
http://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 Images
2010-6-17

参考资料
http://www.smashingmagazine.com/2009/07/01/clever-jpeg-optimization-techniques/
http://www.webdesignerwall.com/general/fireworks-vs-photoshop-compression/
2010-6-17

Q&A
2010-6-17

谢谢！
2010-6-17

Optimizing Images for sina

by youhua tang on Jun 24, 2010

Accessibility

Categories

Upload Details

Usage Rights

Statistics

Optimizing Images for sina Presentation Transcript