1. Image Optimization: 7 mistakes
Nicole Sullivan, Stoyan Stefanov
Ajax Experience
Boston, Sep 30th, 2008

2. On the agenda
7 best practices
demo

3. Images?

4. What % of page weight is images?1
Yahoo!
29% 2
Google
75% 3
YouTube
62% 4
Live.com
64% 5
MSN
41% 6
MySpace
48% 7
Wikipedia
39% 8
Facebook
35% 9
Blogger
27% 10
Yahoo! JP
36%
Average 45.6%
some say 50%+
amazon.com is 71%
huge potential

5. Best practices No GIFs Crush PNGs Strip JPEG meta
Avoid truecolor PNG, use PNG8
Avoid AlphaImageLoader
Optimize and cache dynamic images
Combine images into sprites

6. Best practices – automation, lossless
No GIFs
Crush PNGs
Strip JPEG meta
Avoid truecolor PNG, use PNG8
Avoid AlphaImageLoader
Optimize and cache dynamic images
Combine images into sprites

7. Top 10 sites save No GIFs – 20.42% Crush PNGs – 16.05%
Strip JPEG meta – 11.85%
Avoid truecolor PNG, use PNG8
Avoid AlphaImageLoader
Optimize and cache dynamic images
Combine images into sprites

8. GIF to PNG8
Crush PNGs
Strip JPEG meta
Bonus: Optimize GIF animations

9. Demo: http://smushit.com/

10. Let’s keep talking... Stoyan Stefanov http://phpied.com
Nicole Sullivan

11. URLs: Tools PNG crushers pngcrush http://pmt.sourceforge.net/pngcrush/
pngrewrite
OptiPNG
PNGOut
Truecolor-to-PNG8
pngquant (
pngnq (
JPEG
jpegtran (
CSS Sprites
Tool: