1. Page 1 Image Optimization 7 mistakes (and how to correct them) Stoyan Stefanov Yahoo! Exceptional Performance Velocity, June 24th, 2008, San Francisco stoyan@yahoo-inc.com stoyan@yahoo-inc.com yslow@yahoo-inc.com yslow@yahoo-inc.com

2. Page 2 About the presentation Image optimization for the non-designer 7 mistakes all sites make, even the big ones Trivial to correct, serious savings Easy win –improve page load time –save bandwidth –save disk space –save servers (and energy and the planet) –… without compromising quality

3. Page 3 About the presenter Yahoo! Exceptional Performance (research, consulting) YSlow lead developer Open Source contributor (PEAR, Firebug) Blog http://www.phpied.comhttp://www.phpied.com Articles and books author

4. Hmm, images? Q: Is this really important? A: Let’s survey the global top 10 sites.

5. Page 5 What % of page weight is images? Average 45.6% Not exactly half, but pretty close Your site may be different, amazon.com for example is 71% images huge potential 1Yahoo!29% 2Google75% 3YouTube62% 4Live.com64% 5MSN41% 6MySpace48% 7Wikipedia39% 8Facebook35% 9Blogger27% 10Yahoo! JP36%

6. Page 6 Mistake #1: Using GIF when PNG is smaller

7. Page 7 GIF vs. PNG GIFPalette PNG (aka PNG8, aka indexed) Truecolor PNG Number of colors 256 Up to 48bit TransparencyBoolean (on/off) Alpha (variable) * Browser support Nearly allAll A-grade (96%+) AnimationYesNo (future) * some IE < v.7 issues

8. PNG transparency and IE Truecolor PNG IE 7 and up IE 6 and earlier PNG8 IE 7 and up IE 6 and earlier Verdict: IE7+ is OK; IE6 supports GIF-like transparency

9. Page 9 GIF vs. PNG PNG8 can do everything a GIF can do, and more (sans cheesy Web 1.0 animations) PNG8 works across all A-Grade browsers Q: And what about the size? A: Let’s survey the top 10 sites and convert all GIFs to PNGs to check if there are savings

10. Page 10 GIF-to-PNG 1Yahoo!9.55% 2Google22.95% 3YouTube33.82% 4Live.com19.93% 5MSN13.53% 6MySpace17.65% 7WikipediaNo GIFs! 8Facebook17.47% 9Blogger24.27% 10Yahoo! JP24.58% Average 20.42% savings

11. Page 11 Take away #1: Choose PNG over GIF LOSSLESS!

12. Page 12 Mistake #2: Not crushing PNGs

13. Page 13 About the PNG chunks PNGs store information in "chunks" Most chunks can safely be deleted Most image programs DO NOT optimize Command line tools: –pngcrush http://pmt.sourceforge.net/pngcrush/ http://pmt.sourceforge.net/pngcrush/ –pngrewrite http://www.pobox.com/~jason1/pngrewrite/ http://www.pobox.com/~jason1/pngrewrite/ –OptiPNG http://www.cs.toronto.edu/~cosmin/pngtech/optipng/ http://www.cs.toronto.edu/~cosmin/pngtech/optipng/ –PNGOut http://advsys.net/ken/utils.htm http://advsys.net/ken/utils.htm Example: > pngcrush -rem alla -brute -reduce src.png dest.png

14. Page 14 Crush top 10 and check for savings 1Yahoo!15.52% 2Google Reader22.60% 3YouTube17.32% 4Live.comNo PNGs 5MSNNo PNGs 6MySpace25.44% 7Wikipedia21.32% 8Facebook9.08% 9Blogger1.07% 10Yahoo! JPNo PNGs Average 16.05% savings

15. Page 15 Take away #2: Crush your PNGs LOSSLESS!

16. Page 16 Mistake #3: Not stripping JPEG metadata

17. Page 17 JPEG metadata Comments EXIF –camera information –thumbnail! –audio!?! –… Application specific (e.g. Photoshop)

18. Page 18 Lossless JPEG operations jpegtran (http://jpegclub.org/)http://jpegclub.org/ Free command-line tool Loseless operations such as crop, rotate You probably have it installed already Example: > jpegtran -copy none -optimize -perfect src.jpg dest.jpg

19. Page 19 Running jpegtran on top 10 sites 1Yahoo!2.62% 2GoogleNo jpegs 3YouTube10.71% 4Live.com0.47% 5MSN7.43% 6MySpace4.28% 7WikipediaNo jpegs 8Facebook13.59% 9Blogger38.35% 10Yahoo! JP17.31% Average 11.85% savings

20. Page 20 Take away #3: Strip needless JPEG metadata LOSSLESS!

21. Page 21 Mistake #4: Using truecolor PNGs when palette PNG is good enough

22. Page 22 Truecolor vs. palette PNGs Palette PNGs (PNG8) have 256 colors Truecolor PNGs could have millions In practice, truecolor PNGs often have less than 1000 colors Otherwise it would mean they are photos and should be JPEGs Human eye is not that sensitive

23. Page 23 Truecolor vs. palette PNGs Convert truecolor to palette How about 50% savings? Solves IE<7’s little alpha transparency problem Warning 1: LOSSY –But no one will ever know Warning 2: automation is hard when there’s alpha

24. Page 24 Truecolor vs. palette PNGs Command-line tools: pngquant (http://www.libpng.org/pub/png/apps/pngquant.html)http://www.libpng.org/pub/png/apps/pngquant.html pngnq (http://pngnq.sourceforge.net/)http://pngnq.sourceforge.net/ Example: > pngquant 256 src.png

25. Page 25 Take away #4: Make all PNGs palette PNGs * * but manually check the result (or wait for someone to complain, chances are you'll be waiting in vain ;)

26. Page 26 Mistake #5: Using CSS alpha filters

27. Page 27 CSS filters Back to the problem with truecolor PNG alpha transparency in earlier IEs AlphaImageLoader CSS filter to fix the issue IE proprietary Blocks rendering, freezes the browser Increased memory consumption Per element, not per image! CSS code for sprites becomes messy

28. Page 28 Avoid filters Best: Avoid completely, use gracefully degrading PNG8 Fallback: use underscore hack _filter not to penalize IE7+ users Yahoo! Search saved 50-100ms for users of IE5&6

29. Page 29 Take away #5: Avoid AlphaImageLoader, try PNG8 or at least _filter

30. Page 30 Mistake #6: Serve generated images “as-is”

31. Page 31 Dynamically generated images GD library doesn't do what pngcrush does Generated images are bigger From big to small: generated GIF > generated PNG > crushed PNG Server resources on every request

32. Page 32 Recipe for generated images 1st request: generate write to disk pngcrush serve 2nd request: serve cached Estimate 5-30% savings

33. Page 33 Case study: Google charts API Original (707 colors)Crushed (707 colors)PNG8 (256 colors) 12% saving38% saving

34. Page 34 Case study: Google charts API Original (1408 colors)Crushed (1408 colors)PNG8 (256 colors) 25% saving55% saving (1000+ colors are lost but who can tell?)

35. Page 35 Take away #6: Crush generated images LOSSLESS!

36. Page 36 Mistake #7: Not combining images

37. Page 37 CSS Sprites … CSS: HTML:

38. Page 38 CSS Sprites Size of the combined image is usually less You save HTTP requests Article: http://alistapart.com/articles/spriteshttp://alistapart.com/articles/sprites Tool: http://csssprites.comhttp://csssprites.com

39. Page 39 Optimizing sprites

40. Page 40 Take away #7: Use CSS Sprites Stay within the palette number of colors (use PNG8)

41. Page 41 Bonus mistake: Improper favicon.ico www.example.org/favicon.ico Necessary evil: –The browser will request it –Better not respond with a 404 –Cookies are sent –Cannot be on CDN –Interferes with the download sequence Make it small (<= 1K) Animated favicons are not cool Set Expires header (but not “forever”) Tools: imagemagick, png2ico Case study: Yahoo! Search - favicon.ico is 9% of all page views

42. Page 42 Bonus mistake #2: serving images from your app server Option 1: use a CDN Option 2: setup a static server –stripped down Apache or LightTPD –no libraries, no PHP, no Perl, etc –serve images (and other static components) –request -> find on disk -> serve –"Never expires" policy –no cookies

43. Page 43 Wrapping up You can save 10-30% in unnecessary image size!

44. Page 44 URLs – Exceptional Performance YUI blog http://yuiblog.com/blog/category/performance/ YDN (Yahoo Developer Network) http://developer.yahoo.com/performance/ YDN blog http://developer.yahoo.net/blog/archives/performance/ Mailing list (Yahoo! Group) http://tech.groups.yahoo.com/group/exceptional- performance/ Feedback http://developer.yahoo.com/yslow/feedback.html

45. Page 45 Thank you! stoyan@yahoo-inc.com stoyan@yahoo-inc.com yslow@yahoo-inc.comyslow@yahoo-inc.com

46. Page 46 Credits http://svs.gsfc.nasa.gov/vis/a000000/a002600/a002680/ Apolo 17 Full-Earth Photographhttp://svs.gsfc.nasa.gov/vis/a000000/a002600/a002680/ http://www.w3.org/Graphics/PNG/inline-alpha.html W3C PNG Alpha Testhttp://www.w3.org/Graphics/PNG/inline-alpha.html http://www.sitepoint.com/blogs/2007/09/18/png8-the-clear-winner/ PNG8 - The Clear Winnerhttp://www.sitepoint.com/blogs/2007/09/18/png8-the-clear-winner/