Alt text is one of those small details that most people either skip or stuff with keywords. Done properly, it does two jobs at once: it makes your page usable for people who can’t see the image, and it gives search engines a clear idea of what the image shows.
What alt text is
Alt text is a short written description attached to an image in your page’s HTML, in an attribute called alt. Screen readers read it aloud for blind and low-vision visitors. It also appears in place of the image if the file fails to load. Search engines use it, alongside the file name and surrounding text, to understand what the image is about.
How to write good alt text
Imagine you’re reading the page out loud to someone over the phone and you want them to understand the image. Describe what matters about it, plainly.
- Be specific. “Dog” is vague. “Golden retriever catching a frisbee on a beach” tells the whole story.
- Keep it short. Aim for a sentence, usually under about 125 characters. Some screen readers handle long descriptions poorly.
- Describe the purpose. If the image shows a chart, say what it shows, such as “Bar chart showing website traffic doubling between March and June.”
- Skip “image of” and “picture of”. Screen readers already announce that it’s an image.
Before and after examples
Weak: alt="image1"
Better: alt="Laptop on a wooden desk next to a cup of coffee"
Weak: alt="resize image resize photo free resize online best resizer"
Better: alt="Screenshot of the resize tool with width and height fields"
The second weak example is keyword stuffing, and it’s both unhelpful to people and a spam signal to search engines.
Where keywords fit
If a keyword naturally describes the image, use it. If the image is a screenshot of your image resizer, saying so is perfectly honest. What you don’t want to do is force a keyword in where it doesn’t belong. Write for the person first. Relevance to the page will follow.
Decorative images
Some images are purely visual, like a divider line or a background flourish. For those, use an empty alt attribute (alt="") so screen readers skip them. Leaving the attribute out entirely is worse, because some readers will then read out the file name.
Images with text in them
If a graphic contains words, such as a banner or an infographic, include those words in the alt text so nothing is lost. For long infographics, a short summary in the alt text and the full content in the page itself works well.
Don’t forget the file name and size
Alt text is one piece of image SEO. A descriptive file name helps too, which we cover in how to name your image files, and a heavy image slows the page down no matter how good its alt text is. Check our website image optimization checklist to cover the rest.
A quick audit habit
Pick your five most visited pages, look at every image, and ask: would someone who can’t see this still understand the page? If the answer is no, add or rewrite the alt text. It takes minutes and it’s one of the more worthwhile things you can do for both accessibility and search.
Before you upload anything, resize it to the size you need with our free image resizer, then add alt text in your editor.