HTML graphics. It's a real balancing act that isn't always easy to pull off. Let's face it. Web pages that are all text are simply boring to look at. It's like reading the obituaries in the newspaper. So graphics really come in handy when trying to spruce up your site a bit. The problem is that graphics, or more specially graphic files, can be very large and take lots of time to load up on a page. If you have too many graphics or if the graphics you have chosen are large, the visitor may lose patience waiting for the page to load. The end result is that you've lost your audience anyway because they have moved on. So how do you strike a balance between a dull looking web page and one that takes forever to load? We'll go over a few things you can do about this problem in this article.

The first, and easiest thing to do is to simply not use too many graphics files on your site. Sometimes it only takes one or two carefully placed graphics files on a page to capture a visitors attention, especially if you have a page with news items. Sometimes just one photos of the subject of the news item, say a personality, is all that is needed next to the news text. If the news article itself goes beyond the first page you can maybe add another photo relating to the item on the next page. This will continue to keep the visitors attention by providing him with some visuals.

The next thing you can do, if you really need to have several photos on a page, is to cut down on the size of each graphic. A graphic file is composed of pixels and is represented size wise in bytes. The more bytes in a graphic file the larger the file is and the longer it will take to load on a page. Most graphics programs allow you to reduce file size by compressing them, which is done by taking away some of the graphics detail, or some of the pixels. With practice, you can take enough detail from a file so that the loss of detail is virtually undetectable by the human eye and yet at the same time reduce a 64,000 byte graphics file to a 32,000 byte graphic file and thus reducing the load time in half. If you have quite a few photos on the page this can make a big difference.

Another thing you can do is use graphic files, called gif files, that can load in such a way where the photo gradually displays on the screen as it loads so that the visitor can see that there will be a photo there after the file completes loading.

One thing web designers sometimes forget is that some browsers don't display graphic files correctly or at all. To allow for this possibility as a web designer, when coding your HTML, you should include what is called alternate text in your image source tag so that if the visitor can't view graphics they can see that something is supposed to be there.

Another thing you should do is make sure your photos are properly framed on the page. If you want borders around your photos make sure you include a borders=1 tag on your image source file.

Finally, make sure you include the height and width options in your image source tags. What this does is make it so that the HTML code provides for an exact area for the photo even before it loads. This helps speed up loading time because of how memory is managed.

By following the above tips and procedures you can make your visitor's viewing experience of you web site a most enjoyable one.

-------------------------------------------------------
Michael Russell
Your Independent guide to HTML
-------------------------------------------------------