Image optimization for Sina.com
?Download as PPTX, PDF?
7 likes?1,813 views
Optimization principle and practice for common image formats such as JPEG, GIF, PNG, and so on
![JPG文件头Start Offset: 0x00000000*** Marker: SOI (xFFD8) ***OFFSET: 0x00000000*** Marker: APP0 (xFFE0) ***OFFSET: 0x00000002length = 16identifier = [JFIF]version = [1.1]density = 72 x 72 DPI (dots per inch)thumbnail = 0 x 0*** Marker: COM (Comment) (xFFFE) ***OFFSET: 0x00000014Comment length = 41Comment=Intel(R) JPEG Library, version 1,5,4,362010-6-17](https://image.slidesharecdn.com/webforsina-100624003814-phpapp01/85/Image-optimization-for-Sina-com-22-320.jpg)
![JPG Exif头*** Marker: APP1 (xFFE1) ***OFFSET: 0x00000002length = 10750Identifier = [Exif]Identifier TIFF = 0x[49492A00 08000000]Endian = Intel (little)TAG Mark x002A = 0x002AEXIF IFD0 @ Absolute 0x00000014Dir 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 ] = @ 0x00C4Offset to Next IFD = 0x00000C56EXIF IFD1 @ Absolute 0x00000C62Dir Length = 0x0006[Compression ] = JPEG[XResolution ] = 180/1[YResolution ] = 180/1[ResolutionUnit ] = Inch[JpegIFOffset ] = @ +0x13F4 = @ 0x1400[JpegIFByteCount ] = 5601Offset to Next IFD = 0x00000000EXIF SubIFD @ Absolute 0x000000D0Dir Length = 0x001F[ExposureTime ] = 1/1000 s …………](https://image.slidesharecdn.com/webforsina-100624003814-phpapp01/85/Image-optimization-for-Sina-com-23-320.jpg)
Image optimization for Sina.com
- 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
- 10. 首页横向对比2010-6-17
- 11. 2010-6-17
- 12. 2010-6-17
- 13. 2010-6-17
- 16. 眼睛成像原理2010-6-17
- 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
- 22. JPG文件头Start Offset: 0x00000000*** Marker: SOI (xFFD8) ***OFFSET: 0x00000000*** Marker: APP0 (xFFE0) ***OFFSET: 0x00000002length = 16identifier = [JFIF]version = [1.1]density = 72 x 72 DPI (dots per inch)thumbnail = 0 x 0*** Marker: COM (Comment) (xFFFE) ***OFFSET: 0x00000014Comment length = 41Comment=Intel(R) JPEG Library, version 1,5,4,362010-6-17
- 23. JPG Exif头*** Marker: APP1 (xFFE1) ***OFFSET: 0x00000002length = 10750Identifier = [Exif]Identifier TIFF = 0x[49492A00 08000000]Endian = Intel (little)TAG Mark x002A = 0x002AEXIF IFD0 @ Absolute 0x00000014Dir 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 ] = @ 0x00C4Offset to Next IFD = 0x00000C56EXIF IFD1 @ Absolute 0x00000C62Dir Length = 0x0006[Compression ] = JPEG[XResolution ] = 180/1[YResolution ] = 180/1[ResolutionUnit ] = Inch[JpegIFOffset ] = @ +0x13F4 = @ 0x1400[JpegIFByteCount ] = 5601Offset to Next IFD = 0x00000000EXIF SubIFD @ Absolute 0x000000D0Dir Length = 0x001F[ExposureTime ] = 1/1000 s …………
- 24. 闯笔贰骋图像压缩技术
- 25. 把RBG转换成YCrCbJPEG压缩第一步Y表示亮度，即LuminanceCr和Cb表示色彩，即ChrominanceCr 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)
- 29. JPEG压缩第五步Quantization 量化去掉一些高频量，它是利用了人眼对高频部分不敏感的特性来实现数据的大幅简化 。 使用这个量化矩阵与前面所得到的DCT系数矩阵，得到结果为： 一个普遍的量化矩阵是：举个例子，使用?415（DC系数）且舍位得到最接近的整数
- 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 JPEGs2010-6-17
- 34. 结论2010-6-17<10K,使用 baseline JPEG (大约有75% 的概率会比较小)>10K progressive JPEG 会有更好的压缩率 (实验数据： 94%)
- 38. 选择GIF格式的情况1。带运动的图像，即包含好多祯的图像2。图像很小gif的文件大小要比png小。(e.g. 尺寸<10x10 px, 或者颜色总数 < 3)其它情况：通常PNG文件小于GIF文件20%以上
- 40. 笔狈骋压缩技术
- 41. 笔狈骋压缩第一步
- 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
- 46. PNG对比GIF的压缩率GIF, 2568 bytesPNG, 372 bytesPNG中的Filteringhttp://www.smashingmagazine.com/2009/07/15/clever-png-optimization-techniques/
- 52. PNG In IE6@Windows PNG8在IE6 Alpha 不被正常显示。 Photoshop输出的是布尔透明的PNG8 ，非Alpha透明的PNG8 Fireworks 能够正常输出Alpha透明的PNG8 PNG32出现灰色。只能用AlphaImageLoader
- 53. 选择合适的图片格式照片，大面积非连续色调图像 JPG图标，线条，渐变，文本 PNG8设计师效果图，高质量要求图 PNG32尺寸非常小或颜色非常少或动画 GIF2010-6-17
- 54. 对输出的图像进行处理JPEG：选择合适的压缩比例 通常50就够了JPEG：去掉网页显示用不着的meta信息JPEG：优化Huffman tableJPEG：大于10k的JPG，尝试 辫谤辞驳谤别蝉蝉颈惫别静态的骋滨贵转换为笔狈骋去掉笔狈骋图片中用不着的信息2010-6-17
- 55. 质量与尺寸2010-6-17
- 57. Photoshop subsamplingPhotoshop save for web quality:51File size:13.92KBPhotoshop save for web quality:50File size:11.83KB
- 63. www.webpagetest.org2010-6-17Image Compression score : 78431.9 KB total in images, target size = 337.0 KB - potential savings = 94.8 KB
- 72. 服务端解决方案滨尘补驳别惭补驳颈肠办很强大、开源、工具包笔苍驳肠谤耻蝉丑处理笔狈骋，压缩率很高闯辫别驳迟谤补苍处理闯笔骋，速度比滨尘补驳别惭补驳颈肠办快骋颈蹿蝉颈肠濒别优化动画2010-6-17
- 73. 参考资料http://zh.wikipedia.org/zh-cn/Jpghttp://zh.wikipedia.org/zh-cn/gifhttp://zh.wikipedia.org/zh-cn/pnghttp://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
- 75. Q&A2010-6-17
- 76. 谢谢！2010-6-17