HTML tutorial - Images

Navigation

Skip navigation.

Site search

Site navigation

HTML tutorial

Printing

Other tutorials

Images

There are three types of images that are usually used on the Web; JPEGs, GIFs and PNGs. Some browsers cannot handle alpha transparency in PNG images.

Images are embedded in Web pages using the IMG element. This allows you to specify the source of the image, and alternative text to use if the image cannot be displayed. It is also possible to specify its width and its height, but generally this is not needed, since images will be displayed at their natural size anyway. If you want to display an image at anything other than its natural size, you can use CSS to manipulate its height and width. Most browsers will also display a border on the image if it is inside a link. If you do not want this, then remove it with CSS.

Images are an inline element and can be inserted anywhere inside the normal flow of a paragraph, or other text content.

<img src="some_image.jpg" alt="Alternative text here">

The ALT attribute is required. There is no closing tag.

Choosing good alternative text

The alt text should be used to ensure that the document still makes sense without the image being displayed.

If you have text on the image, the alt text should match the text or say something relevant. If the image is a link, you should put text that is relevant to the link. If the image is not important, say for example a red ball that is not a link, then you should not put alt text of "a red ball", you should put no alt text at all, and instead write alt="".

Basically, imagine that every image is replaced directly with the alt text. Then try reading the page, and see if it all still makes sense.

Some browsers incorrectly use this attribute to produce tooltips. This is incorect behavior. If you want tooltips, use the title attribute:

title="my tooltip"

Last modified: 4 September 2008

  1. Previous
  2. Next
This site was created by Mark "Tarquin" Wilton-Jones.
Don't click this link unless you want to be banned from our site.