Inserting images using HTML

The web wouldn't be half the experience if it wasn't for the <IMG> tag. The <IMG> tag delivers the ability to easily insert images into a page from anywhere on the web. We'll take a look at this tag and the sort of things you can do with it

<IMG> basics

The <IMG> tag specifies not only the image location, but also how to present it on the page. The SRC attribute describes the location of the image as a URL or a URI. You can link an image in from anywhere on the web. For example:

<IMG SRC="http://www.google.com/images/logo.gif">

You can control the size of the image by specifying the WIDTH="" and HEIGHT="" attributes. You can specify the number of pixels, or percentage of original image, the size the image is to be resized to. It is not recommended that you let the browser size your image, as it will never make as good a job as a dedicated image program. In addition, you may be asking the user to download more bytes than they need to, if you aren't going to be displaying the full image.

In addition you can specify how the image positions itself to other elements beside. We can control this using the ALIGN="" attribute. This allows us to control how text is to flow around the image. Consider the two examples below. The first image has the ALIGN="LEFT" while the second has ALIGN="RIGHT".

The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.

There are a number of different values you can have in the ALIGN attribute and they include: LEFT, RIGHT, MIDDLE, TOP, BOTTOM. There are extra ones, but they do not operate on all browsers.

Being practical with images

One of the key things to remember when designing your pages with images inside them is how the page is physically built and rendered for the user. The HTML page is downloaded first, which is then interpreted by the browser and rendered. Then, if there are any images or external resources to retrieve, the download of them begin after the page has been rendered. Therefore it is possible for the user to see no images to begin with, and for them to then pop on the screen. But even that is on the assumption the resource was found.

So with that in mind, there are a number of techniques we can do to give the user a greater experience when viewing images.

Let us first look at the situation where the image is not found. Let us look at displaying the Google image, but assume for some reason it isn't available. We see this in the page:

<IMG SRC="badimage.jpg">

As you can see, the small generic invalid [x] box is displayed (some browsers may just display an empty space). As we can see from the ALIGN example at the top the size of the image can dramatically effect the page layout, which you may wish to maintain even if there is no image available. We would do this by specifying the width and height attributes. For example:

<IMG SRC="badimage.jpg" WIDTH="200" HEIGHT="100">

As you can see the size of the image has now been rendered. However, its still just an empty box. We can suggest alternative content should the image not be loaded yet, or is unavailable. We do this using the ALT attribute. For example:

<IMG SRC="badimage.jpg" WIDTH="200" HEIGHT="100" ALT="Google Image">

Now you can see, the box has some text inside, which is great feedback for the user. But there is still more we can do. Just as we illustrated with the <A> tag, we can specify a TITLE attribute that will popup a small piece of text when the mouse hovers over it.

<IMG SRC="badimage.jpg" WIDTH="200" HEIGHT="100" ALT="Google Image" TITLE="Google">

This allows you to add a little more depth to your images and increase the multimedia experience.

Linking From Images

As stated earlier you can make your links clickable by simply wrapping them in the <A> tag. For example:

<A HREF="http://www.google.com"><IMG SRC="http://www.google.com/images/logo.gif"></A>

Now if you click on the image, you will be taken to Google. However, do you notice something about the appearance of the image? It has a border around it. This is the default behaviour for images that are clickable. Sometimes this is not the look you are after and would prefer it not to be like that. You can turn off the border, by adding the attribute BORDER="0" to the <IMG> tag.

<A HREF="http://www.google.com"><IMG SRC="http://www.google.com/images/logo.gif" BORDER="0"></A>

tags: images  files  pictures  photos  img tag  html