Platinum Edition Using HTML 4, XML, and Java 1.2
(Publisher: Macmillan Computer Publishing)
Author(s): Eric Ladd
ISBN: 078971759x
Publication Date: 11/01/98

The height and width of your graphics should be no larger than they have to be. By keeping the onscreen dimensions of your images small, you contribute to a smaller overall file size.

If you resize an image in a graphics program to make it smaller, be sure to keep the aspect ratio (ratio of width to height) the same. This prevents the image from looking stretched or squashed.

Using Thumbnails

Thumbnails are small versions of an image—usually a photograph. By placing a thumbnail of an image on a page, you reduce file size by using an image that has a smaller width and height than the original.

Thumbnails are usually set up so that users can click them to see the full image. If you do this, you should include the size (in kilobytes) of the file that contains the full image so that users can make an informed decision about downloading it.

---

CAUTION:  

Recall that you can resize an image by reducing the WIDTH and HEIGHT attributes in the <IMG> tag. However, this does not save on download time, and browsers generally don’t do the best job of resizing the image.

---

Storing GIFs as JPEGs or PNGs

JPEGs are created with a very efficient (albeit lossy) compression scheme. The compression works best on images with a lot of natural color gradation. This is why JPEG is the format of choice for color photos placed on the Web.

If you have a GIF with a lot of color gradation, you can experiment with saving as a JPEG to see whether you can compress the file size further. It may not always work, but it is worth a try. You don’t have to worry about color loss either because JPEG can accommodate millions of colors to GIF’s 256 colors.

Conversely, if you have an image with large blocks of contiguous color, you are better off storing it as a GIF because GIF’s compression scheme is geared toward exploiting adjacent pixels painted the same color.

If you’re concerned about loss of image quality with the JPEG format, consider converting your GIFs to PNG. PNG compression is more efficient than GIF compression, and PNG is not a lossy format.

Increasing the JPEG Compression Ratio

JPEG compression often achieves impressive compression ratios (on the order of 50:1) with very little loss in image quality. You can crank the ratio higher to make your file size smaller, but the image will not look as good when it is decompressed and decoded. A highly compressed JPEG will take slightly longer to decompress, as well.

Reducing Color Depth

GIFs and PNGs can use a palette of up to 256 colors. This corresponds to eight bits per pixel (2⁸ equals 256). But what if you don’t need that many colors? Sometimes GIFs and PNGs use just two or three colors. That small amount of color information can be stored in much less than eight bits per pixel. It would seem as though some of that storage space could be recovered, resulting in a smaller file size.

It turns out that you can reduce the number of bits per pixel used to store color information. This is called reducing the image’s color depth. Lowering the color depth is a great way to reduce file size because you can often cut the amount of space you are using in half or better.

Suppose, for example, that you have a GIF that uses six distinct colors. The number six is between four (2²) and eight (2³), so you would need three bits per pixel to describe the color information. (Two bits per pixel only supports the first four colors, so you have to go to the next highest exponent.) By reducing the color depth from eight bits per pixel to three bits, you realize a savings of over 60%!

LView Pro gives you an easy way to reduce your color depth. By choosing Image, Color Depth, you get the dialog box you see in Figure 5.23. A true color image is one that uses 24-bit color (for example, a JPEG); the color depth for these images cannot be changed. Palette-based images are ones that draw their colors from a palette of no more than 256 colors. For palette images, LView Pro enables you to choose 256 colors (eight bits per pixel), a palette with a custom number of colors, or a predefined palette read in from a file.

FIGURE 5.23  Reducing a GIF’s color depth can greatly reduce the amount of space needed to store the image.

Adjusting Contrast

Contrast in an image refers to the brightness of objects relative to one another. Making changes to the contrast in your image generally affects the size of the resulting image file. If your file is still too big, tweaking the contrast may be a way to bring it down more.

One way to change contrast in your images is to adjust the Gamma correction. Increasing the Gamma correction into positive values tends to brighten the entire image and reduce overall file size because there are fewer colors to store. Conversely, negative Gamma correction values darken an image and increase its file size. You can change the Gamma correction in LView Pro by selecting Image, Color Adjustment, Pre-defined, and then selecting Gamma Correction from the list of available image parameters.

No Dithering

Dithering makes an image appear to have more colors in its palette than it actually does. This is accomplished by combining colors in the existing palette to produce colors that are not in the palette. Dithering can be helpful with GIF images with a lot of subtle color gradations. Otherwise, for images with just a few solid colors, you probably won’t want to use dithering.

One thing to be aware of when using dithering is that it tends to increase file size because fewer pixels in a row have the same color. The compression scheme used with GIF files exploits adjacent pixels that have the same color. When fewer same-colored pixels exist, the compression can’t make the file as small.

---

CAUTION:  

Dithering can also create an unattractive graininess in your images. If you enable dithering, be sure to look at your image before you put it on the Web to make sure that the dithering does not detract from it.

---