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

On the agenda 7 best practices demo

7 best practices

demo

Images?

Images?

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

Average 45.6%

some say 50%+

amazon.com is 71%

huge potential

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

No GIFs

Crush PNGs

Strip JPEG meta

Avoid truecolor PNG, use PNG8

Avoid AlphaImageLoader

Optimize and cache dynamic images

Combine images into sprites

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

No GIFs

Crush PNGs

Strip JPEG meta

Avoid truecolor PNG, use PNG8

Avoid AlphaImageLoader

Optimize and cache dynamic images

Combine images into sprites

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

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

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

GIF to PNG8

Crush PNGs

Strip JPEG meta

Bonus: Optimize GIF animations

Demo: http://smushit.com/

Demo: http://smushit.com/

Let’s keep talking... Nicole Sullivan http://stubbornella.org Stoyan Stefanov http://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

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