BACK

HTML for Dummies - Pictures

This page of our tutorial teaches you how to insert images (pictures) into your web page. Be warned - there are many tricks and traps. But none that an intelligent person like you can't overcome! You also find out how to set an image as the background to your page.

1. Image syntax

The above should insert a picture of your dog fido into your web-page. In fact, it probably will. Why then is it so totally, completely, abysmally, horrendously, flesh-creepingly wrong? Three reasons:

1. You didn't say how big the image is!
2. You didn't label the image!
3. You didn't keep the image separate!

Okay, so what's so bad about not doing the above? Well, firstly many browsers won't start displaying the page on the screen if they don't know how big an image is until the whole image is loaded. Your reader stares at a blank page for minutes while the image is loaded across her slow connection!

Secondly, there are still people who turn off all images (saving time)! If you don't label your image, they have little idea what should occupy the irritating blank space on their screen.

Thirdly, it's really rather important to get your head in order before you create your web page. Plan how your website will look, and store files appropriately in a hierarchy of directories. One symptom of a disorganised website is a mix of images and html files (Okay, we've also been guilty of this in the past - do as I say, not as I have done)!

Now that you're thoroughly intimidated, here's a better version:

See how we did this - we've put in the width and height of the image, and also the alt section which describes the image. Much prettier.

2. Where can I steal images?

• not that hot;
• the wrong size;
• unoriginal.

We would humbly suggest that you get hold of a digital camera (it doesn't have to be that fancy) or simply get access to a scanner so you can scan in conventional photographs.

In addition, software that can create and edit images is vital. This doesn't have to cost you an arm and a leg. Our personal favourite (for several reasons including ease of use) is Paint Shop Pro, from Jasc software. It's really inexpensive, powerful, user-friendly and no, they didn't pay us anything to say this! (Order the CD ROM, don't try and download the program unless you have a super fast connection).

From now on we will assume that you have free access to images, and that you can resize them at will! Okay, so you have your fancy new digital camera that can take pictures 1800 by 1200 picture elements (pixels). So you take a picture of your faithful dog fido, and put this on the front page of your brand new website mydogfido.com, right?

The golden rule for inserting pictures into web-pages is DON'T. Think again. Are you sure you want to put in a picture? Still don't. Think again, then only put in the picture, and make damn sure that it's small.

We don't mean small as it appears on the page. We mean that the file containing the picture doesn't occupy much memory - the bigger the file, the slower it will download onto the unfortunate user's computer. One or two kilobytes-sized files are reasonable. Ten K is oKay. One hundred and sixty K (Occasionally encountered on the front pages of presumably intellectually challenged website designers) is a total outrage!

3. File formats

1. GIF; and
2. JPG

This dearth is rather strange, as the PNG format is better than both, but can be easily explained - mix stupidity and inertia in equal proportions, and there you have it! Mmm. Perhaps that's a bit unfair. GIF and JPEG have been around for so long that they are more-or-less standards. Both have their limitations.

3.1 JPEG images

3.2 GIF images

GIF compression is lossless. Use GIF files if you have a snazzy image with only a few colours. You will generally get better compression with GIF if you use fewer colours - remember that in any case you are limited to 256 colours in a GIF file. Note that there is generally no point in reducing the number of colours in a JPEG image - rather increase the compression ratio.

A rather sexy feature of GIFs is that you can make areas of the picture transparent, so the background shows through. Most useful! (Note that in PNG, you can even vary the degree of transparency, something that cannot be done in GIF. It's a real pity we have no PNG-aware browsers around).

Yet another incentive to use GIFs is that you can turn gifs into moving pictures (The GIF file is made into a series of 'frames', each of which is shown in turn). Although cute, you should generally avoid such fancy GIFs, as they tend to become bulky and take time to download. But don't see this as a proscription - in some circumstances, they're just the thing!

4. Really fancy images

Some will argue that internet connection speeds are always increasing, and will reach a point where you can plonk any size of image on the net with minimal fuss. We are not convinced - generally, as the bandwidth increases, so the usage increases even more, and we're back to square one!

Together with your images you can use things you have learnt before. Try the following:

Save the file under the poorly mnemonic name of say page4.htm. Note that you haven't yet created the page "ripper.htm" - it's a broken link. We assume that you have the creativity to actually go out and find / take / create a reasonable picture of a dog. Remember to put the right width and height in (What happens if you don't?). Here's what you should see when you open up the page:

Note the rather crappy image quality - we used high a compression factor when storing the actual image you see on the screen. But there are several other important points to this demonstration.

• The text is aligned at the bottom right of the image, NOT below;
• There is a blue border (!) around the picture;
• The path I've used is (heh) different from before - the examples from previous lessons were made on my machine at work, while this was done at home. But I've still preserved the basic directory structure.
• When you actually make the above page, see what happens when you move the mouse cursor over the picture. Interesting, isn't it?

The first problem - the text to the right, is unfortunate, but easily fixed. Just put in a <br> after the image and before the text "Click on the above..". The blue border is an unfortunate side effect of our having turned the picture into a clickable anchor. The way you turn this off is by adding   border="0"   into the <img > tag. Try this.

Play around a bit with the above file. Make the file "ripper.htm" and click on the image to go there. Move the </a> closing tag to after the "Click on the above.." text. How do things change?

5. Backgrounds