Image Optimization: Image Optimization: 7 mistakes7 mistakes

Nicole Sullivan, Stoyan StefanovAjax Experience Boston, Sep 30th, 2008

On the agenda

• 7 best practices

• demo

Images?

What % of page weight is images?

• Average

45.6%45.6%• some say 50%+

• amazon.com is 71%

• huge potential

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%

Best practices

1. No GIFs

2. Crush PNGs

3. Strip JPEG meta

4. Avoid truecolor PNG, use PNG8

5. Avoid AlphaImageLoader

6. Optimize and cache dynamic images

7. Combine images into sprites

Best practices – automation, lossless

1. No GIFs

2. Crush PNGs

3. Strip JPEG meta

4. Avoid truecolor PNG, use PNG8

5. Avoid AlphaImageLoader

6. Optimize and cache dynamic images

7. Combine images into sprites

Top 10 sites save

1. No GIFs – 20.42%

2. Crush PNGs – 16.05%

3. Strip JPEG meta – 11.85%

4. Avoid truecolor PNG, use PNG8

5. Avoid AlphaImageLoader

6. Optimize and cache dynamic images

7. Combine images into sprites

1. GIF to PNG8

2. Crush PNGs

3. Strip JPEG meta

Bonus: Optimize GIF animations

Demo: http://smushit.com/

Let’s keep talking...

Nicole Sullivanhttp://stubbornella.org

Stoyan Stefanovhttp://phpied.com

URLs: Tools

• PNG crushers

• pngcrush http://pmt.sourceforge.net/pngcrush/

• pngrewrite http://www.pobox.com/~jason1/pngrewrite/

• OptiPNG http://www.cs.toronto.edu/~cosmin/pngtech/optipng/

• PNGOut http://advsys.net/ken/utils.htm

• Truecolor-to-PNG8

• pngquant (http://www.libpng.org/pub/png/apps/pngquant.html)

• pngnq (http://pngnq.sourceforge.net/)

• JPEG

• jpegtran (http://jpegclub.org/)

• CSS Sprites

• Tool: http://csssprites.com