Further Attributes
Now that you know the basics of adding an image to a webpage, you'll want to learn these most basic of attributes for making your images accessible and presentable.
This page was last updated on 2012-08-21
( Note: if you're looking for how to align images, that's over here )
height and width
Before an image has downloaded, a box will appear showing where on the page it will be. This box may be any size, and often the wrong size. Then, when the image finally begins to download, it is suddenly found to be too big for the space your browser has given it, and so everything has to be shifted around to make room, messing up whatever you were reading at the time and generally causing a disturbance. You can prevent this with the height and width image attributes.
The concept is simple: you input the dimensions of your image in pixels into your HTML code. This tells the browser how much space to leave empty, ready for your image, ensuring that no post-load shifting goes on, and keeping your layout correct all the way through the download process. Example:
<img src="line.gif" height="3" width="500">
Giving the correct size has many advantages:
- It stops the loading mess-ups
- Your page appears to be loading faster, as everything is in place
- If people have images turned off, they still get the same page layout
You can also change the size of the images displayed in the browser. Note that this does not change the filesize of the image. Nor will it make any permanent changes to the image. It is just twiddling the image in the browser, nothing more. All you do is put in whatever height and width you want. See those horizontal blue lines I use further up the page there? They are actually 1x1 pixel images made to their shape by this sort of manipulation.
Some images resize better than others. Photographs and the like will look terrible if you start resizing them with these attributes. Simple blocky images will be fine, and in fact you can make these small in your image editor and then multiply their size in your browser, which makes the image load faster as the filesize will be smaller.
Where are the numbers?
If you don't know the dimensions of your images you can find it out in a number of places. When you have the image open in your graphics editor, it should have the dimensions somewhere on the screen, in the form 120 x 80 x 16. These numbers correspond to the width, height, and number of colours.
Otherwise, in your browser right-click on the image and select 'properties'. Beware, however, that this shows the display size, so if the image you're checking has already been resized, you're going to get that size. Some of the better HTML editors will add in the heights and widths for you, saving you the hassle.
And never, EVER downsize the image with these attributes — do it in your image editor. You'll be showing a small image and downloading big ones. Nasty.
The alt attribute
You know the way when you leave your mouse pointer over an image for a while a little box pops up with text in it? That is the alt attribute at work. It was invented so that people who can't view images, or have them turned off, get an ALTernative, so that they at least know what would have been there. Use it like this:
<img src="tree.gif" alt="A lovely tree">
This text will appear in the box waiting for the image to download too, so the reader knows what's coming. This is yet another reason to use height and width, as the text you input as an alt will stretch these boxes. With the attributes in place this won't mess anything up. Also, for any blind readers that you may have, the alt text is read out to them by their computer.
You can use the alt attribute to offer further information about an image, but it's proper usage is to function as a replacement for the image, so try not to leave anything too ambiguous. The alt attribute is the centre of much discussion — have a read of some » guidelines on alt texts.
If you need to include characters like quotation marks in your alt tag, you have to use the " entity reference, so you don't end the attribute by accident. You could also substitute single quotes in for the double quotes.
Image Margins
You can give your images some breathing space by using two more attributes — hspace and vspace — which stand for Horizontal and Vertical space. These are great — they will add some padding to the sides of your images and push any text near the image away. A typical line of code goes like this:
<img src="go.gif" hspace="10" vspace="10">
As you can see from the image's border, the text is 10 pixels away from it (and the image is 10 pixels from the right border of the table cell too).
And that's that. Make sure you use the three top attributes, and you can use the other two spacing ones whenever they're needed. They improve the usability of your site, and make it look better too.
