The Basics of Optimizing Images for the Web

Shawn Escott - December 9, 2009

When it comes to the optimization of images for the web, it is important to know when, why and how to compress them. This short tutorial will help you get the most out of your images and will keep your file sizes smaller for faster page loads.

The main image compression formats:

Jpeg —use when compressing an image such as a photograph or illustration.

Gif — use when compressing images with flat color, such as a logo, chart or other graphic. A transparent background can be used with gifs, however, there will be a ragged edge of pixels around your image.

Png — use if a transparent background is required. Most browsers accept transparent pngs with the exception of Internet Explorer 6.

Compressing Photographic Images  

Original Image.

Jpeg at 70% quality.
File size: 13K
Very close to the high quality of the original and file size is acceptable.
Best option

Jpeg at 5% quality.
File size: 3K
Quality is unacceptable.

Gif with 256 color max.
File size: 26K
Good quality with some pixilation but higher file size.

Png.
File size: 93K
Great quality but file size too large.  

Compressing Flat Color Graphic Elements  

Original image

Gif with 16 colors.
16 colors were used instead of 2 because the pixels around the text are transitional colors to give the appearance of soft edges.
File size: 3K
Best option.

Jpeg at 50% quality.
File size: 6K
Poor quality, not acceptable.

Png.
File size: 5k
Good quality but larger file size.

You can clearly see from the above examples that optimizing your images correctly can make a huge difference in look and load-time. Stick with these examples as a guide to compressing your images and you’ll be up and loading in no time.