| 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 -------------------------------------------------------
|