Web图片优化
4 likes1,295 views
本文探讨了微博上的图片优化，涵盖了浏览器如何处理图片、优化的关键点、常见图片格式及其优势，并提供了有效的优化方法和工具。强调了减少HTTP请求、选择适当的图片格式和有效渲染对于提升用户体验的重要性。最后，提醒不应过度优化，以避免损失图片质量。
Web图片优化
- 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