图片优化中常见的7大误区你犯了多少
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 2,156 views

 

Statistics

Views

Total Views
2,156
Views on SlideShare
2,154
Embed Views
2

Actions

Likes
10
Downloads
71
Comments
2

2 Embeds 2

http://www.slideshare.net 1
https://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • 翻墙成功,学习一下。
    Are you sure you want to
    Your message goes here
    Processing…
  • 图片优化
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • S

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

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