图片优化中常见的7大误区你犯了多少

图片优化 7 大误区及解决方案 Stoyan Stefanov Yahoo! Exceptional Performance Velocity, June 24th, 2008, San Francisco [email_address] [email_address] 翻译： [email_address]

关于这个 PPT ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

关于作者 ,[object Object],[object Object],[object Object],[object Object],[object Object]

嗯 , 图片 ? ,[object Object],[object Object],[object Object],[object Object]

图片流量占总流量的百分比 ? ,[object Object],[object Object],[object Object],[object Object],June 24th, 2008 1 Yahoo! 29% 2 Google 75% 3 YouTube 62% 4 Live.com 64% 5 MSN 41% 6 MySpace 48% 7 Wikipedia 39% 8 Facebook 35% 9 Blogger 27% 10 Yahoo! JP 36%

误区 #1: 明明 PNG 更小却使用 GIF （担心 IE6 不支持 PNG 透明）

GIF vs. PNG * IE < v.7 不能正常显示 PNG 的 Alpha 通道 GIF 调色板 PNG ( 即 PNG8, 也称索引色 ) 真彩色 PNG 颜色种类 256 256 最高 48 位透明布尔透明 (on/off) Alpha (variable) * Alpha (variable) * 浏览器支持几乎所有 All A-grade (96%+) All A-grade (96%+) 动画 Yes No (future) No (future)

PNG 透明在 IE 下的问题 ,[object Object],[object Object],PNG8 IE 7 或更高 IE 6 或更低结论 : IE7 以上没有问题 ; IE6 只支持像 GIF 一样的透明

GIF vs. PNG ,[object Object],[object Object],[object Object],[object Object]

GIF 转换成 PNG ,[object Object],1 Yahoo! 9.55% 2 Google 22.95% 3 YouTube 33.82% 4 Live.com 19.93% 5 MSN 13.53% 6 MySpace 17.65% 7 Wikipedia No GIFs! 8 Facebook 17.47% 9 Blogger 24.27% 10 Yahoo! JP 24.58%

解决方案 #1: 使用 PNG 替代 GIF 视觉无损的 !

关于 PNG 通道 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

全球前 10 网站的 PNG 压缩后的结果 ,[object Object],1 Yahoo! 15.52% 2 Google Reader 22.60% 3 YouTube 17.32% 4 Live.com No PNGs 5 MSN No PNGs 6 MySpace 25.44% 7 Wikipedia 21.32% 8 Facebook 9.08% 9 Blogger 1.07% 10 Yahoo! JP No PNGs

解决方案 #2: 压缩 PNGs 视觉无损的 !!

误区 #3: 不去掉 JPEG 的元数据 (metadata)

JPEG 元数据 (metadata) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

视觉无损的 ! JPEG 优化 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

用 jpegtran 优化十大网站 ,[object Object],1 Yahoo! 2.62% 2 Google No jpegs 3 YouTube 10.71% 4 Live.com 0.47% 5 MSN 7.43% 6 MySpace 4.28% 7 Wikipedia No jpegs 8 Facebook 13.59% 9 Blogger 38.35% 10 Yahoo! JP 17.31%

解决方案 #3: 去掉用不着的 JPEG 元数据视觉无损的 !!

误区 #4: PNG8 就够用时却使用 PNG32

真彩色 vs. 索引色 PNGs ,[object Object],[object Object],[object Object],[object Object],[object Object]

真彩色 vs. 索引色 PNGs ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

解决方案 #4: 把所有的 PNGs 转换为索引色 PNGs * ,[object Object],[object Object]

误区 #5: 使用 CSS alpha 滤镜

CSS 滤镜 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

放弃滤镜 ,[object Object],[object Object],[object Object]

解决方案 #5: 放弃 AlphaImageLoader , 尝试 PNG8 或者至少 _filter

误区 #6: 直接输出动态生成的图片

动态生成图片 ,[object Object],[object Object],[object Object],[object Object]

动态生成图片解决方案 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

案例 : Google charts API 原始 (707 colors) 压缩 (707 colors) PNG8 (256 colors) 节省 12% 节省 38%

案例 : Google charts API 原始 (1408 colors) 压缩 (1408 colors) PNG8 (256 colors) 节省 25% 节省 55% ( 去掉了 1000 多种颜色，但是谁能看出来 ?)

解决方案 #6: 压缩动态生成的图片视觉无损的 !!

误区 #7: 不合并背景图标

CSS Sprites ,[object Object],[object Object],[object Object],[object Object]

解决方案 #7: 使用 CSS Sprites 坚持使用索引色的 PNG8

另外的误区 : 不合理地使用 favicon.ico ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

另外误区 #2: 把图片部署在动态服务器上 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

卓越性能相关网址 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Thank you! [email_address] [email_address]

参考资料 ,[object Object],[object Object],[object Object]

图片优化中常见的7大误区你犯了多少

Recommended

Recommended

More Related Content

Similar to 图片优化中常见的7大误区你犯了多少

Similar to 图片优化中常见的7大误区你犯了多少 (20)

图片优化中常见的7大误区你犯了多少

Editor's Notes