Images have a multitude of uses on a website. They can be used as
navigational buttons, bullet points, text graphics and icons to name
just a few. Most visitors to a website will be able to interpret and
understand the images simply by looking at them. But there are many
instances when users won’t be able to do this.
They include:
* Blind or partially sighted users who use screen readers when browsing.
* Users that have disabled the images in their browsers.
* Users that have text only browsers for various reasons.
* Search engine crawlers that can’t understand images.
Hyper Text Mark-up Language (HTML) allows you to add a textual
description of the images so they can be read by browsers and understood
in the situations listed above. This is done through the alt attribute.
An example of this is:
<img src="www.mywebsite/images/my-dog.jpg" alt="This is my dog">
The image alt attribute is certainly a significant factor for usability
and an important tool for search engine optimization (SEO). It provides
website visitors with restricted access with an extra layer of
functionality that enhances the usability of the site. It also allows
search engine crawlers to understand what the images represent, which in
turn helps them to rank in the search engine result pages (SERPs). For
example, if a user did an image search for ‘big brown dog’ in a search
engine, images with an alt attribute that contains the words ‘dog’ and
‘brown’ in various combinations have a chance of showing.
Below I have listed some aspects that can help your images regarding usability and SEO.
Image Tips
Use the following image formats when saving images for the web – gif, jpeg, png, bmp, svg and webp.
When saving an image use a filename that is descriptive of the image and not a generic filename, such as DSC221069.jpg.
Search engine crawlers normally index images of all sizes, but
getting the file size down as small as possible will help with the page
loading time and will enhance the visitor user experience. This can be
done by reducing the physical size of the image and reducing the number
of colors used by the image with the help of image manipulation
software.
Specify the width and height of the image within the HTML. This tells
a web browser the dimensions of the image before it has loaded and
space will be reserved for it. This prevents the elements on a page from
jumping around while it downloads. An example of this is:
<img src="www.mywebsite/images/my-dog.jpg" alt="This is my dog" width="450" height="200">
If you have text that is important in terms of relevancy to the
website or SEO, do not embed it within an image, make sure it can be
read as text and is part of the normal content on the page.
Alt Text Tips
Image alt text must be descriptive and ideally ten words or shorter.
The following examples demonstrate correct, incorrect and average usage
of the alt attribute:
Incorrect: <img src="http://www.mywebsite/images/my-dog.jpg" alt="">
Average: <img src="http://www.mywebsite/images/my-dog.jpg" alt="Dog">
Correct: <img src="http://www.mywebsite/images/my-dog.jpg" alt="This is my dog he is called Ringo">
For SEO purposes you should try to include keywords within the alt
attribute, but avoid keyword stuffing. For example, if you were showing
mens watches; this is an example of incorrect alt text usage:
<img src="http://www.mywebsite/images /menswatches.jpg" alt="mens watches, watches for men, watches men, men watches">
If your website has a number of images showing mens watches, make
sure the alt text is different for each image. Try to include the model
of the watch or the color.
If an image is used for navigational purposes, reflect this in the
alt text. For example, an image used for a ‘Contact Us’ button should
also have an alt attribute that reads ‘Contact Us’.
Where a company logo is displayed, it is good practice to use
‘Company Logo’ as the alt text. Some people make the mistake of typing
‘Back Home’ in the alt text tag for the company logo with a link that
takes them to the main page. This should be avoided. It is always better
to have descriptive alt text rather than the destination of the link.
Image HTML tags can also contain the title attribute and this is
often confused with the alt text. The title attribute is meant to be
read solely by a human visitor to the site, whereas the alt text is also
read by search engine crawlers. An example of title text would be
‘Click here for more information’ on an image that links to another
page.
When to Use Null Alt Text
Only use null alt text for images that are being used as spacers.
These images are usually meant to be invisible and help structure the
layout of certain elements. Null alt text is implemented like the
following:
<img src="www.mywebsite/images/transparent.gif" alt="">
Use null alt text for icons, bullets and decorative images such as
borders etc. Another way to stylise bullets and icons is through
cascading style sheets (CSS) which will remove the need for the alt text
completely.
By improving the usability of your website with the correct use of
the image alt text attribute, you will enhance user experience which
impacts on your site’s overall SEO in a positive way.
Article by Chris Talbot in SPN
http://www.sitepronews.com/2013/02/01/is-image-alt-text-relevant-for-usability-and-seo/
Is Image Alt Text Relevant for Usability and SEO?