1. 图片背后的秘密
— — We b 图 片 优 化
新浪微博 @Bencalie

2. Web Image Optimization
主要内容
I. 微博上的图片
II. 当浏览器遇上<img />
III. 优化的关键点
IV. 常见Web 图片格式 (※)
V. 如何优化 (※)
VI. 优化工具

3. Web Image Optimization
I. 微博上的图片

4. Web Image Optimization
HTTP Request
weibo.com 65 9
weibo.com/home 101 21
open.weibo.com 24 9
sina.com.cn 35 88
facebook.com 10 3
twitter.com 10 4
qq.com 70 34
taobao.com 30 43
google.com.hk 6 10
baidu.com 6 7
0 20 40 60 80 100 120 140
images other
2012.4.30 Results from Fiddler web debugger

5. Web Image Optimization
可优化14.2K，占28%

6. Web Image Optimization
可优化21.3K，占32%

7. Web Image Optimization
可优化50.5K，占36%

8. Web Image Optimization
掐指一算
• 1Kb * 10万PV = 97.65Mb
• 1Kb * 5亿PV = 488382.25Mb = 476.84 Gb
• 如果是 30Kb?

9. Web Image Optimization
是时候给这些图片减减肥了

10. Web Image Optimization
II. 当浏览器遇上<img>

11. Web Image Optimization
嵌入图片的形式
• <img src="" />
• style="background-image：url()"
• <input type="image" src="" />

12. Web Image Optimization
• 浏览器解析 HTML <img>
• 向图片服务器发起http(s)请求
• 浏览器接收图片，进行渲染

13. Web Image Optimization
<img src="example.jpg"
width="413" height="280" border="1"
title="Follower with eight colors"
alt="Follower" />
width height title alt border

14. Web Image Optimization
III. 优化的关键点
• HTTP 请求
• 文件尺寸
• 图片渲染
• 体验增强
• 搜索引擎优化(SEO)

15. Web Image Optimization
如何发现可优化的点
• Yahoo YSLOW
• Google PageSpeed
• http://www.webpagetest.org/

16. Web Image Optimization
IV. 常见Web图片格式

17. Web Image Optimization
矢量图与位图

18. Web Image Optimization
透明度

19. Web Image Optimization
有损压缩与无损压缩
• 有损压缩如同缩略一本书，无法还原原书
• 每次保存都是有损的
• 无损压缩像是zip打包文件

20. Web Image Optimization
图片的最小单元是像素

21. Web Image Optimization
Red，Green，Blue，Alpha
Max colors：256*256*256=16777216

22. Web Image Optimization
GIF
PNG8
索引色

23. Web Image Optimization
微博Logo的颜色表

24. Web Image Optimization
• 索引色
• 无损压缩
• 支持全透明
• 动画
• 专利算法 LZW

25. Web Image Optimization
• RGB
• 有损压缩
• 通过压缩率来改变文件质量
• 扩展名 .jpg/.jpeg

26. Web Image Optimization
• PNG8 / PNG24
• RGB
• 无损压缩
• 支持alpha透明（色彩丰富且半透图片的选择）

27. Web Image Optimization
• WEBP https://developers.google.com/speed/webp/?hl=zh-CN
– 有损压缩，派生自图像编码格式VP8
– 质量相同的情况下，WebP体积比JPEG小40%
• SVG(Scalable Vector Graphics)

28. Web Image Optimization
图片格式 色彩数目 图像模式 压缩形式 动画 备注
GIF 256 索引 无损 是 支持透明，交错显示及动画
颜色简单的标识、大面积同
样色块
JPEG 1670万 RGB 有损 否 ISO第一套静态图像压缩标
准
JPEG2000 1670万 RGB 有损，但 否 提高了压缩率，并引入了无
支持无损 损压缩，支持网上的渐显传
输
PNG8 256 索引 无损 否 256色以下采用索引模式，
可交错显示
PNG24 1670万 RGB 无损 否
SVG 1670万 矢量 无损 否
WebP 1670万 RGB 有损 否

29. Web Image Optimization
V. 如何优化

30. Web Image Optimization
Rule 1
Less image connections
更少的图片请求

31. Web Image Optimization
一定要使用图片吗？
呈现相同信息量的数据，图片的劣势很明显
圆角、阴影、渐变CSS都可以搞定

32. Web Image Optimization
border-radius linear-gradient box-shadow

33. Web Image Optimization
CSS Sprites(雪碧图)
background-position: -10px -20px;

34. Web Image Optimization
data:URI
在线转换工具：
http://websemantics.co.uk/online_tools/ima
ge_to_data_uri_convertor/

35. Web Image Optimization
data:URI
优点：
图片请求变少
缺点：
不能利用缓存
不支持缩放
浏览器兼容性不佳

36. Web Image Optimization
MHTML(IE8-)

37. Web Image Optimization
MHTML
优点：
图片请求变少
缺点：
不能利用缓存
不支持缩放
浏览器兼容性不佳
安全风险

38. Web Image Optimization
Rule 2
Choose the best image format
选择最佳的图片格式

39. Web Image Optimization
PNG VS GIF
• 除非使用GIF动画，否则PNG8可以替代GIF
• PNG8压缩率高于GIF
• PNG 没有专利问题
• 除了IE6，支持Alpha透明

40. Web Image Optimization
GIF抖动
抖动(Dithering)，会增加图片大小(除非真有必要)

41. Web Image Optimization
PNG VS JPEG
• 存照片还是用JPEG，文件尺寸更小
• Alpha透明，且色彩丰富，用PNG

42. Web Image Optimization
小结
• 动画用GIF
• 图标、按钮等色彩简单的用PNG8
• Alpha透明，色彩丰富(>256)，用PNG24
• 色彩非常丰富的照片，用JPEG

43. Web Image Optimization
Rule 3
Minify file size
图片文件压缩

44. Web Image Optimization
降低颜色数量

45. Web Image Optimization
降低图片质量

46. Web Image Optimization
降低图片质量
• 100%并不一定是最高的品质
• 慎用50%以下的压缩率，失真非常严重 U

47. Web Image Optimization
移除exif、软件附加信息

48. Web Image Optimization
图片使用无cookie域名

49. Web Image Optimization
Rule 4
Efficient rendering
提高图片渲染效率

50. Web Image Optimization
图片指定宽高

51. Web Image Optimization
不缩放图片

52. Web Image Optimization
Rule 5
Better user experience
提升图片用户体验

53. Web Image Optimization
交错gif和渐进JPG

54. Web Image Optimization
交错gif和渐进JPG

55. Web Image Optimization
渐进JPEG优化
• 逐行显示
• 逐行显示，但是用霍夫曼算法(Huffman Coding)
优化
• 渐进JPG

56. Web Image Optimization
交错gif和渐进JPG

57. Web Image Optimization
IMG lowsrc
<img lowsrc="低分辨率图片" src="高分辨率图片“/>

58. Web Image Optimization
优化手段总结
• 使用CSS做一些特效设计，不支持浏览器降级处理
• 可采用CSS Sprite
• 不使用data-uri和MHTML
• GIF、PNG、JPEG按需选择
• 降低图片颜色和压缩比
• 移除 EXIF 和软件信息

59. Web Image Optimization
优化手段总结
• 使用无cookie的图片域名
• 图片在 HTML 中指定宽高
• 不要缩放图片
• 使用交错 GIF 和渐进 JPG 增强体验

60. Web Image Optimization
VI. 优化工具

61. Web Image Optimization
• 在线优化工具
• 本地优化工具
– GUI界面
– 命令行

62. Web Image Optimization
Yahoo Smush it!

63. Web Image Optimization
• DynamicDrive
• PunyPNG
• SiteReportCard
• WebResizer
• StanleyShilov
• PNGCrush
• PngRewrite
• PNGOptimizer
• ImageOptimizer

64. Web Image Optimization
GUI Tools
• ROIT
• PNGGauntlet
• ImageOptim
• JPEG&PNG Stripper
• JPG Cleaner
• SuperGIF
• TweakPNG

65. Web Image Optimization
Command Tools
• PNGOUT
• PNGCrush
• OptiPNG
• JPEGTran
• gifsicle

66. Web Image Optimization
Automation

67. Web Image Optimization
• 过程自动化，无需人工介入
• 无损压缩，不担心图片质量受损
• 使用免费的命令行工具

68. Web Image Optimization
说在最后

69. Web Image Optimization
• 不可过度优化，尤其是有损压缩是以损失图片质
量为代价的
• 优化也要考虑到后期维护成本
• 牺牲部分视觉特效，可能换来性能大幅提升

70. Thank You