Optimizing images

Compression's purpose

The purpose of compressing an image is to make the file size smaller, so that it downloads faster than it would at the original size. Apart from compressing an image, you can make the actual image dimensions smaller to save on download time. It's always best to do this with the image processing program (Photoshop), rather than resizing with html, because then you get the download savings, and usually the files look better too.

We're using bitmapped (raster) images, so let's talk about these file formats.

JPEG (.jpg)

This is the grand-daddy format, and dates to before the web. It is what's called a lossy format: as you compress the image, you lose quality. It's good for photographs, paintings, soft edges, blurs, etc. You cannot make a jpeg file transparent, but for many images, it's still the best choice.

GIF

This was created for the web, and is based on the 8-bit (256 color) palette. It can be used to create transparent images, and it can also be used to create simple animations. It's a loss-less format. Unless you're saving an animation, you probably wouldn't use this format anymore.

PNG (pronounced "ping")

There are two versions of the png: the 8-bit format, which is pretty much like the gif format, except it is a bit more efficient. Like the gif, the a transparent 8-bit png file required matting to get it to save the anti-aliasing on your edges.

The 24-bit format of the png file is superior to its 8-bit mamma, because is is truecolor (millions of colors), like the jpg. Plus you can do an alpha transparency, which lets you create a transparent image that you can use on any background color. It's also a gamma corrected format, so the files look good on any computer screen. The downside: much bigger files.

When to use what: optimization

The format you use depends on the kind of file, and what you want it to do on the page. For example, the photo of a compass rose, would best be saved as a jpg file, while the drawing works best as an 8-bit png:

jpg -- 11k		8-bit -- 9k

Let's give it a try with this free tool, and these two images: cat & dog (cartoon) and cat & dog (photo).

NOTE: The ResizeImage.net tool will not let you save an 8-bit PNG, so you'll have to use the GIF setting to get a true low-color lossless compression.