According to Mike Dahlstrom, photographer for the Web, designers need to know that preparing images for the Web has 3 components. Color space, contrast range and file size.

Preparing Images for the Web

Of paramount concern is the quality of the viewing environment of the target audience. Designers, photographers and other creatives look at their monitors (which have been calibrated to insure consistent color) in controlled rooms with dim lighting — and soft music playing in the background. However in someone’s home, the computer might sit on a desk in a sunlit room and might be seen anytime day or night. These conditions change how an image is viewed making it more or less distinguishable.

Color space is the dynamic range of colors a viewer has available. When the Web first took shape, most monitors were constrained to a palette of 256 colors (today known as Web safe colors). The entire visible spectrum had to be squeezed into these 256 colors, with excess colors irretrievably eliminated. Although today millions of colors are available on most computer monitors, the mass market still Preparing Images for the Web requires the color bar to be set at the Web safe palette, giving the designer confidence that almost everything used in an image/design will be seen as intended. (Color management to keep files consistent from creation to implementation is a huge component that is a study in and of itself.)

Contrast range. The contrast of any image is defined as darkness (black) to lightness (white) on a scale of 0-255 (black to white). 0 is the deepest tone a computer will present, having no detail; white is the brightest tone a monitor will present, also having no detail (like the white of a page). So the image must be presented within those constraints, with some “wiggle room.” This can be accomplished during the photo shoot, by exposing for the highlight area, then filling light into the shadow areas to bring the values up. (It can also be accomplished in Photoshop as a secondary source of control by adjusting the contrast range in either levels or curves.)

File size. The size of an image should be controlled in the capture by photographing (or scanning) to a size approximate to the desired finished result. Downsizing a file in Photoshop is generally acceptable as it does not necessarily affect the quality of the image. (Upsizing on the other hand is generally unacceptable much above about 20% since you are asking software to make image information where there is none available.) The second component of downsizing a file is compression. A typical Web-ready photo is saved as a JPEG file format. JPEGs introduce file compression at the expense of quality (the more the compression, the lower the quality) through mathematical calculations that remove redundant information, thereby making the physical (transmittable) file much smaller. Most Web preparatory programs as well as image programs (like Photoshop) can save JPEGs with a user-defined level of compression. Once information is lost through compression, however, it can not be retrieved.

The objective here is to compress the image as much as possible to the smallest file size while still maintaining the degree of quality you desire. There is no formula for this, it is quite subjective. If your target audience is viewing a site over a dial up connection, you want the smallest file size possible for delivery and you may sacrifice some image quality to achieve that. If your audience is high end, with a high-speed connection, you can opt for more quality and slightly lower download speed. You have to look at several levels of compression, note the file size and make a judgement call on the image quality.