OIT News

On the Web, lighter image files that consume relatively smaller amounts of disk space download faster than heavier files. A light image load improves the performance of your site. At the same time, lighter image files contain less visual information than heavier image files, so they're more likely to look cheap and cheesy, which doesn't help anyone. Your images have to look good. But they also have to download quickly. This is the balancing act called web optimization. For every image that you plan to use, your goal is to achieve the lightest possible image file while maintaining the overall image quality.

Optimizing Resolution

The first, best thing that you can do to optimize your images for the Web is to reduce the image resolution to 72 ppi. Web designers have adopted this number as the universal standard for all web graphics, and that number has stuck. It's one of the few things that most of us agree on. The reason why it's 72 instead of 96 isn't because most of us are on Macs. An image at 72 ppi looks fine on Windows screens, despite the slightly better Microsoft pixel density. More importantly, 72 ppi means fewer pixels, so the 72-ppi image weighs less.

Optimizing Image Size

Reducing the physical dimensions of an image to the precise size that you need for your page is another sure remedy for excess weight on the Web. If an image is physically smaller than another image, and both have the same resolution, then the smaller image contains fewer pixels, and fewer pixels equals less weight.

When you place an image on a web page, you specify, among other things, the image's width and heightbut nothing prevents you from making up your own numbers. You can scale down a 1600-by-800-pixel image very easily in this way by reporting the width as 400 pixels and the height as 200 pixels instead of their true 1600 and 800 values. This gives you, in essence, a 75% reduction in size. The problem with this approach is that, while the images on your page appear to be smaller, they really aren't. The image files themselves still retain their full width and height; the browser simply makes them look smaller. And of course, they remain as heavy as before the browser scaled them.

Your best bet is to figure out the exact width and height that you need for each image and then physically change the images to this size. If you know this information ahead of time, that's great. Fire up your image editor and shrink those images. Don't forget to save the smaller versions under different filenames than the originals. It's always good to be able to go back to the large version and make a new smaller version if your size requirements change.

Reducing the Number of Colors

In GIF and PNG images, each color in the palette contributes a little extra weight to the image file. So, if your image is in the GIF or PNG format, you can modestly decrease the weight of the file by reducing the number of colors in the palette.