GIF my HomePage pictures, Mr. JPG
by Kurt Keller
You created your first HomePage and found that it still looks somewhat
different from so many others? I thought that's what everybody wants, a
unique HomePage. If, on the other hand, you mean the missing pictures,
then you're just at the right place; make yourself a good cup of
and read on.
A picture tells a thousand words...
...but also takes a thousand times longer to load. With an 28'800 bps
modem, at full speed and with compression enabled, you can expect to
load between 3000 and 5000 characters per second. That's equivalent to
about one page or one and a half of printed text per second.
But what about pictures? Well, the amount of data that makes up a
picture depends on various things:
The bigger your picture, the more data is required.
Colourdepth is not so much about how many colours are being used, but
mainly how the picture is being saved. If you use only red, green,
blue and black, there is no need to save the graphic in 65'536 colour
mode. Here are the most common values for colourdepth:
1 bit no colours (only Black & White)
4 bit 16 colours (or 16 shades of grey)
8 bit 256 colours
16 bit 65'536 colours
24 bit 16'777'216 colours
On the internet there are two major graphic file formats: GIF and JPG.
While GIF is more versatile (GIF 89a has such features as transparent
background, animation), JPG files are generally smaller with only
minor to no difference in quality. I haven't seen a graphical
WebBrowser yet, which can't display GIF files, but at least IBM's
is not capable of displaying JPG files in the default configuration.
To insert a graphic into your HomePage, use the following tag:
<IMG SRC="URL" options> image
You still remember what an
is, right? It is the location of the
'resource' to point to. If your imagefile is saved in the same
directory as your HTML file, the URL will just be the filename. But
you can also point to a file in a different directory or even on a
different server. (Watch out, most webmasters are not too pleased if
you link to their graphics without asking first, because each time the
picture is being loaded, a connection to their server needs to be
made, using their bandwidth.)
Even though none of the options are necessary, I do recommend to make
it a habit to include at least ALT.
ALT="text" alternate text (recommended)
There are browsers, such as
which can not display graphics.
Also many people have turned off graphics, which makes pages load
much faster, as the pictures are not being downloaded. If an image
is not or can not be displayed, a small box will appear instead of
the image. To let people without pictures know what they are
missing, you should include the ALT option and give a simple
description of the picture (one or two words) which the browser then
will display in the little box. With this info, the surfer can
decide whether (s)he wants to load the picture or not.
WIDTH="xxx" HEIGHT="xxx" dimensions
xxx is the width and height of the graphic in pixels. By using these
options, the browser will reserve the necessary space for a picture
from the beginning, so if it is set to display pictures after all
the text has been loaded, the text isn't being pushed down by images
later (which can be annoying when the text is moving down while
you're reading it).
Make sure to get the values right. Some browsers will stretch
pictures to the size specified for WIDTH and HEIGHT. (Ok, maybe if
you're a little overweight you might want to specify something
smaller for WIDTH and something bigger for HEIGHT when including
On the other hand, this 'stretching feature' of WIDTH and HEIGHT
could also be abused for displaying charts: say you have an image
mybar.gif, 10 pixels by 10 pixels, solid blue colour. To display a
chart like this:
John 70 points *******
Mark 30 points ***
Ruth 90 points *********
You might want to use
But be warned, you can not expect this trick to work with all browsers.
John 70 points <IMG SRC="mybar.gif" WIDTH=70 HEIGHT=10 ALT="">
Mark 30 points <IMG SRC="mybar.gif" WIDTH=30 HEIGHT=10 ALT="">
Ruth 90 points <IMG SRC="mybar.gif" WIDTH=90 HEIGHT=10 ALT="">
x in pixels defines how thick a border there should be around the
image. BORDER=0 means no border.
HSPACE="x" VSPACE="x" runaround space
x is the space, measured in pixels, that should be left free around
the image, HSPACE horizontally and VSPACE vertically.
ALIGN="top" align first line with top of image
ALIGN="bottom" align first line with bottom of image
ALIGN="middle" align first line with middle of image
You can specify how text should be aligned with an image. This will
align only one single line with the picture. Probably does not look
all that nice when you include some big photographs in a text. If
you want text to wrap around the graphic, one of the following two
options can be used:
ALIGN="left" wrap text around image, image left
ALIGN="right" wrap text around image, image right
This way you can have your photos fit nicely in your text.
LOWSRC="URL" low resolution image
Some graphics are quite big and need some time to load, especially
if they have many different colours. It can be annoying to wait for
the picture to load. The LOWSRC option lets you specify the URL of a
low resolution picture to load and display before the actual picture
is being loaded.
Let's say you have a big photograph in 65'536 colour mode. You now
could save the same picture in 16 gray shades, which results in a
much smaller file. Specify the URL of this smaller file in the
LOWSRC option. The browser then first loads the smaller version with
only 16 shades of grey and the surfer can already get a first
impression of the picture. After the whole page is loaded, the
browser will load the full resolution graphic specified in the SRC
part and overlay the low resolution picture with it.
The best way to learn something is always to just do it. Check the
result, find where you made mistakes and correct them.
For your exercises as well as for the location of your own or your
company's HomePage, you might want to check out
HomePage Hosting Service (
Reasonable prices and a lot of features.
Also for this 'lesson' there is a sample page available at
or if you missed the last article, you can get it by pointing your
What, you are reading this on the train, on the way to work? Didn't I
tell you to make yourself a cup of
Well then, maybe I ought to give you some examples right here too:
<IMG SRC="me.jpg" ALT="picture of me" BORDER="0">
Displays the picture me.jpg without border. If pictures are not
enabled, the browser will display the text 'picture of me' in a box
instead of the graphic. me.jpg is located in the same directory as the
HTML file referring to it.
<IMG SRC="images/nzjour01.gif" ALT="Mt. Cook" BORDER="2" ALIGN="LEFT"
First loads and displays the file nzjour00.gif, located in the
subdirectory images, relative to the directory of the HTML file. The
picture is displayed at the left and text wrapped around it. There is
also a border around the graphic, two pixels wide. After the page is
loaded, the picture nzjour00.gif will be replaced with the one called
nzjour01.gif. If the browser is not set up to display pictures, a box
with the text 'Mt. Cook' will be displayed instead of the graphic.
But now it's really time to practice. You can also do it on your own
harddisk, without any internet connection. Just use the 'Open File'
command in your WebBrowser.