Markup Web Development

Optimizing Image Alt Text: the How and the Why

In this post, you will learn about all the ins and outs of using Alt text for images on your site.

thumbnail

The aim of the article is to explore the importance of the Alt text attribute and best practices of writing it. 

What Is Alt Text? 

Alt text stands for “alternative text” – what appears on the page if the image doesn’t load, for example, when the Internet connection is slow. It is often (mistakenly) called the alt text tag. Actually, it is not a tag but an image attribute.

The alternative text for this image could be “Jack-o’-lantern against a dark background” or “Carved Halloween pumpkin against a dark background.”  

What Is the Purpose of Image Alt Text? 

Alt text’s primary function is to make the images on your site accessible to visually impaired people who use screen readers: the software will read the alt text in place of the image.

Alt text is also great for SEO because it tells search engines what your images are about, helping to index the images and therefore enhancing your organic traffic. 

How Can Images Bring Traffic to Your Site? 

One obvious venue is Google Images. However, it is not the only one. Visuals are becoming increasingly important: users now prefer to click on something they see rather than on a link leading to some text.

Google has reacted to this trend by packing its SERPs (Search Engine Results Pages) with rich features like videos and images. So, if Google can index the images on your site, they may well appear in the “image pack” on the results page. For example, this is what you can potentially see if you’re a woman looking for “women’s jeans casual.” 

(Image: “Women’s Jeans Casual.” Alt text: “Screenshot of a search engine results page featuring three rows of images of women’s jeans”). 

If you have an online store, a design studio, a photo portfolio, or any other site that heavily relies on images, you will benefit from image search. Even if the images are not your site’s focus, their optimization for SEO will improve the overall quality of the content, thus boosting the site’s ranking in searches.

To help Google find and understand the images on your site, you must optimize their metadata, including the alt text attribute. 

How Do You Add Alt Text?

If you want to add alt text manually into the HTML, its syntax is straightforward – you put it after the image source and type in the text within the “ ”: 

<img src=”jack-o-lantern.png” alt=”Carved Halloween pumpkin against a dark background”> 

It is even easier to configure the alt text in content management systems or e-commerce solutions – just type it in the corresponding field in the admin panel. Here’s a guide for WordPress and Shopify. 

Should You Specify Alt Text for All Images?

Alt text should be included only for those images that carry meaning. If an image is purely decorative, for example, a background image, its alt text attribute should be left blank: (alt=””). This way, the screen reader will completely ignore the image. However, if you don’t include the alt text attribute at all, the software will announce the image presence and read its title, confusing the listener. That is why the alt attribute should always be present, even if it is left blank. 

On a side note, it is best to include the decorative images in the CSS instead of the HTML. 

How Do You Phrase Alt Text? 

It may be tempting to stuff keywords into the alt text in an attempt to get more traffic, but it will most likely have the reverse effect. Google algorithms will view the text as spam and stop indexing the image.

Try to make the alt text sound natural. Ideally, it should be intertwined with the context so that it is perceived as an integral part of the surrounding text.

You can install an actual screen reader to hear how your site sounds. Alternatively, you can imagine how you would read the page to someone on the phone: how would you describe images so that they help the flow of text? The alt text descriptions must be succinct but give enough detail for the listener to construct a mental picture of the image. 

What Are Some Examples of Good Alt Text? 

A good alt text for this image  would sound something like:

“Rustic still life viewed from the top with home-made bread in the center.” (for a photo portfolio) 

Or “Artisan brown bread on a wooden table surrounded by rustic decorations and condiments in small bowls.” (for a bakery website or a photo portfolio) 

“Bread,” “bread on a table,” “bread and knife,” etc., would not make for a good alt text since they fail to represent the image adequately. 

On the other hand, a detailed description of every element in the picture would be too long to sound smoothly within the rest of the page text. 

How Long Should Alt Text Be? 

It is recommended that alt text not exceed 125 characters but should be at least 5-7 words long. (The examples above are 73 and 101 characters long, including the blanks). 

Which Words Should You Avoid in Alt Text? 

“Image of” or “picture of” should not be included since screen readers will announce the image, thus causing repetition. Search engines also “know” that they are dealing with an image, so using the word “image” would be a waste of space. 

Should You Use Punctuation Within the Alt Text Tag?

Yes, definitely. Commas and periods should not be neglected. Otherwise, the screen reader software might not manage to read the text in a comprehensible way. Google crawlers may also misread the text for a collection of keywords, which could flag a spam alert. 

Does Alt Text Have to Describe the Image Accurately?

Yes, the image and its alt text must match. If there is a red mug in the picture, but the alt text reads “blue mug,” the image may be initially indexed as a blue mug, but when Google algorithms catch on to the discrepancy, it will be removed from search results.

If an image contains text, the alt text for the image should include the text: 

(alt=”View of sunset mountains with a huge white “Hatta” sign in the distance.”) 

This is important because Google is good at recognizing the text within images, and if the alt text doesn’t include the visible text in the image, it may be perceived as deceptive or spamming. 

To sum up, alt text can play a key role in your site’s SEO. It works best when it is simple and concise, but at the same time descriptive and to the point. Just as with the rest of the text, the effort invested into producing quality content will pay off in the form of organic traffic to your site.


PSD2HTML is a leading provider of various frontend development services, from pixel-perfect design to HTML/CSS conversion to building fully functional web solutions with cutting-edge JavaScript frameworks such as Vue or React. So if you need assistance with any of these tasks, our frontend developers are always happy to help.

Just describe your project through this form or visit the order page.

Dmitriy Maschenko

Dmitriy is the head of a division and a Board member at PSD2HTML, a company that offers top-notch web and mobile development services to all kinds of clients, from S&M businesses to agencies and governmental bodies. Dmitriy went all the way from a developer trainee position up to where he is now. With 12+ years of experience in the IT industry under his belt, Dmitriy has a wealth of knowledge to share with his readers. He writes on topics related to business management, website & app development, and everything in between.

Comments are closed.