Alt text (alternative text) is an HTML attribute added to image tags that describes the content and function of an image. Screen readers read it aloud for visually impaired users, and search engines use it to understand image context.

How long should alt text be?

Alt text should be concise — ideally under 125 characters. Screen readers often stop reading after 125 characters. Focus on the most important details and skip filler words like 'image of' or 'picture of'.

Should decorative images have alt text?

Decorative images that add no informational value should use an empty alt attribute (alt='') so screen readers skip them entirely. Never omit the alt attribute completely — that causes screen readers to read the filename instead.

Does alt text help SEO?

Yes. Google uses alt text to understand image content, which helps images appear in Google Image Search. Including relevant keywords naturally in your alt text can improve both image and page rankings.

What is the difference between alt text and title attribute?

Alt text (alt='') replaces the image when it can't be displayed and is read by screen readers. The title attribute shows a tooltip on hover but is NOT read consistently by screen readers and should not replace alt text.

Alt Text Best Practices: The Complete 2025 Guide for Images

1B+

People worldwide with a visual disability

125

Max characters before screen readers cut off

~55%

Of web images lack any alt text (WebAIM, 2024)

1. What Is Alt Text (and Why It Matters)

Alt text — short for alternative text — is the HTML alt attribute on an <img> tag. It's a text description of an image that serves three critical purposes:

Accessibility: Screen readers (used by blind and low-vision users) read alt text aloud in place of the image.
SEO: Search engine crawlers can't "see" images. Alt text tells Google what your image shows, helping it rank in Google Image Search.
Fallback display: When an image fails to load, the browser shows alt text in its place.

<!-- The alt attribute goes inside the img tag -->
<img
  src="golden-retriever-puppy.jpg"
  alt="Golden retriever puppy playing with a red ball on green grass"
/>
  

Despite being one of the simplest HTML attributes, alt text is consistently one of the most misused — or completely forgotten. A 2024 WebAIM accessibility audit found that roughly 55% of images on the top 1,000,000 websites had no alt text at all. This is both an accessibility failure and a missed SEO opportunity.

💡 Quick Note

The HTML attribute is spelled alt, not alt-text. "Alt text" is just the informal name used when talking about it. Don't add a hyphen in your code: alt="Your description here".

2. The 7 Golden Rules of Alt Text

Before diving into specific image types, here are the universal rules that apply to every image on every website:

✓
Be specific and descriptive. Describe what the image actually shows. "Man in a red jacket standing on a mountain summit with clouds below" beats "man outdoors" every time.
✓
Keep it under 125 characters. Most screen readers cut off at 125 characters. Aim for the sweet spot: enough detail to be useful, short enough to be absorbed quickly.
✓
Skip "image of" and "picture of." Screen readers already announce that it's an image. Starting with "image of a dog" is redundant — just say "dog."
✓
Include relevant keywords naturally. If your image shows a JPEG-to-PNG converter tool, say that. Don't stuff keywords artificially — write for humans first.
✓
Match the context. Alt text should make sense within the surrounding content. A product image on an e-commerce page needs different alt text than the same image in a blog post about photography.
✓
Use empty alt for decorative images. Images that are purely decorative should have alt="" so screen readers skip them. Never omit the alt attribute entirely.
✓
Don't duplicate surrounding text. If the caption or nearby text already fully describes the image, write a shorter alt text or use alt="" to avoid repetition for screen reader users.

3. Alt Text by Image Type — With Examples

Different types of images call for different alt text strategies. Here's exactly how to handle each one.

Product Images

For product images, include the product name, key attributes, and color/variant where visible. Think about what a customer would want to know if they couldn't see the image.

✗ Bad

alt="shoes"

No brand, no color, no type — completely useless.

✗ Also Bad

alt="image of nike shoes product photo"

Starts with "image of", and "product photo" is filler noise.

✓ Good

alt="Nike Air Max 270 in white and volt yellow, side view"

Brand, model, colors, and angle — exactly what a shopper needs.

✓ Also Good

alt="Nike Air Max 270 – volt yellow colorway"

Shorter version that still captures the essential details.

Informational Images (Charts, Graphs, Diagrams)

These require your most detailed alt text. Describe both what the chart shows AND its key takeaway — what conclusion a sighted person would draw from it.

✗ Bad

alt="bar chart"

What data? What does it show? Tells us nothing.

✓ Good

alt="Bar chart showing website traffic growth from 10K to 85K monthly visitors between January and December 2024"

Includes the subject, data range, and timeframe.

💡 Pro Tip — Complex Charts

For very complex charts or infographics, use alt for a brief summary and provide a full text description in the page content or a linked table. Alt text has a 125-character sweet spot — don't try to cram an entire dataset into it.

People and Portraits

Context determines the right approach. On a company team page, include the person's name and role. On a stock photo illustrating an article, describe what the person is doing.

✗ Bad (Team Page)

alt="person"

Completely anonymous — defeats the purpose.

✓ Good (Team Page)

alt="Sarah Chen, Head of Product at IMGVO"

Name + role = exactly what a team page visitor needs.

✗ Bad (Stock Photo)

alt="woman"

No context about what she's doing or why it's relevant.

✓ Good (Stock Photo)

alt="Woman reviewing compressed image files on a laptop screen"

Connects the image to the surrounding content topic.

Logos and Icons

For logos, use the company or brand name. For functional icons (buttons, navigation), describe the action. For purely decorative icons, use alt="".

✓ Logo

alt="IMGVO logo"

Simple, clean. The word "logo" is fine here.

✓ Functional Icon

alt="Download compressed image"

Describes the action the icon triggers, not the icon itself.

✗ Bad Icon Alt

alt="arrow icon"

"Arrow icon" describes the visual, not what it does.

✓ Decorative Icon

alt=""

Empty alt tells screen readers to skip a purely decorative icon.

Screenshots and UI Images

Describe both what the interface looks like and what it demonstrates in context.

✗ Bad

alt="screenshot"

Which software? What is it showing?

✓ Good

alt="IMGVO upload interface showing drag-and-drop zone with file size limit of 20MB"

Names the app, describes the UI element, notes the key info shown.

Linked Images (Images Inside Links)

When an image is wrapped in an anchor tag, the alt text must describe the link's destination — not just the image.

✗ Bad

alt="arrow"

Clicking this takes you somewhere — where?

✓ Good

alt="Go to IMGVO image compression tool"

Tells the user where the link goes before they click.

4. Alt Text for SEO: What Actually Works in 2025

Google's John Mueller has confirmed that alt text is one of the main ways Google understands images. Here's what the evidence shows about alt text and SEO:

How Google Uses Alt Text

Google uses alt text to determine what an image shows and whether to serve it in Google Image Search results.
Alt text is one signal among many — surrounding text, page title, and structured data also contribute.
Google can now partially "see" images using computer vision, but text-based signals like alt text still improve accuracy and ranking.
Pages where images have descriptive alt text tend to get more organic image traffic than pages with missing or generic alt text.

Keyword Strategy for Alt Text

✓ Do This

Include your target keyword naturally if the image genuinely shows what the keyword describes. Example: if you're targeting "JPEG to PNG converter" and your screenshot shows that exact tool, write: alt="JPEG to PNG converter tool with drag-and-drop upload interface".

✗ Don't Do This

Don't keyword-stuff. alt="image compression compress images compress jpeg compress png image compressor tool" is spam and can actively hurt your SEO. Google's guidelines explicitly call this out.

The 1 Image, 1 Keyword Rule

Each image should target at most one keyword variation. Spread different relevant keywords across multiple images on the same page rather than piling them into a single alt text. This feels more natural to both algorithms and humans.

Alt Text vs. Image Filename

Your image filename also matters for SEO — Google reads it too. Use descriptive filenames separated by hyphens, not underscores.

Signal	Impact on SEO	Notes
Alt text	High	Primary text signal for image content
Image filename	Medium	Use hyphens, be descriptive
Surrounding text	Medium	Paragraph text near image provides context
Image caption	Medium	Often the first text users read
Page title / H1	Medium	Overall page relevance signal
Image title attribute	Low	Not reliably read by assistive tech; minor SEO value

5. 10 Common Alt Text Mistakes to Avoid

Most alt text problems fall into a small number of patterns. Here are the ones you'll encounter most — and how to fix them.

Omitting alt text entirely.
<img src="photo.jpg"> — No alt attribute at all causes screen readers to read the filename (e.g., "photo-DSC-0031.jpg"). Always include an alt attribute, even if empty.
Starting with "image of" or "photo of."
Screen readers announce "graphic" or "image" before reading alt text. Adding "image of" is pure repetition. Just start with the subject.
One-word descriptions.
alt="dog" tells you almost nothing. What kind? What's it doing? What's the context? Aim for at least a short phrase.
Keyword stuffing.
Writing alt text purely for SEO with no regard for the actual image content is a violation of Google's guidelines and actively hurts accessibility.
Using the filename as alt text.
alt="IMG_4872.jpg" or alt="compress-image-tool-v2-final.png" is meaningless to both users and search engines.
Duplicate alt text across multiple images.
If you have a product with 5 images from different angles, each one needs unique alt text describing what angle or detail is shown.
Missing alt text on icon-only buttons.
A search button with only a magnifying glass icon and no alt text is completely inaccessible. Use aria-label or alt to describe the action.
Adding alt text to CSS background images.
CSS background-image properties have no alt attribute. If an image is content (not decoration), it should be in the HTML as an <img> tag.
Over-describing decorative images.
A purely decorative divider or background texture doesn't need a paragraph of description. Use alt="" and move on.
Copying the image caption as alt text.
If your image has a visible caption, don't repeat it verbatim in the alt text — screen reader users would hear the same description twice.

6. Decorative Images: When to Leave Alt Text Empty

Not every image needs a description. Some images add visual polish without conveying any information. For these, using an empty alt attribute is not just acceptable — it's the correct accessibility practice.

When to Use `alt=""`

Image Type	Use Empty Alt?	Example
Decorative divider or spacer	Yes	A horizontal wavy line between sections
Background texture or pattern	Yes	A subtle noise texture on a card background
Purely aesthetic icon next to labeled text	Yes	A star icon next to the word "Rating"
Image already fully described by adjacent caption	Yes	Product image with a detailed visible caption below
Abstract background decoration	Yes	Gradient blob shapes in the hero section
Logo (standalone)	No	Should have `alt="Brand Name logo"`
Product image	No	Always needs a full description
Icon inside a link with no text label	No	Must describe the link destination
Complex icon that represents a concept	Context	Depends on whether surrounding text already explains it

⚠ Critical Distinction

There's a big difference between alt="" (empty string — correct for decorative images) and a missing alt attribute entirely (incorrect — causes screen readers to announce the filename). Always write alt="", never just skip the attribute.

7. Tools to Audit and Improve Your Alt Text

Manual review only gets you so far. These tools help you find and fix alt text issues at scale:

Accessibility Audit Tools

WAVE (wave.webaim.org): Runs a free in-browser accessibility report. Red "missing alt" errors show immediately. One of the fastest ways to spot missing or empty alt text.
axe DevTools: Chrome and Firefox browser extension that flags WCAG violations including alt text issues. Shows exactly which images have problems and what to fix.
Lighthouse (in Chrome DevTools): Google's built-in auditing tool includes an accessibility score and flags images without alt text.

SEO Tools That Check Alt Text

Screaming Frog SEO Spider: Crawls your entire site and reports images with missing or duplicate alt text in a spreadsheet export. Invaluable for large sites.
Google Search Console → Performance → Search Type: Image: Shows which of your images are appearing in Google Image Search and driving clicks — a proxy for alt text quality.
Ahrefs / Semrush Site Audit: Both tools include alt text checks in their site audit modules.

Browser Developer Tools

The simplest audit: open Chrome DevTools, go to Elements, and click any image. Look at its alt attribute. For a quick full-page scan, open the Console and run:

// Find all images missing alt text on the current page
document.querySelectorAll('img:not([alt])')
  .forEach(img => console.log('Missing alt:', img.src));

// Find all images with empty alt (decorative or incorrectly empty)
document.querySelectorAll('img[alt=""]')
  .forEach(img => console.log('Empty alt:', img.src));
  

8. Frequently Asked Questions

Alt text (alternative text) is an HTML attribute added to <img> tags that describes the content and function of an image. Screen readers read it aloud for visually impaired users, search engines use it to understand image context, and browsers display it when an image fails to load.
Aim for under 125 characters — that's where most screen readers cut off. Focus on the most important details first. Skip filler phrases like "image of" or "picture showing." For complex charts or infographics, provide a brief alt text summary and include a full description elsewhere on the page.
Decorative images that add no informational value should use an empty alt attribute: alt="". This explicitly tells screen readers to skip the image entirely. Never omit the alt attribute completely — that causes screen readers to announce the image filename, which is disruptive.
Yes. Google uses alt text as a primary signal to understand image content, which determines whether your images appear in Google Image Search. Including relevant keywords naturally in alt text can improve both image rankings and overall page relevance. However, keyword-stuffing alt text violates Google's guidelines and can hurt rather than help.
The alt attribute replaces the image when it can't be displayed and is reliably read by all screen readers. The title attribute shows a tooltip on hover but is NOT consistently read by screen readers and should not replace alt text. Focus on getting alt right; title is optional and rarely adds value for images.
Every <img> tag must have an alt attribute — that's a hard WCAG requirement. However, the value of the alt attribute can be empty (alt="") for purely decorative images. The rule is: never skip the alt attribute; choose between a descriptive value and an empty string based on whether the image conveys information.
Treat AI-generated and stock images like any other image — describe what they visually show in context. For AI-generated images, you don't need to mention they're AI-generated unless that fact is relevant to the content. For stock photos used illustratively (e.g., a photo of a laptop next to a blog post about productivity), describe what the image shows and how it relates to the content.
In many jurisdictions, yes — for certain websites. In the United States, the ADA (Americans with Disabilities Act) has been interpreted by courts to require web accessibility for businesses open to the public, with WCAG 2.1 Level AA as the standard. The EU's Web Accessibility Directive mandates WCAG 2.1 AA for public sector sites. Many lawsuits have been filed and settled over inaccessible images, including missing alt text. Beyond legal risk, it's simply the right thing to do.

⚡

Next Step: Lazy Loading Images Guide Every image with good alt text also needs proper lazy loading. Full guide with native HTML, Intersection Observer, and React/Next.js code.

→

Related Guides

More resources to help you optimize your images for speed and search.

1. What Is Alt Text (and Why It Matters)

2. The 7 Golden Rules of Alt Text

3. Alt Text by Image Type — With Examples

Product Images

Informational Images (Charts, Graphs, Diagrams)

People and Portraits

Logos and Icons

Screenshots and UI Images

Linked Images (Images Inside Links)

4. Alt Text for SEO: What Actually Works in 2025

How Google Uses Alt Text

Keyword Strategy for Alt Text

The 1 Image, 1 Keyword Rule

Alt Text vs. Image Filename

5. 10 Common Alt Text Mistakes to Avoid

6. Decorative Images: When to Leave Alt Text Empty

When to Use alt=""

7. Tools to Audit and Improve Your Alt Text

Accessibility Audit Tools

SEO Tools That Check Alt Text

Browser Developer Tools

8. Frequently Asked Questions

Optimize Your Images Before Adding Alt Text

Related Guides

When to Use `alt=""`