WEB图像优化<br />唐友华 youhua@staff.sina.com.cn<br />
为什么要优化?<br />性能对业务的影响<br />Amazon:100ms的延迟导致降低1%的销售<br />Yahoo:400ms的延迟降低页面流量5%-9%。<br />Google:500ms的延迟降低20%的搜索量<br />Bin...
南非世界杯<br />可优化401.62 KB 占总量的 18.57%<br />2010-6-17<br />
新浪微博<br />可优化211.20 KB 占总量的 37.33% <br />2010-6-17<br />
世博会<br />可优化176.33 KB占总量的 7.23% <br />2010-6-17<br />
博客首页推荐的某图片博客<br />可优化985.23 KB 占总量的  10.44% <br />2010-6-17<br />
新首<br />可优化33.29 KB占总量的 6.75% <br />2010-6-17<br />
浪首<br />可优化26.29 KB占总量的 4.00% <br />2010-6-17<br />
世界杯横向对比<br />2010-6-17<br />
首页横向对比<br />2010-6-17<br />
2010-6-17<br />
2010-6-17<br />
2010-6-17<br />
怎样优化<br />理论篇<br />基础颜色理论<br />常见图片格式<br />选择合适的图片格式<br />工具篇<br />测试工具<br />输出工具<br />优化工具<br />服务端解决方案<br />2010-6-17<br />
基础颜色理论<br />神说:要有光<br />光色三原色:RGB<br />HSV(HSB) 及YUV 色彩空间<br />2010-6-17<br />
眼睛成像原理<br />2010-6-17<br />
RGB颜色模式<br />可用灯光模拟<br />2010-6-17<br />
HSV(HSB)及YUV<br />2010-6-17<br />HSB<br />YUV<br />
YUV模型的特点<br />2010-6-17<br />为节省带宽起见,大多数 YUV 格式平均使用的每像素位数都少于24位元。主要的采样(subsample)格式有YCbCr 4:2:0、YCbCr 4:2:2、YCbCr 4:1:1和 Y...
常见图片格式<br />2010-6-17<br />
JPG<br />适合存储照片<br />可以存储缩略图<br />可以存储额外的文本信息<br />有损压缩<br />对线条和文字支持不好<br />支持渐进显示<br />每编辑一次损失一次<br />2010-6-17<br />
JPG文件头<br />Start Offset: 0x00000000<br />*** Marker: SOI (xFFD8) ***<br />OFFSET: 0x00000000<br />*** Marker: APP0 (xFFE0...
JPG Exif头<br />*** Marker: APP1 (xFFE1) ***<br />OFFSET: 0x00000002<br />length          = 10750<br />Identifier      = [E...
JPEG图像压缩技术<br />
把RBG转换成YCrCb<br />JPEG压缩第一步<br />Y表示亮度,即Luminance<br />Cr和Cb表示色彩,即Chrominance<br />Cr red(RGB=97,0,0)<br />Cb blue(RGB=0,0...
JPEG压缩第二步<br />Down Sampling<br />此步可有各种变换, Y:Cr:Cb<br />  4:4:4(1x1)<br />  4:2:2(2x1)<br />4:1:1<br />  4:2:0(2x2)<br />
JPEG压缩第三步<br />图像拆分成8*8pixels每块。<br />
JPEG压缩第四步<br />每一块使用离散余弦变换(DCT)变换成频率数据。<br />例:<br />推移128<br />离散余弦变换,和舍位取最接近的整数,得到结果为<br />注意左上角之相当大的数值。这就是DC系数。<br />
JPEG压缩第五步<br />Quantization 量化<br />去掉一些高频量,它是利用了人眼对高频部分不敏感的特性来实现数据的大幅简化 。 <br />使用这个量化矩阵与前面所得到的DCT系数矩阵,得到结果为: <br />一个普遍的...
JPEG压缩第六步<br />每MCU使用无损压缩。<br />熵编码中的霍夫曼编码(Huffman Coding)<br />熵编码<br />霍夫曼编码使用变长编码表对源符号(如文件中的一个字母)进行编码,其中变长编码表是通过一种评估来源符...
JPG不适合显示文本<br />JPEG image, 15% compression (85% quality), standard subsampling (4:2:2), 2193 bytes.<br />JPEG image, 35% ...
Baseline vs. progressive JPEGs<br />2010-6-17<br />
10360 张JPG图片做实验<br />2010-6-17<br />
结论<br />2010-6-17<br /><10K,使用 baseline JPEG (大约有75% 的概率会比较小)<br />>10K progressive JPEG 会有更好的压缩率 (实验数据: 94%)<br />
GIF<br />布尔透明,不支持Alpha透明<br />调色板图像,最高支持256色<br />无损图像格式(LZW)<br />水平扫描压缩<br />间隔渐进显示<br />2010-6-17<br />
1286KB<br />626KB<br />1109KB<br />324KB<br />平行对比垂直<br />
间隔渐进显示<br />增大文件大小10%左右<br />
选择GIF格式的情况<br />1。带运动的图像,即包含好多祯的图像<br />2。图像很小gif的文件大小要比png小。<br />(e.g. 尺寸<10x10 px, 或者颜色总数 < 3)<br />其它情况:<br />通常PNG文件小...
PNG<br />PNG8,PNG24,PNG32<br />支持布尔透明和Alpha透明<br />无损图像格式<br />Deflate压缩<br />间隔渐进显示<br />不支持动画(除非是APNG,MNG)<br />2010-6-1...
PNG压缩技术<br />
PNG压缩第一步<br />
PNG压缩第二步<br />使用zlib中第8种Deflate压缩,<br />一種由LZ77 Huffman coding组合而成的算法<br />
LZ77策略查找<br />strategy :<br />    Z_DEFAULT_STRATEGY = 0<br />    Z_FILTERED = 1<br />    Z_HUFFMAN_ONLY = 2<br />    Z_RL...
间隔渐进显示Adam7算法<br />8*8 pixel为单位,將图切成一個個block.<br />每个pixel的重要性:<br />1 6 4 6 2 6 4 6 <br />7 7 7 7 7 7 7 7 <br />5 6 5 6 5...
间隔渐进显示Adam7效果<br />间隔渐进显示大约增加文件大小20%.<br />http://en.wikipedia.org/wiki/Adam7_algorithm<br />
PNG对比GIF的压缩率<br />GIF, 2568 bytes<br />PNG, 372 bytes<br />PNG中的Filtering<br />http://www.smashingmagazine.com/2009/07/15/...
影响PNG文件大小的因素<br />移除不必要的Chunk<br />色彩管理<br />Flitering的选择<br />LZ77中的strategy<br />Huffman buffers的大小<br />
色彩管理<br />File size:84KB<br />File size:53KB<br />合并几乎相同的颜色<br />http://www.smashingmagazine.com/2009/07/15/clever-png-opt...
色彩管理<br />File size:75KB<br />File size:30KB<br />移除不必要的透明通道<br />http://www.smashingmagazine.com/2009/07/15/clever-png-op...
Filtering的选择<br />None<br />Up<br />Sub<br />大部分的PNG8使用Filter None更好<br />http://www.smashingmagazine.com/2009/07/15/cleve...
逐行显示增加文件大小约20%左右,不要使用<br />
PNG In IE6@Windows<br />	PNG8在IE6 Alpha 不被正常显示。<br />   Photoshop输出的是布尔透明的PNG8 ,非Alpha透明的PNG8<br />   Fireworks 能够正常输出Alph...
选择合适的图片格式<br />照片,大面积非连续色调图像       JPG<br />图标,线条,渐变,文本               PNG8<br />设计师效果图,高质量要求图       PNG32<br />尺寸非常小或颜色非常少...
对输出的图像进行处理<br />JPEG:选择合适的压缩比例 通常50就够了<br />JPEG:去掉网页显示用不着的meta信息<br />JPEG:优化Huffman table<br />JPEG:大于10k的JPG,尝试 progres...
质量与尺寸<br />2010-6-17<br />
Photoshop subsampling<br />
Photoshop subsampling<br />Photoshop save for web quality:51<br />File size:13.92KB<br />Photoshop save for web quality:50...
测试工具<br />Smush.it™——现已集成到Yslow<br />Google Page Speed<br />www.webpagetest.org<br />2010-6-17<br />
Smush.it™<br />2010-6-17<br />
Smush.it™优化结果<br />2010-6-17<br />
Google Page Speed<br />2010-6-17<br />
Google Page Speed结果<br />2010-6-17<br />
www.webpagetest.org<br />2010-6-17<br />Image Compression score : 78431.9 KB total in images, target size = 337.0 KB - pot...
输出工具<br />Photoshop以下简称PS<br />Fireworks以下简称FW<br />2010-6-17<br />
Photoshop<br />2010-6-17<br />
PS输出选项——JPG<br />2010-6-17<br />
PS输出选项——Gif<br />2010-6-17<br />
FW输出选项——JPG<br />2010-6-17<br />支持选择性品质<br />
FW输出选项——PNG<br />2010-6-17<br />
PS输出的图片比FW大<br />2010-6-17<br />http://www.webdesignerwall.com/general/fireworks-vs-photoshop-compression/<br />
优化工具<br />Smush.it™ 网络在线工具,直观,依赖网络<br />IrfanView免费看图软件,拥有很多插件(可批量无损压缩JPG)<br />PngOptimizer优化PNG,将GIF转换成PNG,轻量,操作简便。<br /...
服务端解决方案<br />ImageMagick很强大、开源、工具包<br />Pngcrush处理PNG,压缩率很高<br />Jpegtran处理JPG,速度比ImageMagick快<br />Gifsicle优化动画<br />2010...
参考资料<br />http://zh.wikipedia.org/zh-cn/Jpg<br />http://zh.wikipedia.org/zh-cn/gif<br />http://zh.wikipedia.org/zh-cn/png<...
参考资料<br />http://www.smashingmagazine.com/2009/07/01/clever-jpeg-optimization-techniques/<br />http://www.smashingmagazine...
Q&A<br />2010-6-17<br />
谢谢!<br />2010-6-17<br />
Upcoming SlideShare
Loading in …5
×

Optimizing Images for sina

3,984
-1

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,984
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
69
Comments
1
Likes
7
Embeds 0
No embeds

No notes for slide

Optimizing Images for sina

  1. 1. WEB图像优化<br />唐友华 youhua@staff.sina.com.cn<br />
  2. 2. 为什么要优化?<br />性能对业务的影响<br />Amazon:100ms的延迟导致降低1%的销售<br />Yahoo:400ms的延迟降低页面流量5%-9%。<br />Google:500ms的延迟降低20%的搜索量<br />Bing:500ms的延迟降低1.2%的收益<br />Sina: ?<br />我们的现状<br />对部分JPEG图片进行有损 压缩<br />对PNG图片格式的认识存在误区和盲区<br />绝大部分页面存在相当大的无损压缩空间<br />
  3. 3. 南非世界杯<br />可优化401.62 KB 占总量的 18.57%<br />2010-6-17<br />
  4. 4. 新浪微博<br />可优化211.20 KB 占总量的 37.33% <br />2010-6-17<br />
  5. 5. 世博会<br />可优化176.33 KB占总量的 7.23% <br />2010-6-17<br />
  6. 6. 博客首页推荐的某图片博客<br />可优化985.23 KB 占总量的 10.44% <br />2010-6-17<br />
  7. 7. 新首<br />可优化33.29 KB占总量的 6.75% <br />2010-6-17<br />
  8. 8. 浪首<br />可优化26.29 KB占总量的 4.00% <br />2010-6-17<br />
  9. 9. 世界杯横向对比<br />2010-6-17<br />
  10. 10. 首页横向对比<br />2010-6-17<br />
  11. 11. 2010-6-17<br />
  12. 12. 2010-6-17<br />
  13. 13. 2010-6-17<br />
  14. 14. 怎样优化<br />理论篇<br />基础颜色理论<br />常见图片格式<br />选择合适的图片格式<br />工具篇<br />测试工具<br />输出工具<br />优化工具<br />服务端解决方案<br />2010-6-17<br />
  15. 15. 基础颜色理论<br />神说:要有光<br />光色三原色:RGB<br />HSV(HSB) 及YUV 色彩空间<br />2010-6-17<br />
  16. 16. 眼睛成像原理<br />2010-6-17<br />
  17. 17. RGB颜色模式<br />可用灯光模拟<br />2010-6-17<br />
  18. 18. HSV(HSB)及YUV<br />2010-6-17<br />HSB<br />YUV<br />
  19. 19. YUV模型的特点<br />2010-6-17<br />为节省带宽起见,大多数 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 表示法:<br />4:4:4 表示完全取样。<br />4:2:2 表示 2:1 的水平取样,没有垂直下采样。<br />4:2:0 表示 2:1 的水平取样,2:1 的垂直下采样。<br />4:1:1 表示 4:1 的水平取样,没有垂直下采样。<br />YUV 与 RGB 的转换公式: <br />
  20. 20. 常见图片格式<br />2010-6-17<br />
  21. 21. JPG<br />适合存储照片<br />可以存储缩略图<br />可以存储额外的文本信息<br />有损压缩<br />对线条和文字支持不好<br />支持渐进显示<br />每编辑一次损失一次<br />2010-6-17<br />
  22. 22. JPG文件头<br />Start Offset: 0x00000000<br />*** Marker: SOI (xFFD8) ***<br />OFFSET: 0x00000000<br />*** Marker: APP0 (xFFE0) ***<br />OFFSET: 0x00000002<br />length = 16<br />identifier = [JFIF]<br />version = [1.1]<br />density = 72 x 72 DPI (dots per inch)<br />thumbnail = 0 x 0<br />*** Marker: COM (Comment) (xFFFE) ***<br />OFFSET: 0x00000014<br />Comment length = 41<br />Comment=Intel(R) JPEG Library, version 1,5,4,36<br />2010-6-17<br />
  23. 23. JPG Exif头<br />*** Marker: APP1 (xFFE1) ***<br />OFFSET: 0x00000002<br />length = 10750<br />Identifier = [Exif]<br />Identifier TIFF = 0x[49492A00 08000000]<br />Endian = Intel (little)<br />TAG Mark x002A = 0x002A<br />EXIF IFD0 @ Absolute 0x00000014<br />Dir Length = 0x0009<br />[Make ] = "Canon"<br />[Model ] = "Canon PowerShot A710 IS"<br />[Orientation ] = Row 0: top, Col 0: left<br />[XResolution ] = 180/1<br />[YResolution ] = 180/1<br />[ResolutionUnit ] = Inch<br />[DateTime ] = "2007:04:27 11:52:06"<br />[YCbCrPositioning ] = Centered<br />[ExifOffset ] = @ 0x00C4<br />Offset to Next IFD = 0x00000C56<br />EXIF IFD1 @ Absolute 0x00000C62<br />Dir Length = 0x0006<br />[Compression ] = JPEG<br />[XResolution ] = 180/1<br />[YResolution ] = 180/1<br />[ResolutionUnit ] = Inch<br />[JpegIFOffset ] = @ +0x13F4 = @ 0x1400<br />[JpegIFByteCount ] = 5601<br />Offset to Next IFD = 0x00000000<br />EXIF SubIFD @ Absolute 0x000000D0<br />Dir Length = 0x001F<br />[ExposureTime ] = 1/1000 s<br /> …………<br />
  24. 24. JPEG图像压缩技术<br />
  25. 25. 把RBG转换成YCrCb<br />JPEG压缩第一步<br />Y表示亮度,即Luminance<br />Cr和Cb表示色彩,即Chrominance<br />Cr red(RGB=97,0,0)<br />Cb blue(RGB=0,0,255)<br />
  26. 26. JPEG压缩第二步<br />Down Sampling<br />此步可有各种变换, Y:Cr:Cb<br /> 4:4:4(1x1)<br /> 4:2:2(2x1)<br />4:1:1<br /> 4:2:0(2x2)<br />
  27. 27. JPEG压缩第三步<br />图像拆分成8*8pixels每块。<br />
  28. 28. JPEG压缩第四步<br />每一块使用离散余弦变换(DCT)变换成频率数据。<br />例:<br />推移128<br />离散余弦变换,和舍位取最接近的整数,得到结果为<br />注意左上角之相当大的数值。这就是DC系数。<br />
  29. 29. JPEG压缩第五步<br />Quantization 量化<br />去掉一些高频量,它是利用了人眼对高频部分不敏感的特性来实现数据的大幅简化 。 <br />使用这个量化矩阵与前面所得到的DCT系数矩阵,得到结果为: <br />一个普遍的量化矩阵是:<br />举个例子,使用−415(DC系数)且舍位得到最接近的整数<br />
  30. 30. JPEG压缩第六步<br />每MCU使用无损压缩。<br />熵编码中的霍夫曼编码(Huffman Coding)<br />熵编码<br />霍夫曼编码使用变长编码表对源符号(如文件中的一个字母)进行编码,其中变长编码表是通过一种评估来源符号出现机率的方法得到的,出现机率高的字母 使用较短的编码,反之出现机率低的则使用较长的编码,这便使编码之后的字符串的平均长度、期望值降低,从而达到无损压缩数据的目的。<br /> Z型扫描矩阵的顺序<br />
  31. 31. JPG不适合显示文本<br />JPEG image, 15% compression (85% quality), standard subsampling (4:2:2), 2193 bytes.<br />JPEG image, 35% compression (65% quality), no subsampling (4:4:4), 2224 bytes.<br />PNG Image, 4-bit color(16 color palette) , best compression (level 9), 809 bytes.<br />GIF image, 4-bit color (16 color palette), non-interlaced, 916 bytes.<br />2010-6-17<br />
  32. 32. Baseline vs. progressive JPEGs<br />2010-6-17<br />
  33. 33. 10360 张JPG图片做实验<br />2010-6-17<br />
  34. 34. 结论<br />2010-6-17<br /><10K,使用 baseline JPEG (大约有75% 的概率会比较小)<br />>10K progressive JPEG 会有更好的压缩率 (实验数据: 94%)<br />
  35. 35. GIF<br />布尔透明,不支持Alpha透明<br />调色板图像,最高支持256色<br />无损图像格式(LZW)<br />水平扫描压缩<br />间隔渐进显示<br />2010-6-17<br />
  36. 36. 1286KB<br />626KB<br />1109KB<br />324KB<br />平行对比垂直<br />
  37. 37. 间隔渐进显示<br />增大文件大小10%左右<br />
  38. 38. 选择GIF格式的情况<br />1。带运动的图像,即包含好多祯的图像<br />2。图像很小gif的文件大小要比png小。<br />(e.g. 尺寸<10x10 px, 或者颜色总数 < 3)<br />其它情况:<br />通常PNG文件小于GIF文件20%以上<br />
  39. 39. PNG<br />PNG8,PNG24,PNG32<br />支持布尔透明和Alpha透明<br />无损图像格式<br />Deflate压缩<br />间隔渐进显示<br />不支持动画(除非是APNG,MNG)<br />2010-6-17<br />
  40. 40. PNG压缩技术<br />
  41. 41. PNG压缩第一步<br />
  42. 42. PNG压缩第二步<br />使用zlib中第8种Deflate压缩,<br />一種由LZ77 Huffman coding组合而成的算法<br />
  43. 43. LZ77策略查找<br />strategy :<br /> Z_DEFAULT_STRATEGY = 0<br /> Z_FILTERED = 1<br /> Z_HUFFMAN_ONLY = 2<br /> Z_RLE = 3<br />
  44. 44. 间隔渐进显示Adam7算法<br />8*8 pixel为单位,將图切成一個個block.<br />每个pixel的重要性:<br />1 6 4 6 2 6 4 6 <br />7 7 7 7 7 7 7 7 <br />5 6 5 6 5 6 5 6 <br />7 7 7 7 7 7 7 7 <br />3 6 4 6 3 6 4 6 <br />7 7 7 7 7 7 7 7 <br />5 6 5 6 5 6 5 6 <br />7 7 7 7 7 7 7 7<br />
  45. 45. 间隔渐进显示Adam7效果<br />间隔渐进显示大约增加文件大小20%.<br />http://en.wikipedia.org/wiki/Adam7_algorithm<br />
  46. 46. PNG对比GIF的压缩率<br />GIF, 2568 bytes<br />PNG, 372 bytes<br />PNG中的Filtering<br />http://www.smashingmagazine.com/2009/07/15/clever-png-optimization-techniques/<br />
  47. 47. 影响PNG文件大小的因素<br />移除不必要的Chunk<br />色彩管理<br />Flitering的选择<br />LZ77中的strategy<br />Huffman buffers的大小<br />
  48. 48. 色彩管理<br />File size:84KB<br />File size:53KB<br />合并几乎相同的颜色<br />http://www.smashingmagazine.com/2009/07/15/clever-png-optimization-techniques/<br />
  49. 49. 色彩管理<br />File size:75KB<br />File size:30KB<br />移除不必要的透明通道<br />http://www.smashingmagazine.com/2009/07/15/clever-png-optimization-techniques/<br />
  50. 50. Filtering的选择<br />None<br />Up<br />Sub<br />大部分的PNG8使用Filter None更好<br />http://www.smashingmagazine.com/2009/07/15/clever-png-optimization-techniques/<br />
  51. 51. 逐行显示增加文件大小约20%左右,不要使用<br />
  52. 52. PNG In IE6@Windows<br /> PNG8在IE6 Alpha 不被正常显示。<br /> Photoshop输出的是布尔透明的PNG8 ,非Alpha透明的PNG8<br /> Fireworks 能够正常输出Alpha透明的PNG8<br /> PNG32出现灰色。只能用AlphaImageLoader<br />
  53. 53. 选择合适的图片格式<br />照片,大面积非连续色调图像 JPG<br />图标,线条,渐变,文本 PNG8<br />设计师效果图,高质量要求图 PNG32<br />尺寸非常小或颜色非常少或动画 GIF<br />2010-6-17<br />
  54. 54. 对输出的图像进行处理<br />JPEG:选择合适的压缩比例 通常50就够了<br />JPEG:去掉网页显示用不着的meta信息<br />JPEG:优化Huffman table<br />JPEG:大于10k的JPG,尝试 progressive<br />静态的GIF转换为PNG<br />去掉PNG图片中用不着的信息<br />2010-6-17<br />
  55. 55. 质量与尺寸<br />2010-6-17<br />
  56. 56. Photoshop subsampling<br />
  57. 57. Photoshop subsampling<br />Photoshop save for web quality:51<br />File size:13.92KB<br />Photoshop save for web quality:50<br />File size:11.83KB<br />
  58. 58. 测试工具<br />Smush.it™——现已集成到Yslow<br />Google Page Speed<br />www.webpagetest.org<br />2010-6-17<br />
  59. 59. Smush.it™<br />2010-6-17<br />
  60. 60. Smush.it™优化结果<br />2010-6-17<br />
  61. 61. Google Page Speed<br />2010-6-17<br />
  62. 62. Google Page Speed结果<br />2010-6-17<br />
  63. 63. www.webpagetest.org<br />2010-6-17<br />Image Compression score : 78431.9 KB total in images, target size = 337.0 KB - potential savings = 94.8 KB<br />
  64. 64. 输出工具<br />Photoshop以下简称PS<br />Fireworks以下简称FW<br />2010-6-17<br />
  65. 65. Photoshop<br />2010-6-17<br />
  66. 66. PS输出选项——JPG<br />2010-6-17<br />
  67. 67. PS输出选项——Gif<br />2010-6-17<br />
  68. 68. FW输出选项——JPG<br />2010-6-17<br />支持选择性品质<br />
  69. 69. FW输出选项——PNG<br />2010-6-17<br />
  70. 70. PS输出的图片比FW大<br />2010-6-17<br />http://www.webdesignerwall.com/general/fireworks-vs-photoshop-compression/<br />
  71. 71. 优化工具<br />Smush.it™ 网络在线工具,直观,依赖网络<br />IrfanView免费看图软件,拥有很多插件(可批量无损压缩JPG)<br />PngOptimizer优化PNG,将GIF转换成PNG,轻量,操作简便。<br />2010-6-17<br />
  72. 72. 服务端解决方案<br />ImageMagick很强大、开源、工具包<br />Pngcrush处理PNG,压缩率很高<br />Jpegtran处理JPG,速度比ImageMagick快<br />Gifsicle优化动画<br />2010-6-17<br />
  73. 73. 参考资料<br />http://zh.wikipedia.org/zh-cn/Jpg<br />http://zh.wikipedia.org/zh-cn/gif<br />http://zh.wikipedia.org/zh-cn/png<br />http://www.w3.org/TR/PNG/<br />http://zh.wikipedia.org/zh-cn/Category:%E8%89%B2%E5%BD%A9%E7%A9%BA%E9%97%B4<br />《Even Faster Websites》<br />CHAPTER 10 Optimizing Images<br />2010-6-17<br />
  74. 74. 参考资料<br />http://www.smashingmagazine.com/2009/07/01/clever-jpeg-optimization-techniques/<br />http://www.smashingmagazine.com/2009/07/15/clever-png-optimization-techniques/<br />http://www.webdesignerwall.com/general/fireworks-vs-photoshop-compression/<br />2010-6-17<br />
  75. 75. Q&A<br />2010-6-17<br />
  76. 76. 谢谢!<br />2010-6-17<br />
  1. Gostou de algum slide específico?

    Recortar slides é uma maneira fácil de colecionar informações para acessar mais tarde.

×