Images on websites

The tag used for images is called <IMG> (i.e. image). It is a bit special compared to other tags, as it has no end tag. For the tag you have the attribute SCR, which is where you specify the image to be inserted there.

If we have the image 'Laugh.gif' in the directory named 'Graphics', the code looks like this:


On the screen, the result looks like this:

Having the image inserted is one thing, having it placed right on the page is another matter. This can be a bit tricky, as you have several options.

If we start with the simple placements: right, left and middle:

Before HTML 5 you had the attribute ALIGN. It still works to some degree for HTML 5, but according to trustworthy sources, it will become invalid. Today we use the STYLE float instead. Here you have the following options:

Value	Effect
left	The elements floats to the left. It you have text, this will be displayed on the right side of the image.
right	The elements floats to the right. It you have text, this will be displayed on the left side of the image.
none	The element does not float but stays where it was placed in the text (e.g. small smileys in the middle of the text)
inherit	Specifies that the elements inherits the value from the parent element, i.e. if the text is left-align, the image will be aligned to the left, etc.

If we want the image to the left, the code is:


Which looks like this:



Getting the image centered requires a bit more work, as there is no style named float:center. Instead you use a combination of three styles: float, block and margin. Float has to be 'none', so the image is placed at the same position on the page as in the code. Display must be 'block', i.e. it is a box with nothing placed on either side. Margin must be '0 auto', which means that top and bottom margin is 0 and left and right margin, the browser has to calculate itself. By having to calculate both left and right margin, the browser will center the image.

The code now looks like this:


On the screen it looks like this:




Another, more widely used, solution, is to place the image in a DIV with centered text. The code for this looks like this:


On the screen it looks like this:



When using this solution, you should be aware of any specifications for the IMG tag in the stylesheet. If you have a default setting for IMG such as float:left or float:right, these will overrule the DIV. In that case, the IMG taqg needs to be equipped with a float:none or float:inherit, so it follows the centering for the DIV. Then the code looks like this:

The image size can be scaled according to need. Usually it is a bad idea to upscale images, as they tend to become grainy and pixelate. Scaling down, on the other hand, is often a good idea, as it can give you sharper images on the screen.

The size is specified using STYLE, and you can specify both height and width. Both styles are best scaled as size in pixels. You can scale using other units, e.g. mm or %. When using % you should be aware that the percentage is not in relation to the original image size but the size related to the available space, so 50% width does not make the image half size but makes the image take up 50 % of height or width of the tag is was placed in.

If we look at the image 'Laugh.gif' from before and scale it to 30 pixels in height, the code looks like this:


On the screen it looks like this:



If you only use one of the styles, the browser will scale the unspecified dimension, so the proportions are maintained.

Setting both styles at the same time is not a problem. You can have a lot of fun out of stretching the images out of shape. If we continue working with the scaled image from before and set the width to 100 pixels, the code looks like this:


On the screen it looks like this:

For the IMG tag you have a fairly important attribute named ALT. ALT is the attribute telling the search engines what is on the image, when the site is indexed.

People are generally poor at naming files, so they get a number or combination of letters, and the search engines has no chance of telling the difference between images 1.jpg and 2.jpg. This is why you write in the ALT attribute that 1.jpg is "Aunt Oda doing a handstand." and 2.jpg is "Uncle Oscar dropping his dentures."

Internet Explorer also uses the attribute to make a text box when you point with the mouse. The other browsers use the attribute TITLE to make this text box. In practice, this means that ALT and TITLE are often the same. If both attributes are specified, Internet Explorer will show the content of the TITLE attribute instead of the ALT attribute.

If we take the image 'Laugh.gif' from before and want to have it indexed as "Laughing smiley", and also want to have it as the image text when the mouse is over the image, the code looks like this:


On the screen it looks like this (hold the mouse over the image):