What is the purpose of the alt attribute in images

alt provides a text alternative for an image: it's read by screen readers, shown if the image fails to load, used by search engines, and helps when images are disabled. Write it to convey the image's purpose/content; use empty alt="" for purely decorative images.

4 min read·~5 min to think through

The alt attribute on <img> is a text alternative — what the image means or does, in words. It serves several audiences:

What alt is for

Accessibility (the primary reason) — screen readers announce the alt text. A blind user "sees" the image through it. Without alt, a screen reader may read the file name or just say "image" — useless.
Image fails to load — broken link, slow network, blocked — the browser shows the alt text in place of the image.
SEO — search engines can't see pixels; alt tells them what the image is, helping image search and page context.
Images disabled / text-only contexts — the alt stands in.

How to write good alt text

The rule: convey the image's purpose and content in context, not "describe every pixel."

Informative image — describe what it shows: alt="Bar chart showing 2024 revenue up 30%".
Functional image (a linked image, an icon button) — describe the action/destination, not the picture: a logo linking home → alt="Acme home"; a magnifier icon button → alt="Search".
Decorative image — purely visual, adds no information (a divider, a background flourish) → alt="" (empty, but present). This tells screen readers to skip it. Omitting alt entirely is different and worse — some screen readers then read the file name.
Don't start with "image of…" — the screen reader already announces it's an image.
Be concise but complete; don't keyword-stuff for SEO.
Complex images (detailed charts/diagrams) — short alt + a longer description nearby or via aria-describedby.

The key nuances

alt="" (decorative) vs missing alt — empty-but-present = "intentionally skip"; missing = ambiguous/bad. Always include the attribute.
Context matters — the same image needs different alt depending on what it's doing on the page.
CSS background images have no alt — if an image conveys meaning, it should be an <img> with alt, not a background.

How to answer

"alt is the text alternative for an image — primarily for screen reader users, but also shown if the image fails to load and used by search engines. Good alt conveys the image's purpose in context: describe content for informative images, describe the action for functional ones, and use empty alt="" for purely decorative images so screen readers skip them. The attribute should always be present — empty-but-present is intentional; missing is a bug."

Follow-up questions

•What's the difference between alt="" and omitting alt entirely?
•How does alt text differ for a decorative vs functional vs informative image?
•Why shouldn't alt text start with 'image of'?
•How do you provide a text alternative for a CSS background image?

Common mistakes

•Omitting alt entirely instead of using alt="" for decorative images.
•Describing the picture instead of the action for functional/linked images.
•Keyword-stuffing alt for SEO.
•Starting with 'image of' / 'picture of'.
•Putting meaningful images in CSS backgrounds where they have no alt.

Performance considerations

Edge cases

•Complex charts/diagrams needing a longer description.
•The same image used informatively in one place and decoratively in another.
•Icon-only buttons relying on alt for their accessible name.
•Images of text (avoid; if unavoidable, alt must contain the text).

Real-world examples

•alt="Search" on a magnifier icon button; alt="" on a decorative divider; alt describing a data chart's takeaway.

Senior engineer discussion

Seniors frame alt by audience (screen readers first, then load-failure and SEO) and stress that good alt is context-dependent — informative vs functional vs decorative each need different text. The senior nuance is the empty-but-present alt="" for decorative images vs the bug of omitting it, and handling complex images with a longer description.