oblaat

a guide to conceiving, creating & publishing your own website

Adding images

A website that is mostly made of text is certainly rich in content, and it sure can be entertaining. Some of the best novels have no pictures at all. Just some colour can greatly improve the visuals, too. But there is often a need for images; for an example, for decoration, for illustration, even to be the main focus of a Web page.

I would argue that the img element is one of the most important and powerful elements in your arsenal. It is one of the empty elements mentioned earlier and it takes two main attributes.

<img src="/img/ghostfriends.png" alt="My friends Inky, Blinky, Pinky and Clyde">

As an empty element, images start and end in one place, therefore they only require one tag.

The src attribute

The letters src stand for source: this is the source of the image I want to display. You can include any image in here, routed the same way you would a link: through an absolute link, a root-relative link, or a completely relative link.

The alt attribute

This is your alternative text. Many webmasters neglect it, but you should aim to always have it declared, whether you write something long or not.

Whether somebody has a slow internet connection, or images are turned off, or they use assistive technology, or the image you are linking to gets moved or taken down... this is text that is used in place of the image being displayed. This text should encapsulate the focus of the image.

In the example used above, the focus is the four friends in particular. They are named for those who cannot see the image. If the focus is a particular element, that particular element should be described.

However, if an image is only decorative or otherwise does not add anything to the page, it should have empty alternative text. This is different from no alternative text attribute, which would usually appear as the word "Image". For example:

<img src="/img/decoration.gif" alt="">

You shouldn't declare that an image is decorative in the alt text. Does it add anything but visual interest? Purely visual interest won't be very interesting in text form.