(Click on image to see it at full size)

has a lot of detail, and includes text composited into the image. The figures in the photo are small enough so that any JPEG artifacts (noise created by the compression process) will cut right through key features, like the eyes or mouth. An additional consideration is that the photo was shot in low resolution on a digital camera and composited with the atrium shot, so the image has already lost a bit of detail through processing. The uncompressed Photoshop image is 292K - at roughly 4.0K/sec (a charitable estimate on the usual 56K line) it would take 73 seconds to download the image, let alone the rest of the page.

However, in our initial attempt at compressing it down to a size that would download quickly, we found that we were losing detail and clarity in the text and the faces. In order to maximize compression AND image quality, we turned to selective JPEG compression. Analyze the problem areas JPEG compression is the preferred format over gif for photos, particularly where there are blended shadows, or color gradients, because it is not limited to a 256 color palette so will not band (as much) or dither, and often produces a much higher compression ratio.

However, since it is a "lossy" process, at higher compression levels the image will begin to degrade. Subtle values are likely to be replaced by chunks of color, and detail will be lost. "Artifacts of compression " become more noticable, and will create unpleasant changes in your image.

In order to get the highest level of compression possible, with the least amount of damage to critical areas of the image, it is necessary to selectively compress different regions at different settings.

To begin the process you will need to analyze your image for the areas most likely to degrade under high levels of compression. With JPEG compression, this is usually around the edges of things, where colors and values contrast. The border of a dark shape on a light background, the edge of text, and subtle changes in value will usually suffer the most.

 quality=100  quality=10

In the next side by side comparison, the quality differential is somewhat less (quality=100 vs. quality=27), but the woman's face is still unacceptably soft and blurry in the low quality version, enough to cause an unwanted change in her expression. The text has more noise around it, and the shadow area is lumpy looking. With images of this size, so few pixels are used to actually define the details that we don't have extra pixels to spare, so we can't afford changes like this.

(Click on image to see it at full size)

In the next test, 4 settings are compared side by side, at actual size. Based on these it appears that the text and face quality setting should fall somewhere between 100 and 30 - probably a "medium or high " setting, but the background atrium area can undergo very extreme compression without ill effect.

(Click on image to see it at full size)

Create a Compression Mask

Based on the test image, choose areas to hold out from the highest compression settings. In this case the text, the faces, the shadows, and the edges of the figures were selected. Create an alpha channel or mask where the areas that are to be LESS compressed are white, and the areas that can be MORE compressed are black.


(Click on image to see it at full size)


The mask used for the hospital image is shown above.

(Click on image to see it at full size)


A composite of the mask and the image are shown above, to make it clear what areas were protected from high compression. As you can see, the woman's shape is outlined a few pixels outside her actual edge. This is to prevent the gray "pixel spread" that sometimes occurs around high-contrast edges at the boundaries of compression areas.

Once an alpha channel is created, select File: Save for Web. If you only want to apply this special compression to a single slice, be sure to select that slice before proceeding.
Use the Compression Mask to Control the Quality Settings

In the Output Settings area of the Save for Web window, select JPEG medium. To apply the mask, click the Mask button: the one with an oval in it, to the right of the Quality box.

(Click on image to see it at full size)

This brings up the Modify Quality Setting dialog. Move the Maximum slider to the lowest level where the quality-sensitive areas of the image look good. Move the minimum slider to a level where the rest of the image is still acceptable. Save the image.


(Click on image to see it at full size)

The resulting final image is shown here. It weighs in at 27K, still a little large for our 10 second total load-time goal. The remaining time saving was achieved by splitting the page into two separate tables, side by side, using align="left" to force them to stick next to each other. This caused the left side, containing the nav bar, to display first, so that people with short patience could start clicking without waiting for the heftier content section to load.


Ads by Google