You published the page, then noticed an empty field next to each image: "alt text." You know it matters, but it isn't obvious what to actually type. A hero photo, a product shot, and a faint background pattern clearly shouldn't get the same words, yet most builders give you one identical box for all of them.
This guide shows you what to write, line by line, with before-and-after examples for the image types you'll meet on a real website. It also covers the one case that surprises people: when leaving the box empty is the correct answer. If you want the bigger picture on images first, this sits under the beginner's guide to using images on your website.
What alt text is really for
Alt text is the short written description a screen reader announces when it reaches an image. A person who can't see the screen, or whose image failed to load, hears (or reads) your alt text in place of the picture. That is the primary job: to give someone the same information the image carries, in words.
Search engines also read alt text, and writing it well is a reasonable part of how images get understood and surfaced. But treat that as a side benefit. If you write alt text for a human who can't see the image, you'll naturally produce text that works for everything else too. Write it for a search engine first and you tend to get keyword soup that helps no one and reads badly out loud.
So the order is simple: describe the image honestly and usefully for a person, and let the secondary benefits follow. Accessibility is the reason; discoverability is the bonus, not a ranking trick.
How to describe an image in one good sentence
A useful alt description answers a quick question: if this image vanished, what would the reader miss? Write that, in plain language, as one short sentence.
A few rules that keep you on track:
- Convey the meaning, not every pixel. You're summarizing what the image communicates in context, not narrating a forensic inventory.
- Keep it short. A sentence is usually plenty. Long descriptions are tiring to hear read aloud.
- Don't start with "image of" or "picture of." A screen reader already announces that it's an image. Adding "image of" makes it say "image, image of…"
- Match the context. The same photo can need different alt text on different pages, because what matters about it changes.
- Be honest about AI images. Picdrome images are AI-generated. Describe what's shown plainly, and never write alt text that turns a generated person into a named, real individual (more on that below).
That last point is worth slowing down on. If the image is a generated portrait, your alt text should describe a person in a scene, not assert who they are. "A smiling person at a laptop in a bright office" is honest. "Sarah, our head of support" is not, because there is no Sarah; the face was generated. For more on handling synthetic imagery cleanly, see how AI image disclosure works.
When empty alt text is the right choice
Here's the part most guides skip. Some images carry no information. They're decoration: a soft gradient behind a section, a faint texture, a swoosh, a background photo that's purely atmospheric and sits under text that already says everything.
For a genuinely decorative image, the right alt text is an empty alt attribute (alt=""). That isn't laziness. It's a deliberate signal that tells a screen reader to skip the image entirely, so the listener isn't interrupted by a description of something that adds nothing. Leaving the field blank (which most builders turn into alt="") is correct here.
The test is a single question: does this image add meaning a reader would miss, or is it there for mood? If it's mood, skip it. If it carries information, describe it. When you're genuinely unsure, lean toward a short honest description rather than hiding something meaningful.
| Situation | What to put in the alt field |
|---|---|
| Decorative background, pattern, or texture under existing text | Leave empty (alt="") so it's skipped |
| Hero image that sets the page's subject | One short sentence describing the scene/subject |
| Product image | What the product is, plus a key detail that matters to the buyer |
| Informative image (chart, diagram, screenshot with data) | The actual information the image conveys |
| Image that is also a link or button | Where the link goes / what the button does |
| Logo in the header | The business name (e.g. alt="Picdrome") |
Before and after: real website images
These examples use the kinds of images you'd place from a structured library. The "starting point" line is roughly what an image's stored description might say. The "in context" line is what you should actually type once you know where the image sits on the page.
A hero image
A wide AI-generated photo of a workspace at the top of a homepage for a bookkeeping service.
- Too vague:
alt="image" - Keyword-stuffed:
alt="bookkeeping accountant tax small business finance services near me best" - Starting point (from metadata):
alt="A tidy desk with a laptop, notebook, and coffee in morning light" - In context (better):
alt="A calm home office where a bookkeeper works on a laptop"
The improved version ties the generic scene to what the page is about, without stuffing. It describes the subject a sighted reader sees and a screen-reader user should get.
A product image
A photo on a shop page showing a ceramic mug.
- Too vague:
alt="product" - Over-described:
alt="A photograph of a glossy off-white ceramic coffee mug with a curved handle sitting at a slight angle on a wooden surface with soft shadows falling to the right" - Better:
alt="Matte white ceramic mug with a wide handle, 12 oz"
For products, lead with what it is, then the detail a buyer cares about (color, size, material). Skip the photography notes; nobody shopping needs "soft shadows falling to the right."
A decorative background
A faint geometric pattern sitting behind a section heading and paragraph that already explain everything.
- Wrong:
alt="abstract background pattern decoration design texture" - Right:
alt=""(empty, so a screen reader skips it)
Because the text beside it already carries the meaning, describing the pattern would just add noise. Empty is the accessible choice.
An informative image
A simple AI-generated illustration that shows three website sections stacked (hero, features, footer) to explain page layout.
- Vague:
alt="diagram" - Better:
alt="A web page layout split into three sections: hero at top, features in the middle, footer at the bottom"
When an image carries actual information, your alt text has to carry that same information. If a chart shows a trend or a diagram shows a structure, describe the point, not just "chart." If the data is complex, put the full detail in nearby visible text and keep the alt text to a short summary.
What to avoid
A few habits quietly make alt text worse:
- "Image of…" / "Photo of…" Redundant. Start with the subject.
- Keyword stuffing. Cramming search terms in makes the description painful to hear and helps nothing. Write for the listener.
- Over-describing. You don't need lighting, camera angle, or every background object. Capture the meaning and stop.
- Filenames as alt text.
alt="IMG_4821.jpg"tells a listener nothing. - Inventing identities. Don't turn a generated face into a real, named person. Keep it to "a person doing X."
- Treating every image the same. A decorative texture and an informative diagram need opposite treatment.
These overlap with the broader patterns covered in the image mistakes that quietly hurt a site, which is worth a read once you've got alt text handled.
Adapting a starting description to your page
A library image often comes with a stored description of what's in the frame. That's a head start, not a finished answer. The stored text describes the image; your alt text describes the image on this page, in this spot.
So adapt it:
- Read the stored description to see what's actually in the image.
- Ask what the image is doing here — is it the hero subject, a product, a link, or just decoration?
- Rewrite to fit that role, keeping it to one honest sentence (or empty, if decorative).
- Strip the noise — remove "image of," photography detail, and any keywords you were tempted to add.
- Read it out loud. If it sounds clear and natural spoken, it'll work for a screen reader.
The same photo of a person at a laptop might be alt="A freelancer reviewing a project on a laptop" on an about page, a link's destination on a navigation thumbnail, or alt="" if it's a faded background behind a headline. The picture didn't change; its job did.
Speeding up a batch? If you've got a folder of images to caption, work from the examples above rather than a blank box: write the subject, then the one thing the image is doing on the page, then stop. You still make the final call on context.
A note on accessibility standards
Alt text is one piece of making a site usable for everyone, alongside color contrast, readable text over images, and clear structure. W3C's image accessibility tutorial explains how purpose and context determine whether an image needs informative alt text, functional text, or an empty alt attribute. This guide gives practical habits, not a conformance audit.
That distinction matters: whether a specific image or page meets a given standard depends on your final implementation — the markup your builder produces, the surrounding text, the contrast, and more. So we won't tell you an image is "WCAG compliant," because that depends on the whole page, not the alt attribute alone. This is general information, not professional accessibility advice; for anything you need to certify, have it reviewed by an accessibility specialist. For the wider topic, see our guide on making sure everyone can use your site.
In Plain English
Alt text is the short description a screen reader reads aloud in place of an image, and it's the main reason the field exists; search visibility is a minor bonus, not a ranking lever. It helps anyone who can't see your images — and it helps you, by making you describe each picture honestly. Use it on every meaningful image: write one plain sentence about what the image shows in its on-page context. For purely decorative images that add no information, leave the box empty so it gets skipped. Skip "image of," skip keyword stuffing, and for AI-generated images, never name a generated face as a real person. Your next step: walk your published pages, fill in (or deliberately empty) each alt field using the examples above, and keep the accessibility guide open for the images where the right answer is an empty alt attribute.
Common Questions
Is alt text different for a hero image and a decorative background?
Yes. A hero image sets the page's subject, so it gets a short descriptive sentence. A purely decorative background gets an empty alt attribute (alt="") so a screen reader skips it. The deciding question is whether the image adds meaning or just atmosphere.
How long should alt text be?
Usually one short sentence. Long enough to convey what matters, short enough to be comfortable read aloud. If an image carries detailed data, keep the alt text to a summary and put the full detail in nearby visible text.
What do I write for an AI-generated photo of a person?
Describe the scene honestly — "a person working at a laptop in a bright office" — without claiming who they are. Don't turn a generated face into a named customer or team member. See how AI image disclosure works for more on handling synthetic imagery.
Does good alt text improve my search rankings?
Don't write it for that. Clear, accurate alt text can help search engines understand your images, but it's not a ranking trick and we won't promise traffic from it. Write it for a person who can't see the image, and any secondary benefit takes care of itself.