Optimizing Web Graphics

General Considerations

Several factors figure into how large your image files will be. These include the height and width of the image, the number of colors, and the distribution of the colors. Consider these two images, both of the same height and width:

solid multicolor
1K 14K

The difference in size is pretty impressive, don't you think? So although you can decrease the file size of an image by reducing its size (either by resizing or cropping), you can't take for granted that two images with the same height and width will have the same file size.

Optimizing GIFs

You can optimize GIFs by hand in at least two ways:

  • First, you can restrict yourself to the 216 Web-safe colors. Paint Shop Pro includes a Web-safe palette that you can use. To load this palette, have your GIF image open and choose Colors > Load Palette, and in the Load Palette dialog box choose Safety.pal and select Nearest Color Matching. Click OK.

    Caution: For GIFs that are based on digital photos, this method can produce less than satisfactory results (and, in fact, GIF is usually not the file format you should use for digital photos). When necessary, however, this method lets you know what your visitors will see if they have their screen colors set to 256.

  • The second thing you can do is to reduce the number of colors used in your GIF, even if you don't use the Web-safe palette. Choose Colors > Decrease Color Depth > color depth (where color depth is 256 Colors (8 bit), 16 Colors (4 bit), or 2 Colors (1 bit)). You can also reduce the Color Depth to other values between 2 and 256 by choosing Colors > Decrease Color Depth > X Colors (4/8 bit).

For a lot more flexibility in color depth reduction, try PSP's GIF Optimizer, available under File > Export. Below are a few results I got from passing a 256-color GIF that was a fat 69K through the GIF Optimizer.

First I tried a version that used 64 colors rather than 256 (setting the amount of dithering to 0 and using Optimized Octree as the palette creation method):

door
64 colors, Optimized Octree (44K)

I also looked at two other versions:

door
32 colors, Optimized Octree (34K)

door
12 colors, Optimized Median Cut (24K)

The 32-color version is still acceptable, but the image quality of the 12-color version is quite degraded. Increasing the dithering might have improved the image quality of this last version, but it would also have increased the file size. When you optimize your own images, you'll be called on again and again to make a choice between image quality and file size.

Tip: The GIF Optimizer not only enables you to optimize your GIFs, it also provides the best way to save a file as a transparent GIF. See the Transparent GIF page for more information on using the GIF Optimizer to create transparent GIFs.

Note: As mentioned in the General Considerations section, distribution of color can also affect file size, and this is particularly true for GIFs. A GIF is decoded in horizontal passes across the image, beginning at the upper left corner. For this reason, horizontal blocks of solid color are favored in GIFs. Consider the difference in file size for these two images, for example, where the one on the right is just a rotated copy of the one on the left:

horizontal vertical
1.0K 1.5K


Optimizing JPEGs

You can optimize a JPEG by increasing its compression level. The higher the compression level, the smaller the image (although the proportion of savings decreases as compression levels increase). As you might expect, higher compression levels also bring image degradation -- but you might be surprised by how little the quality of a particular image is affected even when it is compressed quite a bit. You'll need to experiment with your own images, but to get an idea of what can be done, look here for a set of images I played around with.

You can set the compression level of a JPEG by pressing the Options button in the Save As dialog box and adjusting the Compression Factor slider, or you can use the JPEG Optimizer, available under File > Export.

Note: Something that might surprise you is that progressive JPEGs often have smaller file sizes than their nonprogressive counterparts! (In contrast, interlaced GIFs are always larger than their noninterlaced counterparts.)



Basics

Copyright ©1997-2001 Lori J. Davis
All rights reserved