Is Image Alt Text Relevant for Usability and SEO?

spn_exclusive1Images 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. If you would like to learn more about website usability and SEO strategies, contact the HROC digital dept and speak to our dedicated team of search engine experts to discover how your website can out rank your competitors.

About the author


Chris Talbot

If you would like to learn more about website usability and SEO strategies, contact the HROC digital dept and speak to our dedicated team of search engine experts to discover how your website can out rank your competitors.


Click here to post a comment
  • Wow! This is something new I learnt today. I especially like the part where keyword stuffing is involved. I was doing that a lot without knowing any better. I see your point and thanks for the post.

  • I did not know how to do this until now. Thank for the help Alt tips. I will use them on my images.

  • For a while I have been using descriptive file names, alt tags and captions. I do extremely well in Google Image search. I even got top three image ranks for variations of “Hunger games mutt” within 24 hours of making a blog post when the movie was just out.

  • I always set height and width of the images because I always knew it was important, but did not know exactly why?

    Thanks for the explanation

    (by Google Tradutor)

  • Thanks, this was really helpful. I’m trying hard to learn about all of the elements involved with SEO but this seems to have more relevance to partially sighted readers. My dad has difficulty reading and whilst he hardly ever uses his laptop, I can now see the importance of relevant and descriptive image alt tags. Appreciate the help

  • Great Article. I was using alt only for SEO purpose. This article made me clear concept of alt tag. I’m sure this will enhance the quality of my website designing and users will have a better experience visiting & browsing my websites.
    Thank you very much.

  • It’s really a good point, because I’ve seen many pictures rank way higher than normal contents when I do a specific keyword search online.

    I myself always try to place the “Alt Picture tags” on all my websites, and I think it’s time for all of us to focus more on pictures for SEO purposes..If we really want to get notice by the Search Engines, I think now this is the time.

  • I have always used “alt” attributes in my SEO. But have always tried to not over use them.

    In my opinion they certainly make a difference in the On Site SEO.


  • We too have always used alt tags and images named for their SEO value, even name video files with keywords. It does help, especially with product sales sites.

  • i will get our seo expert to read this article its very important . We use alt tags but i wanna be sure we have them correct.

  • thanks for the tips. even alt not a great influence factor in on page optimization, but it’s a free optimization. so why not give an seo advantage on the alt. this article made me clear concept of alt tag.

  • This is actually a good article. Although this is a basic principle of SEO and the usage of the image tag, overall a informative one. The one part that I did learn here, was apparently something several did not know. The reason for adding the height and width to prevent the jumping around of the image during page load. Always used them, but did not know that little fact.

  • I understand that there is some dispute about the value of alt tags in SEO and rankings. At one point search engines were ignoring alt text due to keyword spamming. Recently, it appears that it is back in the algorithm, though not considered as important as H1 headings and other content. Any ideas about this?

  • thanks for the tips. before, i’ve been using the same alt text for all my images in one post. but after reading this, i wont anymore.

Sign Up for Our Newsletter