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

1. Image Optimization
@patmeenan
http://blog.patrickmeenan.com

2. http://httparchive.org/interesting.php#bytesperpage

3. http://httparchive.org/trends.php?s=All&minlabel=Jun+1+2011&maxlabel=Jun+1+2013#bytesTotal&reqTotal

4. http://httparchive.org/interesting.php#responsesizes

7. Delay-loading hidden images
http://www.webpagetest.org/video/view.php?id=130614_ff46fedad38ad59b5b21f7f7de69e4a7a5935d44&bare=1

8. Lazy-load/defer attribute
http://lists.w3.org/Archives/Public/public-web-perf/2013May/0084.html

10. 4 MB

11. 4 MB
3 KB Image Data

12. 4 MB
3 KB Image Data
1.5 KB Thumbnail
4 MB of Photoshop Data
http://www.webpagetest.org/jpeginfo/jpeginfo.php?url=http%3A%2F%2Fsupport-cn.samsung.com%2Fcampaign%2Fmobilephone%2Fgalaxys4%2Fimages%2FsubQQ%2Fme1.jpg

15. PROGRESSIVE JPEG

16. 10%
http://www.patrickmeenan.com/progressive/view.php?img=http%3A%2F%2Fwww.chelseafc.com%2FjavaImages%2Fe%2F37%2F0%2C%2C10268~12007182%2C00.jpg

17. 24%
http://www.patrickmeenan.com/progressive/view.php?img=http%3A%2F%2Fwww.chelseafc.com%2FjavaImages%2Fe%2F37%2F0%2C%2C10268~12007182%2C00.jpg

18. 42%
http://www.patrickmeenan.com/progressive/view.php?img=http%3A%2F%2Fwww.chelseafc.com%2FjavaImages%2Fe%2F37%2F0%2C%2C10268~12007182%2C00.jpg

19. 68%
http://www.patrickmeenan.com/progressive/view.php?img=http%3A%2F%2Fwww.chelseafc.com%2FjavaImages%2Fe%2F37%2F0%2C%2C10268~12007182%2C00.jpg

20. 100%
http://www.patrickmeenan.com/progressive/view.php?img=http%3A%2F%2Fwww.chelseafc.com%2FjavaImages%2Fe%2F37%2F0%2C%2C10268~12007182%2C00.jpg

21. Progressive Proxy
• WebPagetest Script:
addHeader X-Jpeg-Mode: <mode>
setDns * 72.66.115.11
navigate %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

22. Progressive Speed Index
• 7% Faster on Cable
• 15% Faster on DSL

23. Preserving copyright
exiftool -tagsfromfile src.jpg -copyright dst.jpg

24. • Deliver visible images first
• Make the files as small as possible
• Progressively deliver what’s left