Optimization principle and practice for common image formats such as JPEG, GIF, PNG, and so on

1. WEB图像优化 唐友华 youhua@staff.sina.com.cn

2. 为什么要优化？ 性能对业务的影响 Amazon：100ms的延迟导致降低1%的销售 Yahoo：400ms的延迟降低页面流量5%-9%。 Google：500ms的延迟降低20%的搜索量 Bing：500ms的延迟降低1.2%的收益 Sina: ? 我们的现状 对部分JPEG图片进行有损 压缩 对PNG图片格式的认识存在误区和盲区 绝大部分页面存在相当大的无损压缩空间

3. 南非世界杯 可优化401.62 KB 占总量的 18.57% 2010-6-17

4. 新浪微博 可优化211.20 KB 占总量的 37.33% 2010-6-17

5. 世博会 可优化176.33 KB占总量的 7.23% 2010-6-17

6. 博客首页推荐的某图片博客 可优化985.23 KB 占总量的 10.44% 2010-6-17

7. 新首 可优化33.29 KB占总量的 6.75% 2010-6-17

8. 浪首 可优化26.29 KB占总量的 4.00% 2010-6-17

9. 世界杯横向对比 2010-6-17

10. 首页横向对比 2010-6-17

11. 2010-6-17

12. 2010-6-17

13. 2010-6-17

14. 怎样优化 理论篇 基础颜色理论 常见图片格式 选择合适的图片格式 工具篇 测试工具 输出工具 优化工具 服务端解决方案 2010-6-17

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

16. 眼睛成像原理 2010-6-17

17. RGB颜色模式 可用灯光模拟 2010-6-17

18. HSV(HSB)及YUV 2010-6-17 HSB YUV

19. 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 的转换公式：

20. 常见图片格式 2010-6-17

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

22. 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

23. 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 …………

24. JPEG图像压缩技术

25. 把RBG转换成YCrCb JPEG压缩第一步 Y表示亮度，即Luminance Cr和Cb表示色彩，即Chrominance Cr red(RGB=97,0,0) Cb blue(RGB=0,0,255)

26. JPEG压缩第二步 Down Sampling 此步可有各种变换， Y:Cr:Cb 4:4:4(1x1) 4:2:2(2x1) 4:1:1 4:2:0(2x2)

27. JPEG压缩第三步 图像拆分成8*8pixels每块。

28. JPEG压缩第四步 每一块使用离散余弦变换(DCT)变换成频率数据。 例： 推移128 离散余弦变换，和舍位取最接近的整数，得到结果为 注意左上角之相当大的数值。这就是DC系数。

29. JPEG压缩第五步 Quantization 量化 去掉一些高频量，它是利用了人眼对高频部分不敏感的特性来实现数据的大幅简化 。 使用这个量化矩阵与前面所得到的DCT系数矩阵，得到结果为： 一个普遍的量化矩阵是： 举个例子，使用−415（DC系数）且舍位得到最接近的整数

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

31. 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

32. Baseline vs. progressive JPEGs 2010-6-17

33. 10360 张JPG图片做实验 2010-6-17

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

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

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

37. 间隔渐进显示 增大文件大小10%左右

38. 选择GIF格式的情况 1。带运动的图像，即包含好多祯的图像 2。图像很小gif的文件大小要比png小。 (e.g. 尺寸<10x10 px, 或者颜色总数 < 3) 其它情况： 通常PNG文件小于GIF文件20%以上

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

40. PNG压缩技术

41. PNG压缩第一步

42. PNG压缩第二步 使用zlib中第8种Deflate压缩, 一種由LZ77 Huffman coding组合而成的算法

43. LZ77策略查找 strategy ： Z_DEFAULT_STRATEGY = 0 Z_FILTERED = 1 Z_HUFFMAN_ONLY = 2 Z_RLE = 3

44. 间隔渐进显示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

45. 间隔渐进显示Adam7效果 间隔渐进显示大约增加文件大小20%. http://en.wikipedia.org/wiki/Adam7_algorithm

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

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

48. 色彩管理 File size：84KB File size：53KB 合并几乎相同的颜色 http://www.smashingmagazine.com/2009/07/15/clever-png-optimization-techniques/

49. 色彩管理 File size：75KB File size：30KB 移除不必要的透明通道 http://www.smashingmagazine.com/2009/07/15/clever-png-optimization-techniques/

50. Filtering的选择 None Up Sub 大部分的PNG8使用Filter None更好 http://www.smashingmagazine.com/2009/07/15/clever-png-optimization-techniques/

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

52. PNG In IE6@Windows PNG8在IE6 Alpha 不被正常显示。 Photoshop输出的是布尔透明的PNG8 ，非Alpha透明的PNG8 Fireworks 能够正常输出Alpha透明的PNG8 PNG32出现灰色。只能用AlphaImageLoader

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

54. 对输出的图像进行处理 JPEG：选择合适的压缩比例 通常50就够了 JPEG：去掉网页显示用不着的meta信息 JPEG：优化Huffman table JPEG：大于10k的JPG，尝试 progressive 静态的GIF转换为PNG 去掉PNG图片中用不着的信息 2010-6-17

55. 质量与尺寸 2010-6-17

56. Photoshop subsampling

57. Photoshop subsampling Photoshop save for web quality:51 File size:13.92KB Photoshop save for web quality:50 File size:11.83KB

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

59. Smush.it™ 2010-6-17

60. Smush.it™优化结果 2010-6-17

61. Google Page Speed 2010-6-17

62. Google Page Speed结果 2010-6-17

63. 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

64. 输出工具 Photoshop以下简称PS Fireworks以下简称FW 2010-6-17

65. Photoshop 2010-6-17

66. PS输出选项——JPG 2010-6-17

67. PS输出选项——Gif 2010-6-17

68. FW输出选项——JPG 2010-6-17 支持选择性品质

69. FW输出选项——PNG 2010-6-17

70. PS输出的图片比FW大 2010-6-17 http://www.webdesignerwall.com/general/fireworks-vs-photoshop-compression/

71. 优化工具 Smush.it™ 网络在线工具，直观，依赖网络 IrfanView免费看图软件，拥有很多插件(可批量无损压缩JPG) PngOptimizer优化PNG，将GIF转换成PNG，轻量，操作简便。 2010-6-17

72. 服务端解决方案 ImageMagick很强大、开源、工具包 Pngcrush处理PNG，压缩率很高 Jpegtran处理JPG，速度比ImageMagick快 Gifsicle优化动画 2010-6-17

73. 参考资料 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

74. 参考资料 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

75. Q&A 2010-6-17

76. 谢谢！ 2010-6-17