Image optimization – say 1000 words, faster

Images contribute to more than 63% to the overall page weight of a web site. This talk covers various techniques and ways in which you can improve the performance of your site.
Follow me on twitter(https://twitter.com/holydevil)

Links for examples shown during demo:
YUI Image loader – http://yuilibrary.com/yui/docs/imageloader/basic-features.html
Load images below the fold using YUI loader – http://yuilibrary.com/yui/docs/imageloader/below-fold.html
Data URIs – http://css-tricks.com/data-uris/
Spritepad – http://spritepad.wearekiss.com/
Imgmin – https://github.com/rflynn/imgmin

Transcript

1. Image Optimization say 1000 words, faster
2. #whoami $ Praveen P . N $ Works at Yahoo! $ Making sites fast since 2006
3. Agenda Why is image optimization so important? Fix images Other techniques to speed images Demo and QnA
4. Stats
5. Let’s collect some data Get URLs for 200K sites Monitor the sites for a year Collect data and plot charts OR just visit httparchive.org
6. HTML 0kB 15kB 30kB 45kB 60kB March 2012 June 2012 Sep 2012 Dec 2012 March 2013 HTML transfer size source: httparchive.org
7. JavaScript 0kB 55kB 110kB 165kB 220kB March 2012 June 2012 Sep 2012 Dec 2012 March 2013 JS transfer size source: httparchive.org
8. CSS 0kB 10.25kB 20.5kB 30.75kB 41kB March 2012 June 2012 Sep 2012 Dec 2012 March 2013 CSS transfer size source: httparchive.org
9. Images 0kB 225kB 450kB 675kB 900kB March 2012 June 2012 Sep 2012 Dec 2012 March 2013 Image transfer size source: httparchive.org
10. The WHOLE picture 0kB 225kB 450kB 675kB 900kB March 2012 June 2012 Sep 2012 Dec 2012 March 2013 HTML JS CSS Image source: httparchive.org
11. The BIG problem 7% 7% 63% 3% 17% 4% HTML JS CSS Images Flash Other source: httparchive.org
12. Popular image formats 2% 27% 26% 45% JPEG PNG GIF Other source: httparchive.org
13. When to use what JPEG - photographs PNG - graphics GIF - for animations (or use PNG) WebP - it’s complicated
14. Fix images
15. 1. Send less data 2. Send it faster
16. 1. Compress images
17. Compress JPEGs Jpegtran imgmin (or Jpegmini - commercial) jpegoptim
18. Compress PNGs OptiPNG PNGOUT Pngcrush pngrewrite and more...
19. All in ONE Yahoo! Smush.it ImageOptim imgmin
20. 2. Combine images
21. Sprites Combine multiple small images Automate it (css and image generation) win!
22. 3. Reduce images
23. Load images on demand YUI image loader $(“img.lazy”).lazylaod(); / /jQuery good old JavaScript onload
24. Hide below the fold ↵
25. 4. Data URIs
26. Data URIs <img src=”arrow.gif”> <img src=”data:image/ gif;base64,iVBORw ...”> Doesn’t work in IE < 8. Solution - MHTML
27. 5. Use a CDN
28. 6. Parallel downloads
29. Use multiple domains Modern browsers support > 6 parallel downloads Don’t over do it Max 3 or run a test e.g l1.yimg.com, l2.yimg.com, l3.yimg.com
30. Summary Compress images Use Sprites Load images on demand Use Data URIs whenever possible Use a CDN Split data across multiple domains
31. Demo
32. Thank you praveenp@ slides: speakerdeck.com/holydevil @holydevil