1. Image Optimization 7 mistakes (and how to correct them) Stoyan Stefanov Yahoo! Exceptional Performance Velocity, June 24th, 2008, San Francisco [email_address] [email_address]

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

7. GIF vs. PNG * some IE < v.7 issues No (future) No (future) Yes Animation All A-grade (96%+) All A-grade (96%+) Nearly all Browser support Alpha (variable) * Alpha (variable) * Boolean (on/off) Transparency Up to 48bit 256 256 Number of colors Truecolor PNG Palette PNG (aka PNG8, aka indexed) GIF

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

12. Mistake #2: Not crushing PNGs

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

16. Mistake #3: Not stripping JPEG metadata

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

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

26. Mistake #5: Using CSS alpha filters

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

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

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

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

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

36. Mistake #7: Not combining images

37. CSS Sprites CSS: HTML: …

39. Optimizing sprites

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

45. Thank you! [email_address] [email_address]