A Guide to Good Web Page Design (Part 2)

:: Home > Library > Business Ideas/Section-1

Rule #4: Be careful with your images!
When designing your web pages, you need to keep in mind that people will not be reading them locally (as if they were saved on their own computer). Rather, they will be down loading it, sometimes over slow modems. This means they'll have to wait for every image to download. This can take a long time.

How to get around this problem? Two ways. First, you should limit the number of images on a single page. Second, the images you do have on your page should be made as small as possible, both in physical size and file size. I'll address these separately.

The first solution should be fairly easy to deal with. Just don't load up your page with graphics upon graphics upon graphics. I've actually had more problems with websites from large corporations being graphically loaded than websites from small businesses and individuals. In my opinion, that's because small businesses and individuals are more likely to be made up of decision makers who are actually on the Internet. The decision makers at large corporations just think they should be on the Internet, and they delegate setting up the website to the same designers who design their print materials. Print and web design are two different animals!

Anyway, for every image you put on the page, decide if it's vital to the topic of the page, or if it's just there to look good. Eliminate unnecessary images, as they only serve to slow down the loading of your web pages.
As for the second suggestion, a little image education may be in order. Physical image size is easy to understand, and has a direct correlation with the file size. The larger the image, the larger the file size, and the longer it takes to download.

If you have a large image that you'd like people to be able to see, produce a much smaller version (called a thumbnail), and put the thumbnail, linked to the larger version, on your page. If a person's interested in seeing the larger version, they can click on the thumbnail. If they aren't interested, they don't have to sit through the extended download time. If you do this, make sure to add text by the thumbnail telling the reader how big the file is, so they know how long they'll have to wait.

To reduce the file size of your images without reducing the physical size (as well as for producing thumbnails), you'll need image editing software such as Adobe Photoshop or Corel Photo-Paint. Creating thumbnails is as easy as reducing the dimensions of your image and saving it under a new name.
There are two methods you can use to reduce the file size while keeping the dimensions constant. First, you can alter the image by reducing the number of colors in the image. For instance, say you've scanned in a photo of yourself to put on your website. Typically, your scanner will bring the photo in with at least 4,096 colors (called "true color"). Most people browsing the web will have their systems set for 256 colors. Anything over that is a waste. So, reduce the image's colors to 256 - you'll barely notice a difference, and you'll lose around two-thirds of the file size!

The other method of reducing file size is by saving the image in the proper format. On the Internet, you should only save images in the GIF and JPEG graphics formats. In general, GIF is best for non-photo graphics, such as clip art, and JPEG is best for photos. This is because JPEG is a lossy compression format (it compresses the image, making the file size smaller, by dropping out bits of the image), and photos show less degradation of quality. If you are saving an image as a JPEG, you can control the amount of compression you wish to use. The higher the compression, the lower the quality will be.

The GIF format, on the other hand, is a lossless compression format (it compresses the image as much as it can, without dropping out any data). GIF images retain all their quality, at the expense of usually larger file sizes. One other advantage of the GIF format is that you can set the image's background to be transparent, which can make your graphics look more interesting on the page.

Finally, the latest version of the GIF format, GIF89a, can save graphics in an interlaced fashion (rather than saving the data line by line from the top of the image to the bottom, it saves every fifth line from the top to the bottom, like venetian blinds, then starts again from the top, until the whole image is saved). This is particularly advantageous to the reader who is using a Netscape or other interlaced-compatible browser, as the image will load in from top to bottom quickly, but at a low quality, gradually sharpening up as more lines load. The reader will not have to wait for the entire image to load before they can see what it is and decide whether or not they want to wait for the entire image to load.

Don't feel trapped into using JPEG only for photos and GIF for clip art. If you aren't concerned about your image being interlaced and/or having a transparent background, try both formats when you save it, and use the one that ends up smaller.

Now, don't get me wrong. You can design some beautiful pages that are made up entirely of images. However, you'd better make sure that you've reduced the size of the images as much as you can, or else you'll have a lot of people who stop downloading your page before it's half over, only to jump to someone else's page. Not good!