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 true color (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 | png — 9k |
Hybrid Art
This is when it gets tricky. When you have multiple forms of artwork, you will have to test to see which formats will work best.
If you’re really stuck, you can always use the 24-bit PNG format, but just be aware that the file size will be much larger compared with the other two compression formats.
Another option to consider, particularly when you’re doing work on the web, is to combine pieces of artwork using CSS. For example, this banner only takes up 90k of space. That’s because the photograph is saved as a jpg and placed in the background of the header, while the wordmark is placed in the header as an image.
The wordmark is saved as a 24-bit PNG, and because that format has alpha transparency, it blends nicely with a photograph or a multi-colored background. And it is only one color, plus anti-aliasing, so it is still a relatively small file.