GIF my HomePage pictures, Mr. JPG

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 tea and read on.

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

size

The bigger your picture, the more data is required.

colourdepth

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
  

fileformat

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 WebExplorer 1.0 is not capable of displaying JPG files in the default configuration.

<IMG SRC="URL" options>         image

You still remember what an URL 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 Lynx, 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 your picture.)

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

 <PRE>
   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="">
 </PRE>
    

But be warned, you can not expect this trick to work with all browsers.

BORDER="x"                    border

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 PINBOARD's HomePage Hosting Service ( http://www.pinboard.com or Kurt@pinboard.com). Reasonable prices and a lot of features.

Also for this 'lesson' there is a sample page available at

What, you are reading this on the train, on the way to work? Didn't I tell you to make yourself a cup of tea? 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" LOWSRC="images/nzjour00.gif">

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.

© Algorithmica Japonica Copyright Notice: Copyright of material rests with the individual author. Articles may be reprinted by other user groups if the author and original publication are credited. Any other reproduction or use of material herein is prohibited without prior written permission from TPC. The mention of names of products without indication of Trademark or Registered Trademark status in no way implies that these products are not so protected by law.