图片优化   7  大误区及解决方案 Stoyan Stefanov Yahoo! Exceptional Performance Velocity, June 24th, 2008, San Francisco [email_address]...
关于这个 PPT <ul><li>面向非设计人员的图片优化 </li></ul><ul><li>所有网站都存在的 7 大误区 </li></ul><ul><li>只需改善细节 , 即可获得巨大收益 </li></ul><ul><li>轻松实现:...
关于作者 <ul><li>Yahoo! Exceptional Performance    (research, consulting) </li></ul><ul><li>YSlow lead developer </li></ul><ul...
嗯 ,  图片 ? <ul><li>Q:  这东西 重要吗 ? </li></ul><ul><li>A:  让我们对 </li></ul><ul><li>全球排名前 10 </li></ul><ul><li>的网站做个测试 . </li></ul>
图片流量占总流量的百分比 ? <ul><li>平均   45.6% </li></ul><ul><li>不一定绝对精确 ,  但是非常接近 </li></ul><ul><li>你的网站或许不同 , 例如:   amazon.com  有   7...
误区 #1: 明明 PNG  更小却使用 GIF  (担心 IE6 不支持 PNG 透明)
GIF vs. PNG * IE < v.7  不能正常显示 PNG 的 Alpha 通道 GIF 调色板   PNG  ( 即   PNG8,  也称   索引色 ) 真彩色   PNG 颜色种类 256 256 最高 48 位 透明 布尔透...
PNG  透明   在 IE 下的问题 <ul><li>真彩色   PNG </li></ul><ul><li>IE 7  或更高  IE 6  或更低 </li></ul>PNG8 IE 7  或更高   IE 6  或更低 结论 : IE7...
GIF vs. PNG <ul><li>GIF  能做的 PNG8  都能做! (除了动画) </li></ul><ul><li>PNG8  在所有的现代浏览器上表现良好   </li></ul><ul><li>Q:  我们来看看文件大小 ? ...
GIF 转换成 PNG <ul><li>平均 节省 20.42% </li></ul>1 Yahoo! 9.55% 2 Google 22.95% 3 YouTube 33.82% 4 Live.com 19.93% 5 MSN 13.53% ...
解决方案   #1: 使用   PNG  替代   GIF 视觉无损的 !
误区   #2: 不压缩   PNGs
关于   PNG  通道 <ul><li>PNGs  使用  “ 通道 ” 存储信息 </li></ul><ul><li>绝大部分通道可以安全地删掉 </li></ul><ul><li>绝大部分图片处理程序   没有   优化 </li></u...
全球前 10 网站的 PNG 压缩后的结果 <ul><li>平均 节省 16.05% </li></ul>1 Yahoo! 15.52% 2 Google Reader 22.60% 3 YouTube 17.32% 4 Live.com No...
解决方案   #2: 压缩 PNGs 视觉无损的 !!
误区 #3: 不去掉   JPEG  的元数据 (metadata)
JPEG  元数据 (metadata) <ul><li>注释 </li></ul><ul><li>EXIF  </li></ul><ul><ul><li>相机信息 ( 光圈,曝光时间, GPS 等 ) </li></ul></ul><ul><...
视觉无损的 ! JPEG  优化 <ul><li>jpegtran  ( http://jpegclub.org/ ) </li></ul><ul><li>免费的命令行工具 </li></ul><ul><li>视觉无损地裁剪、旋转 </li><...
用   jpegtran  优化   十大网站 <ul><li>平均   节省 11.85% </li></ul>1 Yahoo! 2.62% 2 Google No jpegs 3 YouTube 10.71% 4 Live.com 0.47...
解决方案   #3: 去掉用不着的   JPEG  元数据 视觉无损的 !!
误区 #4:  PNG8 就够用时却使用   PNG32
真彩色 vs.  索引色   PNGs <ul><li>索引色 PNGs (PNG8)  最多只能有   256 colors </li></ul><ul><li>真彩色   PNGs  有一千六百多万 (256^3= 16,777,216) ...
真彩色  vs.  索引色 PNGs <ul><li>将真彩色 PNG 转换成索引色 </li></ul><ul><li>节省   50%  文件大小 </li></ul><ul><li>解决   IE6  下的透明问题 </li></ul><...
真彩色 vs.  索引色 PNGs <ul><li>命令行工具 : </li></ul><ul><li>pngquant  ( http://www.libpng.org/pub/png/apps/pngquant.html ) </li></...
解决方案   #4: 把所有的   PNGs  转换为索引色 PNGs * <ul><li>*  需要手动检查转换结果 </li></ul><ul><li>( 特殊情况除外 ) </li></ul>
误区 #5: 使用 CSS alpha  滤镜
CSS  滤镜 <ul><li>回到真彩色 PNG alpha  透明在 IE6 下的问题上来 </li></ul><ul><li>AlphaImageLoader  CSS  滤镜可以解决这个问题 </li></ul><ul><li>IE6/...
放弃滤镜 <ul><li>最好 :  完全放弃 ,  使用 PNG8 alpha  优雅降级 </li></ul><ul><li>可行 :  使用下划线   hack  _filter </li></ul><ul><li>Yahoo! Sear...
解决方案   #5: 放弃   AlphaImageLoader , 尝试   PNG8  或者至少   _filter
误区 #6: 直接输出动态生成的图片
动态生成图片 <ul><li>GD library  生成的图片并没有像 pngcrush 一样压缩 </li></ul><ul><li>生成出来的图片偏大 </li></ul><ul><li>从大到小 : 生成   GIF >  生成 PNG...
动态生成图片解决方案 <ul><li>第一次请求 : </li></ul><ul><li>生成 </li></ul><ul><li>写入硬盘 </li></ul><ul><li>pngcrush </li></ul><ul><li>发送 </l...
案例 : 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 CSS: HTML: …
CSS Sprites <ul><li>合并后文件通常变小 </li></ul><ul><li>节省   HTTP  请求   </li></ul><ul><li>参考 :  http://alistapart.com/articles/spr...
优化 sprites
解决方案   #7: 使用  CSS Sprites 坚持使用索引色的   PNG8
另外的误区 :  不合理地使用   favicon.ico <ul><li>www.example.org/favicon.ico </li></ul><ul><li>不可避免的灾难 : </li></ul><ul><ul><li>浏览器无论如...
另外误区 #2:  把图片部署在动态服务器上 <ul><li>建议 1:  使用   CDN </li></ul><ul><li>建议   2:  准备一台静态的服务器 </li></ul><ul><ul><li>最小化的   Apache  ...
总结 <ul><li>你可以节省   10-30%   的无意义图片流量 ! </li></ul>
卓越性能相关网址 <ul><li>YUI  博客  </li></ul><ul><li>http://yuiblog.com/blog/category/performance/   </li></ul><ul><li>YDN ( 雅虎开发者网...
Thank you! [email_address]     [email_address]
参考资料 <ul><li>http://svs.gsfc.nasa.gov/vis/a000000/a002600/a002680/  Apolo 17 Full-Earth Photograph </li></ul><ul><li>http:...
Upcoming SlideShare
Loading in …5
×

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

2,341 views
2,198 views

Published on

2 Comments
10 Likes
Statistics
Notes
  • 翻墙成功,学习一下。
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • 图片优化
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
2,341
On SlideShare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
75
Comments
2
Likes
10
Embeds 0
No embeds

No notes for slide
  • S
  • 图片优化中常见的7大误区你犯了多少

    1. 1. 图片优化 7 大误区及解决方案 Stoyan Stefanov Yahoo! Exceptional Performance Velocity, June 24th, 2008, San Francisco [email_address] [email_address] 翻译: [email_address]
    2. 2. 关于这个 PPT <ul><li>面向非设计人员的图片优化 </li></ul><ul><li>所有网站都存在的 7 大误区 </li></ul><ul><li>只需改善细节 , 即可获得巨大收益 </li></ul><ul><li>轻松实现: </li></ul><ul><ul><li>减少页面加载时间 </li></ul></ul><ul><ul><li>节省带宽 </li></ul></ul><ul><ul><li>节省磁盘空间 </li></ul></ul><ul><ul><li>节省服务器 ( 节约资源保护地球 ) </li></ul></ul><ul><ul><li>… 这一切都以丝毫不损失视觉质量为前提 </li></ul></ul>
    3. 3. 关于作者 <ul><li>Yahoo! Exceptional Performance (research, consulting) </li></ul><ul><li>YSlow lead developer </li></ul><ul><li>Open Source contributor (PEAR, Firebug) </li></ul><ul><li>Blog http://www.phpied.com </li></ul><ul><li>Articles and books author </li></ul>
    4. 4. 嗯 , 图片 ? <ul><li>Q: 这东西 重要吗 ? </li></ul><ul><li>A: 让我们对 </li></ul><ul><li>全球排名前 10 </li></ul><ul><li>的网站做个测试 . </li></ul>
    5. 5. 图片流量占总流量的百分比 ? <ul><li>平均 45.6% </li></ul><ul><li>不一定绝对精确 , 但是非常接近 </li></ul><ul><li>你的网站或许不同 , 例如: amazon.com 有 71% 都是图片 </li></ul><ul><li>巨大的潜能! </li></ul>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%
    6. 6. 误区 #1: 明明 PNG 更小却使用 GIF (担心 IE6 不支持 PNG 透明)
    7. 7. 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)
    8. 8. PNG 透明 在 IE 下的问题 <ul><li>真彩色 PNG </li></ul><ul><li>IE 7 或更高 IE 6 或更低 </li></ul>PNG8 IE 7 或更高 IE 6 或更低 结论 : IE7 以上没有问题 ; IE6 只支持像 GIF 一样的透明
    9. 9. GIF vs. PNG <ul><li>GIF 能做的 PNG8 都能做! (除了动画) </li></ul><ul><li>PNG8 在所有的现代浏览器上表现良好 </li></ul><ul><li>Q: 我们来看看文件大小 ? </li></ul><ul><li>A: 我们来测试一下全球 10 大网站,把他们的 GIF 都转换成 PNG 看看能省下来多少 </li></ul>
    10. 10. GIF 转换成 PNG <ul><li>平均 节省 20.42% </li></ul>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%
    11. 11. 解决方案 #1: 使用 PNG 替代 GIF 视觉无损的 !
    12. 12. 误区 #2: 不压缩 PNGs
    13. 13. 关于 PNG 通道 <ul><li>PNGs 使用 “ 通道 ” 存储信息 </li></ul><ul><li>绝大部分通道可以安全地删掉 </li></ul><ul><li>绝大部分图片处理程序 没有 优化 </li></ul><ul><li>命令行工具 : </li></ul><ul><ul><li>pngcrush http://pmt.sourceforge.net/pngcrush/ </li></ul></ul><ul><ul><li>pngrewrite http://www.pobox.com/~jason1/pngrewrite/ </li></ul></ul><ul><ul><li>OptiPNG http://www.cs.toronto.edu/~cosmin/pngtech/optipng/ </li></ul></ul><ul><ul><li>PNGOut http://advsys.net/ken/utils.htm </li></ul></ul><ul><li>示例 : </li></ul><ul><li>> pngcrush -rem alla -brute -reduce src.png dest.png </li></ul>
    14. 14. 全球前 10 网站的 PNG 压缩后的结果 <ul><li>平均 节省 16.05% </li></ul>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
    15. 15. 解决方案 #2: 压缩 PNGs 视觉无损的 !!
    16. 16. 误区 #3: 不去掉 JPEG 的元数据 (metadata)
    17. 17. JPEG 元数据 (metadata) <ul><li>注释 </li></ul><ul><li>EXIF </li></ul><ul><ul><li>相机信息 ( 光圈,曝光时间, GPS 等 ) </li></ul></ul><ul><ul><li>缩略图 ! </li></ul></ul><ul><ul><li>音频 !?! </li></ul></ul><ul><ul><li>… </li></ul></ul><ul><li>图像处理软件信息 (e.g. Photoshop) </li></ul><ul><li>IPTC </li></ul><ul><li>ICC </li></ul>
    18. 18. 视觉无损的 ! JPEG 优化 <ul><li>jpegtran ( http://jpegclub.org/ ) </li></ul><ul><li>免费的命令行工具 </li></ul><ul><li>视觉无损地裁剪、旋转 </li></ul><ul><li>或许你已经安装了 </li></ul><ul><li>示例 : </li></ul><ul><li>> jpegtran -copy none -optimize -perfect src.jpg dest.jpg </li></ul>
    19. 19. 用 jpegtran 优化 十大网站 <ul><li>平均 节省 11.85% </li></ul>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%
    20. 20. 解决方案 #3: 去掉用不着的 JPEG 元数据 视觉无损的 !!
    21. 21. 误区 #4: PNG8 就够用时却使用 PNG32
    22. 22. 真彩色 vs. 索引色 PNGs <ul><li>索引色 PNGs (PNG8) 最多只能有 256 colors </li></ul><ul><li>真彩色 PNGs 有一千六百多万 (256^3= 16,777,216) </li></ul><ul><li>实际上 , 我们用的真彩色 PNG 往往少于 1000 种颜色 </li></ul><ul><li>否则就意味着这张图片应该采用 JPEG 格式 </li></ul><ul><li>人的肉眼视觉对色彩并不是很敏感 </li></ul>
    23. 23. 真彩色 vs. 索引色 PNGs <ul><li>将真彩色 PNG 转换成索引色 </li></ul><ul><li>节省 50% 文件大小 </li></ul><ul><li>解决 IE6 下的透明问题 </li></ul><ul><li>注意 1: 有损的 </li></ul><ul><ul><li>但是没人能看出来 </li></ul></ul><ul><li>注意 2: 如果有 alpha 通道的话,比较难以自动化 </li></ul>
    24. 24. 真彩色 vs. 索引色 PNGs <ul><li>命令行工具 : </li></ul><ul><li>pngquant ( http://www.libpng.org/pub/png/apps/pngquant.html ) </li></ul><ul><li>pngnq ( http://pngnq.sourceforge.net/ ) </li></ul><ul><li>示例 : </li></ul><ul><li>> pngquant 256 src.png </li></ul>
    25. 25. 解决方案 #4: 把所有的 PNGs 转换为索引色 PNGs * <ul><li>* 需要手动检查转换结果 </li></ul><ul><li>( 特殊情况除外 ) </li></ul>
    26. 26. 误区 #5: 使用 CSS alpha 滤镜
    27. 27. CSS 滤镜 <ul><li>回到真彩色 PNG alpha 透明在 IE6 下的问题上来 </li></ul><ul><li>AlphaImageLoader CSS 滤镜可以解决这个问题 </li></ul><ul><li>IE6/7 私有 </li></ul><ul><li>阻塞渲染 , 造成浏览器假死 </li></ul><ul><li>增加内存消耗 </li></ul><ul><li>每次用滤镜都需要消耗,不像图片可以缓存 ! </li></ul><ul><li>和 CSS sprites 相矛盾 </li></ul>
    28. 28. 放弃滤镜 <ul><li>最好 : 完全放弃 , 使用 PNG8 alpha 优雅降级 </li></ul><ul><li>可行 : 使用下划线 hack _filter </li></ul><ul><li>Yahoo! Search 通过放弃滤镜节省了 50-100ms </li></ul>
    29. 29. 解决方案 #5: 放弃 AlphaImageLoader , 尝试 PNG8 或者至少 _filter
    30. 30. 误区 #6: 直接输出动态生成的图片
    31. 31. 动态生成图片 <ul><li>GD library 生成的图片并没有像 pngcrush 一样压缩 </li></ul><ul><li>生成出来的图片偏大 </li></ul><ul><li>从大到小 : 生成 GIF > 生成 PNG > 压缩 PNG </li></ul><ul><li>每次请求都消耗服务器资源 </li></ul>
    32. 32. 动态生成图片解决方案 <ul><li>第一次请求 : </li></ul><ul><li>生成 </li></ul><ul><li>写入硬盘 </li></ul><ul><li>pngcrush </li></ul><ul><li>发送 </li></ul><ul><li>第二次请求 : </li></ul><ul><li>服务器端缓存 </li></ul><ul><li>估计 节省 5-30% </li></ul>
    33. 33. 案例 : Google charts API 原始 (707 colors) 压缩 (707 colors) PNG8 (256 colors) 节省 12% 节省 38%
    34. 34. 案例 : Google charts API 原始 (1408 colors) 压缩 (1408 colors) PNG8 (256 colors) 节省 25% 节省 55% ( 去掉了 1000 多种颜色,但是谁能看出来 ?)
    35. 35. 解决方案 #6: 压缩动态生成的图片 视觉无损的 !!
    36. 36. 误区 #7: 不合并背景图标
    37. 37. CSS Sprites CSS: HTML: …
    38. 38. CSS Sprites <ul><li>合并后文件通常变小 </li></ul><ul><li>节省 HTTP 请求 </li></ul><ul><li>参考 : http://alistapart.com/articles/sprites </li></ul><ul><li>工具 : http://csssprites.com </li></ul>
    39. 39. 优化 sprites
    40. 40. 解决方案 #7: 使用 CSS Sprites 坚持使用索引色的 PNG8
    41. 41. 另外的误区 : 不合理地使用 favicon.ico <ul><li>www.example.org/favicon.ico </li></ul><ul><li>不可避免的灾难 : </li></ul><ul><ul><li>浏览器无论如何都会请求 </li></ul></ul><ul><ul><li>最好别返回 404 </li></ul></ul><ul><ul><li>这个请求头包含 Cookies </li></ul></ul><ul><ul><li>不能部署到 CDN 上 </li></ul></ul><ul><ul><li>影响加载队列 </li></ul></ul><ul><li>尽量做小 (<= 1K) </li></ul><ul><li>动画 favicons 并不酷 </li></ul><ul><li>设置 Expires header ( 但是不要设置成 “ forever”) </li></ul><ul><li>工具 : imagemagick, png2ico </li></ul><ul><li>案例 : Yahoo! Search - favicon.ico 占了总 PV 的 9% </li></ul>
    42. 42. 另外误区 #2: 把图片部署在动态服务器上 <ul><li>建议 1: 使用 CDN </li></ul><ul><li>建议 2: 准备一台静态的服务器 </li></ul><ul><ul><li>最小化的 Apache 或者 LightTPD </li></ul></ul><ul><ul><li>不要任何动态库 , no PHP, no Perl, 等等 </li></ul></ul><ul><ul><li>存放图片 ( 和其他静态资源 ) </li></ul></ul><ul><ul><li>请求 -> 找到文件 -> 发送 </li></ul></ul><ul><ul><li>“ 永不到期 ” 策略 </li></ul></ul><ul><ul><li>不要有 cookies </li></ul></ul>
    43. 43. 总结 <ul><li>你可以节省 10-30% 的无意义图片流量 ! </li></ul>
    44. 44. 卓越性能相关网址 <ul><li>YUI 博客 </li></ul><ul><li>http://yuiblog.com/blog/category/performance/ </li></ul><ul><li>YDN ( 雅虎开发者网络 ) </li></ul><ul><li>http://developer.yahoo.com/performance/ </li></ul><ul><li>YDN blog </li></ul><ul><li>http://developer.yahoo.net/blog/archives/performance/ </li></ul><ul><li>邮件列表 (Yahoo! Group) </li></ul><ul><li>http://tech.groups.yahoo.com/group/exceptional-performance/ </li></ul><ul><li>Feedback </li></ul><ul><li>http://developer.yahoo.com/yslow/feedback.html </li></ul>
    45. 45. Thank you! [email_address] [email_address]
    46. 46. 参考资料 <ul><li>http://svs.gsfc.nasa.gov/vis/a000000/a002600/a002680/ Apolo 17 Full-Earth Photograph </li></ul><ul><li>http://www.w3.org/Graphics/PNG/inline-alpha.html W3C PNG Alpha Test </li></ul><ul><li>http://www.sitepoint.com/blogs/2007/09/18/png8-the-clear-winner/ PNG8 - The Clear Winner </li></ul>

    ×