Awesome slide deck on Image Optimisation

Posted on July 2, 2008, 12:36 pm, by john, under Speed Up NZ Internet.

Here’s another awesome slide deck from the Velocity conference – Image Optimisation, 7 mistakes and how to correct them (PPT) by Stoyan Stefanov.

In his audit he has found 45.6% of the total page download size of the top 10 websites homepages are images. Here is the list of 7 tips for improving image optimisation from the slides.

  1. Use PNG’s over GIF’s – The big sites (Yahoo / Google /Blogger / MySpace / Live.com etc) could save 20% image size by using PNG’s over GIF’s.
  2. Not crushing PNG’s – Default PNG setting are not the most optimal. Using pngcrush can reduce the size of PNG’s even more.
  3. Not stripping JPEG meta data – Jpeg contain lots of meta data including in some cases thumbnails of the image and audio inside the EXIF information. (Remember thumbnails should be 3-4K in size)  Strip out all non critcial exif information using tools like jpegtrans
  4. Use Palette PNG’s instead of True colour PNGs.
  5. Avoid AlphaImageLoader, try PNG8 or at least _filter
  6. Crush generated images – GD and Imagemagick don’t always do the best job in optmising images.
  7. Use CSS sprites!

Finally Stoyan says if you optimise your images you can save 10-30% of the download size.

One Comment

  1. Matthew Holloway says:
    July 2, 2008 at 2:28 pm

    Rather than pngcrush try OptiPNG — it’s faster, better, and stuff like that. And there’s a lossless optimiser for JPEG too called jpegoptim.

«
»