Adding images to our content

Adding Images to our Content

The HTML IMG element is used to add images to our pages. This element has several attributes that could be used in our markup as well.

SRC Attribute

This simply specifies the url of the relevant image and it has to be present.

This markup on its own will display our graphic just fine but if images are not available for some or other reason, nothing will be displayed.

ALT Attribute

This is the alternative text to the image and it should always be present. Here we enter the text that should be displayed when the image is not available. An empty alt attribute (alt=”") can be used if the image is used purely for decorative purposes and has no bearing on the relevant content.

An image might not be found by the browser, the particular browser might not support images or a user might have turned off such support. People with visual disabilities make use of screen readers to read web pages to them. These readers read the content of the alt attribute out to these users.

A browser should not display whatever is entered into this attribute if the image was loaded successfully. Internet Explorer gets this wrong in that if there is not title attribute present, it will use the alt attribute as a tool tip text.

Again, this will display the image just fine.

This time an alternative will be shown if it is necessary.

TITLE Attribute

This attribute should be used to convey any additional information about the image. Most browsers will display the value of the title attribute as a tool tip. You need to be careful not to include crucial information in this attribute as not all users have a mouse and they will never see the tool tip text.

This will display the image, with an alternative in place as well as a tool tip text showing additional information.

LONGDESC Attribute

This is normally only used for complex images such as graphs. If the image is not available for whatever reason the relevant information should still be available to the user.

This will show the relevant image if images are available.

There is no visual clue that there is an alternative page connected with this image. Screen readers will let their users know there is an alternative available. In this case the user will be taken to this page:

HEIGHT and WIDTH Attributes

If these attributes are not set it can slow down page loading. If these attributes are set a browser will display a placeholder with the correct dimensions until the image has finished loading. There will be none of those funny image movements as the image finishes loading.

Other Attributes

There are other attributes that can be used with the img element but they all have to do with the layout and alignment of the image. These things no longer belong in HTML and should be included in the stylesheet.

I do hope this helps a bit in getting our web pages as accessible to as many as possible.

These posts might be related: