Nothing communicates more immediately than a well chosen image. If an image is part of the topic of a page, it is appropriate to include it in the HTML file as part of the markup because it is "content." On the other hand, if an image is included for the purpose of decoration or creating a mood, then it is "presentation" and is appropriately placed in the CSS file.

Either way, images all have one thing in common that must be addressed carefully and thoughtfully when you add them to your web pages. They can significantly increase the download time of your web pages. This leads us to the topic of Image Optimization.

The goal of image optimization is to reduce the file size of an image as much as possible while maintaining acceptable image quality. Image optimization can be approached from several angles:

Any single approach can yield results that will improve your web page performance, but the process can become quite involved when striving to wring every possible excess byte out of an image for use in a web page.

You will need to use image software such as Adobe Photoshop/Image Ready, Adobe Elements, Macromedia Fireworks, or even a simple photo program — anything that allows you to manipulate the above parameters.

Since there are so many different software programs with different capabilities I will not address the step-by-step specifics of how you do these things. But I will present the general concepts so that you have enough information to use your software program's Help function and/or search the web for tutorials or further how-to information.

Physical Dimensions

The first consideration when optimizing images for the web is the display size of the image. In order to decrease the file loading time as much as possible, you must make the image the smallest acceptable dimensions while still maintaining clarity and fit within the web page design. The word "small" here refers to the physical dimensions such as 150px, or 2 inches. The smaller the physical dimensions of an image, the smaller its file size will be. Of course you don't want to go overboard and fill your web site with microscopic images either!

An important aspect to choosing the physical dimensions of an image is screen resolution. The user agent on which an image will be displayed can vary widely in terms how many pixels it will display. Most computer screens can be set to display at resolutions such as 800x600, 1024x768 or higher. This means that an image that is 300 pixels wide by 300 pixels tall may take up nearly half of the screen on a low resolution monitor or look like a mere postage stamp on a very high resolution monitor. Conversely, the screen resolution of a handheld device may be very small, if they display images at all. Considering your target audience and the screen resolution they are likely to be using can be an important factor in choosing image dimensions.

File Type

The three most common image file types for use on the web are GIF, JPG, and PNG. Each file type has strengths that makes it the optimal choice for a certain type of graphic image. Never use a bitmap (BMP) image in a web page. The file size is enormous.

If you are planning to use a photo or a graphic image that includes gradients or shading, the JPG file type will serve you best. The JPG file type supports 16.7 million colors. It will produce the best color at the smallest file size for photos, intricately colored, or shaded images. Example   JPG files compress, which reduces file size. However, there is a point where too much compression begins producing 'artifacts' in the image. I will discuss this a bit more, in a moment.

A GIF file type is an excellent choice for sharp-edged line art (such as logos or text graphics) with a limited number of colors. Example   GIF files are limited to 256 colors. Quite often, if more than about 64 colors are needed to make the image look good, it's quite possible that saving the image as a JPG will do the job at a smaller file size. A big plus for GIF files though, is that they can have a transparent background. JPG files cannot. Using a GIF image with a transparent background allows the web page background or other elements to show through parts of the image which can produce interesting effects.

The PNG file type is finally starting to gain wide acceptance as older browsers, which did not support it, die out. PNG files combine some of the capabilities of both JPG and GIF file types. The PNG file type uses both an 8-bit format (similar to GIF) and 24-bit format which supports 16.7 million colors as does the JPG file type. PNG is a lossless format that also supports transparency. PNG is a better choice than JPG for images that contain text, line art, or other images with sharp transitions. A 24-bit PNG export of a gradient image often comes out identical to the source vector image, and at a small file size. Modern browsers now support the PNG file format with the exception of IE5.5 and IE6 which do not support the PNG transparency feature. However, here is an easy JavaScript hack Open in a New Window that fixes the problem. IE7 supports PNG transparency.

Optimization

It is important to adjust the compression levels, or the number of colors, of each file type to the minimum acceptable image quality level for each image. Then compare the file size produced by each of these three file types at the minimum acceptable quality level. The lowest file size wins!

How an image will be used in the web page also determines which file types will produce the leanest file size for the quality that is needed. For example, using a faded photo for a background can be compressed much more than a crisp portrait of the CEO. Example

Usually when you save a JPG image you are presented with options to save it with a low to high compression rate. Various programs present a compression choice popup dialog box using various terminology which can be a bit confusing. Some use the words "low, medium and high" or numbers from 1 to 10 which translate to quality level which is the inverse of a "low, medium or high" compression rate. High compression means low quality. If the resulting file size is also shown while you change the compression or quality setting, that will tell you what you really want to know. Lower file size means lower quality.

When JPG file compression is overdone, however, you begin to see artifacts, or blurry regions around some details in the image, especially where there are sharp edges against a contrasting background. You have to decide how much of this is acceptable based on how the image will be used. Example

If your image is already appropriately sized, you can use the free GIFBot Open in a New Window online utility from NetMechanic to optimize JPG or GIF files. This simple utility allows you to choose the same or a different output file format - JPG, GIF, or PNG - and shows you the file size and what the image will look like at various optimization levels. You can then select one of the optimized images and save it back to your hard drive.

Note: Avoid editing JPG files! JPG is a poor choice for images that require editing as it suffers from generation loss. Each time you Save an edited JPG, the file will be compressed more and more creating 'lossy' artifacts in the image. If you must edit a JPG, convert it to a PNG, TIF, PSD (Photoshop) or other lossless file format at the beginning and then do the editing. When done, you can optimize the image for the web and convert it back into a JPG file.

When saving PNG files, many image editing programs will offer methods for optimizing the file such as choosing how many colors will be saved in the file, and exclusion of transparency, interlacing or metadata. If you do not have an image editing program or you would like to enhance your image editor's capabilities, here are several free utilities that can be downloaded and used to optimize PNG files:

There are many techniques for reducing file size including blurring, removing dithering, choosing each specific color, and much more. But the biggest determining factors for image file size are the physical dimensions and choosing the right file type along with its optimum compression or color reduction level.

Resources