How to Add Image Alt Text

What is alt text?

Alt text (alt attribute) is an <img> tag that describes the content of an image in words: <img src="..." alt="...">. When the image cannot be loaded (due to a slow connection or a broken file path), it is displayed in the browser instead, is read aloud by screen readers for visually impaired users, and helps search engines understand what the image is because Google does not “see” the image at the pixel level; it mostly relies on the surrounding text and the alt attribute.

Alt text serves a completely different purpose than the image’s filename (e.g., IMG_2031.jpg): the filename is for the server/file system, while alt text is for conveying meaning. The two should not be confused.

Alt text is also distinct from a caption that appears below the image: a caption is text visible to everyone on the page, while alt text is normally invisible and only appears when the image fails to load or is accessed by a screen reader. This distinction is often confused.

In some development environments, leaving the alt attribute blank may pass HTML validation, but this does not mean the alt text is actually meaningful; the validation tool only checks whether the attribute exists, not the quality of its content.

Why is this important?

Alt text is critical for both accessibility and visual SEO. When visually impaired users navigate a page using screen reader software, they learn the content of an image from its alt text; if this text is missing, the screen reader typically reads only “image” or the file name, resulting in a loss of information. In some countries, accessibility may also be a legal requirement.

Since search engines cannot directly “see” the content of images, they rely on alt text to rank the page in image search results (Google Images). On e-commerce sites, adding the correct alt text to product images can increase additional traffic from Google Images. Missing alt text negatively impacts both the user experience and image search traffic.

When an image loads slowly on a slow connection or fails to load at all, the alt text is the only source of information that helps the user understand what to expect in that area; this makes alt text important not only for SEO but also for overall usability.

How to fix it?

• Write a short, descriptive alt text for every meaningful image.
• For images used solely for decorative purposes (e.g., background decorations), alt="" so that screen readers skip the image; this is different from not adding the alt attribute at all.
• Use keywords only if they truly describe the image and fit naturally.
• Keep the alt text short and clear; avoid unnecessarily long sentences—a few words are usually enough.
• For product images, specify the product name and key features (such as color, model, or angle).
• If you’re doing a bulk upload in your content management system, create the alt text manually whenever possible—or at least use a meaningful template based on the product name—rather than letting it fill in automatically.
• For complex images, such as infographics or tables, consider providing details that don’t fit in the alt text as plain text immediately below the image.

Example

<img src="red-sport-shoes.jpg" alt="Red men's sneakers, side view">

Bad example: <img src="IMG_2031.jpg" alt="image"> — Neither the file name nor the alt text provides any information about the image’s content. Another bad example: alt="shoes shoes sneakers cheap shoes discounted shoes buy shoes" — This is intended to stuff the image with keywords rather than describe a single image, creating a meaningless and tedious experience for screen reader users.

Common Mistakes

• Leaving the alt attribute completely blank (for non-decorative images).
• Using meaningless filenames like "image1.jpg" or "IMG_2023" as alt text.
• Stuffing the alt text with a string of keywords (e.g., “shoes, sneakers, cheap shoes, discounted shoes”).
• Repeating the same generic alt text for all images.
• The Seoraporu.co report lists every missing alt text entry individually; on large websites, this is typically an issue that needs to be corrected in bulk within the product/image management template.