How to Write Alt Text for SEO and Accessibility (Examples)

What alt text actually does

Alt text is a short text description of an image. It lives in the alt attribute of an <img> tag. Two audiences read it.

The first is people who can’t see the image. Screen readers speak the alt text out loud. If a blind user lands on your product page, the alt text is the product photo for them.

The second is Google. Search bots can guess at images now, but they still rely on alt text as the trusted label. The alt text is how Google decides what the image is, whether it shows up in image search, and whether the surrounding page is about what you say it’s about.

Same text, two jobs. Write it well for the human, and the machine gets fed too.

The two cases: decorative vs informative

Every image on your page falls into one of two buckets. The bucket decides what the alt text should be.

Decorative images

A divider line. A pattern in the background. An icon next to a heading that already has text. A flourish that adds nothing to the meaning.

These images should have an empty alt: alt="". Not missing, empty.

<img src="/divider.svg" alt="" />

Empty alt tells the screen reader “skip this, it’s just decoration”. The user moves on without hearing “image, divider dot S V G”. That’s good. You saved them noise.

If you leave the alt attribute off entirely, screen readers panic. Some of them read the filename out loud. The user hears “image, D S C 0 4 8 2 7 dot J P G”. That’s bad.

So: decorative images get alt="". Always present, always empty.

Informative images

A product photo. A chart. A screenshot of a UI. A photo of a person in an article about that person. Anything that carries meaning the surrounding text doesn’t already cover.

These get a real description.

<img src="/team-maria.jpg" alt="Maria smiling at a coffee shop, laptop open" />

That’s it. No keyword stuffing, no filename, no “click here”.

How to write good alt text

Describe the content and the purpose, not the appearance. The goal is: if someone closed their eyes, what would they need to know about this image to follow the page?

Good:

• “Maria smiling at a coffee shop, laptop open”
• “Bar chart: Q3 revenue grew 18% over Q2”
• “Settings panel with the dark mode toggle highlighted”

Less good:

• “Photograph of a woman in a red shirt” (describes pixels, not meaning)
• “image1.jpg” (the filename, useless)
• “logo” (which logo, where, why)
• “click here” (this is a link, not a description)

Write what you’d tell a friend on the phone if they asked “what’s the picture?”. That’s the right voice.

Don’t stuff keywords

A common bad habit: cramming the alt text with every keyword you want to rank for.

<!-- bad -->
<img alt="best running shoes 2026 cheap running shoes buy running shoes online" />

Google sees this and treats it as spam. Worse, the screen reader user hears all of it. You’ve made the page harder to use and harder to rank, in one line.

One clear sentence beats six keywords. Always.

Width and height: the CLS thing

Set width and height on every <img>. This is non-negotiable for layout shift.

<img src="/photo.jpg" alt="..." width="800" height="600" />

When the browser sees the tag, it doesn’t have the image yet. If you don’t tell it the size, it reserves zero space, paints the page, and then the image arrives and shoves everything down by 600 pixels. The user clicks the wrong button. Cumulative Layout Shift goes up. Core Web Vitals drop. See Core Web Vitals and RUM for the bigger picture.

With width and height, the browser reserves the right slot before the image loads. The page paints once and stays put.

You don’t need to set the rendered size with these. CSS still controls how big it actually appears. The attributes give the browser the aspect ratio.

Modern image sizing

The basic <img src="..."> is fine for simple cases. For real responsive work, you have better tools.

srcset and sizes

srcset lets you ship a different file depending on the screen.

<img
  src="/photo-800.jpg"
  srcset="/photo-400.jpg 400w, /photo-800.jpg 800w, /photo-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw, 800px"
  alt="..."
  width="800"
  height="600"
/>

The browser picks the right file based on the device. A phone gets the 400 version. A retina laptop gets the 1600 version. You stop shipping desktop images to phones.

picture element with format fallbacks

<picture> lets you serve modern formats with a JPG/PNG fallback.

<picture>
  <source type="image/avif" srcset="/photo.avif" />
  <source type="image/webp" srcset="/photo.webp" />
  <img src="/photo.jpg" alt="..." width="800" height="600" />
</picture>

Browsers that support AVIF get AVIF. Browsers that don’t but support WebP get WebP. Old browsers fall back to JPG. See WebP vs PNG vs JPG for which format to pick.

Lazy loading

For images below the fold, add loading="lazy". The browser doesn’t fetch them until the user scrolls near. Faster first paint, less wasted bandwidth.

<img src="/photo.jpg" alt="..." width="800" height="600" loading="lazy" />

Don’t put loading="lazy" on your hero image or anything in the first viewport. That hurts Largest Contentful Paint. Lazy is for what’s offscreen.

File naming matters

Your filename is a small SEO signal and a useful debugging aid.

• team-photo-2024.jpg is searchable, descriptive, and survives a copy paste.
• IMG_5827.jpg is what your phone called it. Useless.

Rename before you upload. Use lowercase, hyphens, no spaces. The filename is also what Google sees in the URL of the image, so it’s worth a few seconds.

Common mistakes

A few patterns that show up over and over:

• Starting alt text with “image of” or “picture of”. Screen readers already announce it as an image. You’re saying “image, image of a cat”. Just write “a cat sleeping in a sunbeam”.
• Repeating the caption verbatim. If the caption under the image already says “Maria at the conference”, the alt text shouldn’t say the same thing. Either describe a different aspect or use alt="" and let the caption do the work.
• Leaving alt out entirely for decorative images. Write alt="". Empty is a real value. Missing is a bug.
• Putting important text inside the image as pixels. Logos and decorative text are fine, but if the image contains a paragraph of content, that content is invisible to screen readers and harder for Google to read. Put the text in the HTML.
• Using the same generic alt for every image: “photo”, “image”, “graphic”. Each image is different. Each alt should be different.

Accessibility and SEO are the same project

Good alt text helps a blind user navigate your site. The same alt text helps Google understand the page. Width and height help a user on a slow phone avoid layout jumps. The same attributes help your Core Web Vitals.

You’re not doing two jobs. You’re doing one job, and it pays off in two places. The same goes for semantic HTML and efficient code and security basics. Build for humans, and the bots come along for free.

Frequently asked questions