Awesome slide deck on Image Optimisation
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.
- 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.
- Not crushing PNG’s – Default PNG setting are not the most optimal. Using pngcrush can reduce the size of PNG’s even more.
- 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
- Use Palette PNG’s instead of True colour PNGs.
- Avoid AlphaImageLoader, try PNG8 or at least _filter
- Crush generated images – GD and Imagemagick don’t always do the best job in optmising images.
- Use CSS sprites!
Finally Stoyan says if you optimise your images you can save 10-30% of the download size.
July 2nd, 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.