Alt text (alternative text) is a short description added to an image in HTML. It serves two critical purposes: it helps visually impaired users who rely on screen readers to understand what an image shows, and it gives search engines context about the image content. Writing good alt text is one of the simplest and highest-impact improvements you can make to both accessibility and image SEO on your website.
What Is Alt Text and Where Does It Go?
In HTML, alt text is the alt attribute on an img element:
<img src="golden-retriever.jpg" alt="Golden retriever puppy playing in autumn leaves">
The alt text is displayed in two situations:
- When the image fails to load (broken link, slow connection)
- When a screen reader reads the page aloud to a visually impaired user
Search engine crawlers (Googlebot, Bingbot) read alt text to understand what the image shows and use this to index images in Google Images and to understand the context of the surrounding content.
The Rules for Writing Good Alt Text
Follow these principles for every image on your site:
- Be specific and descriptive: "A white ceramic coffee mug with a green handle on a wooden table" is far better than "coffee mug" or just "image." Describe what the image actually shows.
- Keep it concise: Most screen readers announce alt text inline with surrounding content. Long alt text (over 125 characters) becomes disruptive to listen to. Aim for 1–2 sentences.
- Do not start with "Image of" or "Photo of": Screen readers already announce "image" before reading the alt text. Adding "image of" is redundant.
- Include keywords naturally: If the image shows your product, service, or topic, include the relevant keyword — but only if it genuinely describes the image. Do not stuff keywords that do not describe what the image shows.
- Match the function of the image: For a button that says "Search," the alt text should be "Search," not a description of the magnifying glass icon. Alt text describes function for interactive images.
When to Use Empty Alt Text
Some images are purely decorative — dividers, background textures, abstract shapes that add visual interest but convey no information. For these, use an empty alt attribute:
<img src="decorative-wave.svg" alt="">
An empty alt=""tells screen readers to skip the image entirely. If you omit the alt attribute altogether, some screen readers will read the filename instead (e.g., "decorative-wave-dot-svg"), which is disruptive. Always includealt="" for decorative images, never remove the attribute entirely.
Alt Text for SEO: What Google Actually Uses
Google has stated that alt text is one of the key signals it uses to understand image content. Here is what this means practically:
- Images without alt text are harder to rank in Google Images: Google cannot confidently determine what the image shows without the alt attribute.
- Alt text contributes to page relevance: A blog post about homemade bread with properly alt-texted bread photos reinforces the page's topical relevance to Google.
- Exact keyword match is not required: Natural descriptions that include relevant terms outperform forced keyword insertion. Write for humans first.
- Context matters: The alt text is read alongside the surrounding paragraph text. An image in an article about SEO with alt text "search engine optimization diagram" signals relevance even without the exact target keyword.
Common Alt Text Mistakes to Avoid
- Keyword stuffing:
alt="buy cheap blue widgets best price blue widget sale"is a spam signal. Google can detect keyword-stuffed alt text and it does not help rankings. - Using the filename as alt text:
alt="IMG_20240515_142833"is useless for both users and search engines. Always write meaningful descriptions. - Writing identical alt text for all images: Every image should have unique alt text that describes that specific image.
- Over-describing: A product photo does not need every color, texture, and shadow described. Summarize the key information.
Alt Text for Different Image Types
- Product photos: Include the product name, color, key feature. Example: "Red leather handbag with gold clasp and shoulder strap."
- Infographics: Describe the main finding or message of the infographic. Full data can go in a caption below the image.
- Charts and graphs: Describe the trend or key data point, not every value. Example: "Bar chart showing 40% increase in mobile traffic from 2022 to 2025."
- People and portraits: Describe the person if relevant (their role, what they are doing) or leave alt empty if purely decorative.
- Screenshots: Describe what the screenshot shows, especially the key UI element or action being demonstrated.
Optimizing Your Images Beyond Alt Text
Alt text is one piece of the image SEO puzzle. Complement it with properly optimized image files:
- Use descriptive filenames instead of generic ones (
homemade-sourdough-bread.jpgoverDSC_0019.jpg) - Compress images with Picovert's compressor to improve page speed, which is itself an SEO signal
- Resize images to the maximum size they will display — serving a 4000 px wide image in a 800 px container wastes bandwidth. Use the image resizerto match display dimensions.
- Remove EXIF metadata containing GPS data from images before publishing. Use Picovert's EXIF remover for privacy protection.
Good alt text combined with well-optimized images (correct size, compressed, descriptive filename) creates a complete image SEO signal that helps both users and search engines.