Basic Image Compression

All web designers have been there...

You've labored for hours on an image to create the perfect accent or illustration for the page you're working on. Finally, everything looks just right. But when you go to save it, it turns out that the file size is 65K, 85K, maybe even over 100K!

Don't despair. By following some simple philosophies and taking advantage of image reduction features in popular applications like Photoshop and Fireworks, you can send your image files through a kind of "Jenny Craig weight-loss plan" for graphics. Here's how:

1. The reduced calorie (or pixel) diet.
The first thing you can do to help your file size is to trim as many pixels as possible from the outer edges of the graphic. Watch out for images involving shadows or fades - cutting too close can create a sharp edge on your image when you were looking for a soft one.

2. Different diets (compression) for different image types.
Different types of images compress in different ways. Images with large areas of solid color, or sharper edges such as text, compress well using the gif compression method. Images that are more photographic or use lots of blends and shadows tend to compress well in jpeg. It is important to experiment with these types of compression to get the best result.

Use "Save for Web" in Photoshop, or the Preview tab in Fireworks to preview your graphics using gif and jpeg compression. This helps take the guesswork out of image compression, and you'll see them slimming down and looking beautiful in no time!

Submitted by Jennifer Henry, Design Coordinator for MediaPro