After all the material we've dealt with in relation to formatting text, doubtless you'll be pleased to get to this point -- where we examine how to put graphics and photographs on to our web pages.

Placing images on web pages is really quite simple (placing them exactly where you want them, and getting text to wrap nicely around them is a little harder). They key to it all is the <IMG> tag. <IMG> has no closing tag, but it does have one mandatory attribute, src. This attribute specifies the source of the image, i.e. its filename and location.

Let's take a look at a simple example of how it is used, in the piece of code below:

In this example, the image file is named "sunset.jpg", and no additional path information is required when specifying the filename in this case, because the image file is located in the same directory as the HTML file that calls it. Now see how it looks in your browser.

That was easy, wasn't it!

Before we get any deeper into this subject, we should draw breath to look at the kinds of graphics files that can be used on the world wide web.

The web, and most graphical web browsers, currently support two types of image files: GIF and JPEG. (GIF was intended by its creators to be pronounced "jiff" with a soft "g", but most people I know pronounce it "giff" with a hard "g". JPEG is pronounced as "jaypeg".)

GIF (Graphics Interchange Format) was originally created by CompuServe for use on its online service. It uses a compression mechanism to reduce the size of the file so that it takes less time to transmit across the Internet. The compression method used is "lossless", which means that when the image is decompressed by the web browser, it will be no different in quality from the original image before it was compressed as a GIF file.

GIF files are recognisable by the filename extension ".gif", for example "mypicture.gif". Generally speaking, GIF is the best file format for line art and "block colour" type of graphics. The buttons you see on the right of this page, and the section headings throughout this tutorial are in the form of GIF graphics. Three of the most useful features of the GIF format are:

1. The ability in the later GIF89a format to designate one colour in the image as being "transparent", allowing easier blending of an image with a background. This technique eliminates the halo effect that you may have seen around graphics on some web pages.

2. The ability to "interlace" images. In this way, when the image arrives at the browser, it is built up in four passes, so that in a short time the viewer sees the rough shape and colour of the image, with more detail being revealed in each pass.

3. The ability to produce animations quite simply, by creating a number of "frames" that are all saved in the GIF file, along with instructions on how long each frame is to be displayed and whether a frame should overlay or replace the previous one in the sequence. Animations can be set to run through just once, or to loop continuously.

JPEG (Joint Photographic Experts Group) also uses a compression method to reduce the file size from that of the original image. However the compression method is "lossy", that is, there is some loss of quality between the JPEG file and the original image from which it was created. The degree of compression, and hence the loss in quality (more compression, less quality) can be controlled when creating the JPEG file. In the right circumstances, considerable compression can be achieved without too visible a loss in quality. For example, our sunset photograph was compressed at only 30% quality and looks fairly presentable. The file size is only 7618 bytes, compared with 68482 bytes at 100% quality. Our compressed image should take only about one ninth of the time to download.

JPEG files are recognisable by the filename extension ".jpg" or ".jpeg", for example "myphoto.jpg" or "yourphoto.jpeg". Generally speaking, JPEG is the best file format for photographs or images that have a photographic quality.

Sorry, did I say GIF is the best format for line art? PNG (Portable Network Graphics, and pronounced "ping") is the new kid on the block. Like GIF, it uses a lossless compression algorithm and is well suited for line art and block colour. Unlike GIF, which is a patented technology proprietary to CompuServe and Unisys (who can charge a royalty fee to the makers of GIF compression software), PNG is an "open" format, the use of which costs nobody anything.

PNG files are recognisable by the filename extension ".png", for example "mygraphic.png". Basically, PNG can do anything that GIF can do -- but it has a number of technical advantages over GIF, which in time should see it take over as the dominant file format in the areas where GIF has been king until now. However, the format is not widely supported by installed browsers: as I write this, version 6 of Netscape Navigator has been released, but many folks are still using version 4, which does not support PNG. (Version 4 upwards of Internet Explorer does). Also, the graphics software used to prepare images for the web is lagging in support for PNG. But these problems will be eliminated in time, and web designers will be able to to take advantage of the additional benefits of this format such as the 256 levels of transparency.

It isn't really the purpose of this tutorial to go into much detail about graphics formats and their pros and cons. Until you are more skilled in developing web pages, just bear in mind this general guideline: if your image is a photograph or has lots of shading, use JPEG. If it's line art or cartoon-type graphics with little shading, use GIF. To create animations, use GIF.

In this section, once again we're going to make use of the deprecated align attribute (and a few of its deprecated buddies, clear, vspace, hspace and border), against the recommendations of the HTML specifications. But until every browser installed on every computer in the world supports CSS, it's the only way to get some control over where images land on your page in relation to the surrounding text. And I think that's something that does help in the organisation of your document and your users' understanding of its content. So here goes...

To begin, open a new file in your editor and enter the following code:

Save your file as "file8.html". When you open it in your browser, it should look like this.

Notice that our code had no instructions (such as a <P> or <BR> tag) to start the text on a new line, so it follows on directly after the image. You should see that the baseline of the text begins in line with the bottom of the image. This is the default, if you don't specify a particular alignment.

We can define different alignments by the use of attributes in the <IMG> tag. For example, let's see the effect of the align attribute. Modify your file in your editor as shown below:

Save your file. When you open it in your browser, it should look like this.

This time, you'll note that the top of the line of text begins aligned with the top of the image. But once it reaches the right hand edge of the browser window, the text wraps around to underneath the image.

Let's try something else. Modify your file as shown below:

Save your file. When you open it in your browser, it should look like this.

This time, the baseline of the text is aligned with the centre of the image, but again it wraps around underneath the image.

Make another change to your file, as shown below:

Save your file. When you open it in your browser, it should look like this.

This looks just the way it did the first time, when we didn't specify an align attribute -- because "bottom" is the default alignment.

You should have gathered from these examples that using these alignment attributes, we can't get text to wrap alongside and around an image. But there is a way. Look at this code example, where we have set the align attribute to "left":

Take a look at this in your browser.

The image should be set against the left margin, with the text flowing alongside and then wrapping underneath it. Alternatively, we can position the image against the right margin simply by changing the align attribute to align="right". Take a look at the effect of this change on an otherwise identical file.

That's fine, but what if you want to stop filling in the space alongside the image and start the next line below it? You might think that a line break <BR> or new paragraph <P> would do the trick, but it won't. These will just break to the next line or paragraph alongside the image. Using the same example as above, but with a new paragraph inserted into the code, you can see what I mean. Here's the amended code:

Now see how this looks in your browser.

See what I mean? To get our new paragraph to start underneath the image, we have to use the <BR> tag with a new attribute, clear. The clear attribute takes one of three values, "left", "right" or "all". "left" will cause the text to break to the nearest line below any image on the left margin (left-aligned images). "right" will cause the text to break to the nearest line below any image on the right margin (right-aligned images). "all" will cause the text to break to the nearest line below any image on either margin.

Look at the same code again, with the tag inserted where we want to make the break:

Now see the effect in your browser.

That pretty much covers the alignment aspects of images. That leaves us with a couple of other features to explore.

In the alignment examples we saw up above, you probably noticed that text was butted up pretty closely against the image. Just how closely depends on your browser; usually they give only a few pixels of space. But you can determine how much "white space" you want to have around images yourself, and specify it using the vspace and hspace attributes in the <IMG> tag. vspace controls the space above and below and image (the vertical space) and hspace controls the space on either side of an image (the horizontal space). Both of these attributes take values in pixels.

Open up your "file8.html" file in your editor and modify as shown below:

Save your file. When you open it in your browser, it should look like this.

Unfortunately, there isn't a way using this technique in which you can apply some clear space to just one side of an image. hspace always adds the same amount to both right and left sides, and vspace always adds the same amount to both top and bottom. But it does provide a simple mechanism for adding just a little more space around an image so that text does not look uncomfortably squashed up against it. Take a look at this case based on a previous example, where I have added in vspace="20" and hspace="30" to the original <IMG> tag.

Another attribute that may be used with the <IMG> tag is border, which allows you to create a border around an image of whatever width in pixels you choose. Look at this piece of code:

Take a look at this in your browser.

Personally, I don't find borders around images to be particularly useful; they tend to look rather ugly. In fact, the border attribute is more useful for explicitly eliminating a border from an image, as we shall see in Lesson 9 on Links.

We're going to look now at two important and very useful attributes of the <IMG> tag: height and width (and yay! these are not deprecated attributes!). As you might easily guess, these attributes are used to specify the height and width of an image, and take values in pixels.

If you leave the height and width attributes out of an <IMG> tag, when the HTML file that references the image file is being downloaded by a browser, the browser will determine the size of the image and will render it on the page at the original size. But in order to do this, it must first read the HTML file and then examine the image file to find out what size it is, before displaying anything on the screen. The browser can't begin to render any of the text on the screen until it knows how much space to set aside for the image.

If there are lots of images on a page, and none of them have the height and width attributes set, then it could be a long time before someone downloading that page will see anything on their screen -- because the browser has to read all of the image files to determine their size and to work out where they will be placed on the screen and how much space they will occupy, before it can start "filling in" the text. Meanwhile the viewer sits drumming his or her fingers, looking at a blank screen.

However, if you tell the browser what size the image is by including the height and width attributes, then the browser can set aside the required space for each image and can begin almost right away to render the text on the screen, filling in the images later. Most browsers use this trick.

This is a much better way to work; your viewer gets to read your page's text while the images are read in by the browser. Experience of web viewing will have taught you that image files are generally much larger than the text on the page, and on a slow connection it can take a long time for images to download. So let your viewers read your text while they wait; otherwise they may get bored and point their browsers elsewhere.

So how are these attributes used? Very simply. You need to know the height and width of your image in pixels. If you created the image yourself, you probably already know this from the graphics program you used to prepare it. Or, you can read the image into any of the common graphics or image manipulation programs to get this information. Then just plug these values into the attributes. For example, the sunset photograph we have been using for the examples in the lesson is 300 pixels wide and 227 pixels high. Check out the code below:

Take a look at this in your browser.

These attributes allow you to carry out another little trick, but it's one that should be used with care. Using our sunset example again, look at what happens when we modify the code as shown below:

Take a look at this in your browser.

Here, we've increased the displayed size of the image by one third, just by changing the values of the height and width attributes. Note that this uses the same image file -- what's happening is that the browser re-scales the image on screen according to what has been specified in the height and width attributes. Occasionally, this is a useful way of increasing the size of an image, or for using a relatively small image file to minimise download times but getting more out of it on screen. The down side is that quality is always affected detrimentally when you re-size an image this way, so don't overdo it. If you think from time to time that this trick will be useful, make sure you check the final appearance for acceptability.

In the example above, both the height and the width were increased by about 33%. Make sure that you change both height and width in the same proportion, otherwise your image will be distorted (unless this is the effect you want to achieve). Take a look at this example of what I mean.

You can do the same trick in the other direction -- but don't! You can scale an image down to a smaller size by setting the width and height attributes smaller, but there are good reasons not to:

1. You are not saving anything by doing this. Regardless of the size at which you intend to display it, you still have to download the original file, which may be large and time-consuming.

2. It's just plain wasteful to use a file that is larger than you need, and then to reduce its quality by displaying it at a smaller size.

If you want the image to be smaller than the original version, it's better to reduce the size in an image editing program first.

The last attribute we're going to look at is certainly not the least. The alt attribute lets us specify some text that will be displayed in place of the image if the viewer is using a text-only browser (or if he or she is browsing with images turned off). Some browsers also display this text when the mouse is passed over the image.

This is a very useful feature. Just imagine for a moment what your pages might look like if you turned images off in your browser (you could actually do it, if your imagination isn't good enough), especially if you use images for navigation links. Without any indication of what the image actually is or what it represents, how are these viewers to know what they are missing, or what they should select to go where?

To get around this problem, we use the alt attribute to define some alternative text, as in the code example below:

Before you take a look at this in your browser, go to your browser's "preferences" or "options", and turn images off. When you take a look, the image will not be displayed, but you should see the alternative text in its place.

Turn images on again in your browser, then look at the page again. Pass your mouse over the photograph, and see if the alternative text pops up on screen. It might, or it might not -- it depends on which browser you are using. This feature works with recent versions of Netscape, Internet Explorer, and Opera, and probably others.

Don't underestimate the usefulness of this attribute, and don't waste it by entering something like the filename instead of some descriptive text -- this is completely meaningless to your viewers, who don't care what the file is called. They'd rather know what the image is. It can be helpful to include the file size in your text description. Then if someone is browsing with images switched off, they will:

• see your description, which tells them whether or not they are likely to be interested in the image

• see the size of the file, which will give them an idea of how long it will take to download.

Then they can make an informed decision whether or not to switch images on or download the image file.

Images are placed on web pages using the <IMG> tag with the mandatory src attribute to specify the path and filename of the image file.

GIF and JPEG are the most widely supported image file formats. As a general rule, GIF should be used for line art and block colour types of graphics, while JPEG should be used for photographic images.

We can exercise some control over the relative alignment of images and text by use of the align attribute in the <IMG> tag, and we can force text to break to the nearest line below an image by use of the clear attribute in the <BR> tag.

We can specify how much white space in pixels to inject around an image through the use of the vspace (in the vertical direction) and hspace (in the horizontal direction) attributes in the <IMG> tag.

We can control the size in pixels of the border around an image using the border attribute in the <IMG> tag.

Stipulating the size of the image in pixels using the height and width attributes in the <IMG> tag helps browsers to render the text on the page quickly, while the images are downloading. We can also use these attributes to instruct the browser to re-size the image, though this technique has other implications.

The alt attribute in the <IMG> tag lets us specify alternative text that will be seen in place of the image where viewers are browsing with images turned off, or with text-only browsers.

The attributes clear, vspace, hspace, and border are all deprecated; height, width and alt are not.