Optimizing Images for the Web Part II

Dimensions

The dimensions of an image describe the size of an image in pixels. One way to speed up performance is to specify these dimensions in the markup. Doing this allows the browser to block-out a space for the image first, then begin displaying text instead of waiting for the image to load. Because the browser knows what part of the screen the image will occupy, it does not need to load the image right away; it can load text first and then load images. The overall transfer time is not significantly different (the browser still has to transfer the same amount of information overall), it just appears faster. The user does not have to wait to start viewing text content and the frames for the images pop up in the document right away. In HTML 3.2 and up the IMG tag has options for WIDTH and HEIGHT that correspond to the pixel size of the image. These options allow you to define the size so that the browser can block-out the area for images and start displaying text.

For example, a quarter-screen image (1/4th of 640 x 480) would be 320 x 240 pixels, your HTML image tag would look something like this:

IMG WIDTH=320 HEIGHT=240 SRC="my_image.gif"

Number of Colors

GIF images can contain 256 colors; JPEG images can contain as many as 16 million colors. Most browsers compatible with Windows display about 50 colors. Windows 9.x OS's generally use 16 colors from their 256-color palette (for SuperVGA systems), the rest are used by the browser for it's menus, buttons, and so on, leaving about 50 entries in the palette free. Windows uses some very complex color palette combinations that are beyond the scope of this article. However you need only know that your inline images on a Web page will not be displayed in 256 colors and definitely not in True Color (this may be different under Windows 2000 and future Windows offerings). Until browsers support 16 million colors (when the Net supports the transfer of a file with 16 million placeholders for color values that takes less than two weeks to download) you will want to analyze your image to see how many colors are really need. Before an image has been optimized for the Web it may have color values that will not be used by the browser. Getting rid of these values means smaller file sizes. The optimized image may still look as good as its predecessor.

You may be wondering how so many different colors can be displayed in your browser with such a limited option of colors for your browser to access. Take into consideration that color combinations are used to create colors that are not available in the palette (or something close). A good example would be an InkJet printer, most only use 3 different colors of ink (cyan, magenta, yellow) (some new models use 4 colors) to produce all of the different colors we see on our colored printouts.

If you want to see "Number of Colors" optimization techniques in practical application you should try the following:

Use your favorite search engine to find and download "LVIEW". Open a GIF image using LVIEW. Select "Retouch, Color Depth". Click the "Palette image button" and the "Custom Number of Colors button" and set the number of colors to 50. After you enter 50 in "Custom Number of Colors" click "OK". LVIEW calculates what mix of 50 colors will best represent your image. Compare the two files (before and after) and see if there is a noticeable difference. Try using different "Custom Number of Colors" settings to get the best match of colors and image quality with the smallest file size. You'll notice that saving the file results in a new file size that is dramatically lower than the previous. Since 1K equals about one second of transfer time, you could shave several seconds off of your image file download time.

<- Back Next ->




Overture Search the Web.
Type it and go!

The Musician's PlaceTo Shop!




Instant Gift Certificates!





© 2001-2003 Issues Magazine.
All Rights Reserved.
editors@issues-mag.com



Bear with us! We've moved to a new host and some automated things need tweeking!





Get 15 FREE prints!