Image optimization

8,253 views

Published on

Slides from my talk in Google's booth at Velocity 2013 on optimizing image delivery.

Published in: Technology
0 Comments
10 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
8,253
On SlideShare
0
From Embeds
0
Number of Embeds
1,146
Actions
Shares
0
Downloads
60
Comments
0
Likes
10
Embeds 0
No embeds

No notes for slide

Image optimization

  1. 1. Image Optimization@patmeenanhttp://blog.patrickmeenan.com
  2. 2. http://httparchive.org/interesting.php#bytesperpage
  3. 3. http://httparchive.org/trends.php?s=All&minlabel=Jun+1+2011&maxlabel=Jun+1+2013#bytesTotal&reqTotal
  4. 4. http://httparchive.org/interesting.php#responsesizes
  5. 5. Delay-loading hidden imageshttp://www.webpagetest.org/video/view.php?id=130614_ff46fedad38ad59b5b21f7f7de69e4a7a5935d44&bare=1
  6. 6. Lazy-load/defer attributehttp://lists.w3.org/Archives/Public/public-web-perf/2013May/0084.html
  7. 7. 4 MB
  8. 8. 4 MB3 KB Image Data
  9. 9. 4 MB3 KB Image Data1.5 KB Thumbnail4 MB of Photoshop Datahttp://www.webpagetest.org/jpeginfo/jpeginfo.php?url=http%3A%2F%2Fsupport-cn.samsung.com%2Fcampaign%2Fmobilephone%2Fgalaxys4%2Fimages%2FsubQQ%2Fme1.jpg
  10. 10. PROGRESSIVE JPEG
  11. 11. 10%http://www.patrickmeenan.com/progressive/view.php?img=http%3A%2F%2Fwww.chelseafc.com%2FjavaImages%2Fe%2F37%2F0%2C%2C10268~12007182%2C00.jpg
  12. 12. 24%http://www.patrickmeenan.com/progressive/view.php?img=http%3A%2F%2Fwww.chelseafc.com%2FjavaImages%2Fe%2F37%2F0%2C%2C10268~12007182%2C00.jpg
  13. 13. 42%http://www.patrickmeenan.com/progressive/view.php?img=http%3A%2F%2Fwww.chelseafc.com%2FjavaImages%2Fe%2F37%2F0%2C%2C10268~12007182%2C00.jpg
  14. 14. 68%http://www.patrickmeenan.com/progressive/view.php?img=http%3A%2F%2Fwww.chelseafc.com%2FjavaImages%2Fe%2F37%2F0%2C%2C10268~12007182%2C00.jpg
  15. 15. 100%http://www.patrickmeenan.com/progressive/view.php?img=http%3A%2F%2Fwww.chelseafc.com%2FjavaImages%2Fe%2F37%2F0%2C%2C10268~12007182%2C00.jpg
  16. 16. Progressive Proxy• WebPagetest Script:addHeader X-Jpeg-Mode: <mode>setDns * 72.66.115.11navigate %URL%• Modes:0 – Passthrough (do not modify images)1 – Progressive (convert all JPEGs to optimized progressive)3 – Baseline (convert all JPEGs to optimized baseline)http://www.webpagetest.org/video/view.php?id=130512_5a93f57cee2beb88a8a595c5f5bf169d71a12945&bare=1
  17. 17. Progressive Speed Index• 7% Faster on Cable• 15% Faster on DSL
  18. 18. Preserving copyrightexiftool -tagsfromfile src.jpg -copyright dst.jpg
  19. 19. • Deliver visible images first• Make the files as small as possible• Progressively deliver what’s left

×