Your SlideShare is downloading. ×

Optimizing Images for sina

3,896

Published on

Published in: Technology
1 Comment
7 Likes
Statistics
Notes
  • 终于翻墙出来了,学习了~
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
3,896
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
69
Comments
1
Likes
7
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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

×