Images and alternative text

Alternative text replaces purpose, not pixels

Describe the information or function the image contributes. If nearby text already communicates everything and the image is decorative, use an empty alt value.

<img
  src="trail-map.webp"
  width="1200"
  height="800"
  alt="Map showing the accessible loop from the visitor center to Lake Point"
/>

Explicit dimensions let the browser reserve the correct aspect ratio before the file arrives. CSS can still make the image responsive.

img {
  max-width: 100%;
  height: auto;
}

Common mistakes

• Repeating “image of” when the role is already announced.
• Stuffing keywords into alt.
• Using a filename as alternative text.
• Omitting dimensions and causing content to jump.

How browsers actually behave

An image request starts after the parser discovers img or responsive source information. The browser reserves layout space from width and height by deriving an aspect ratio, while CSS can still make the rendered image fluid. Without that information, surrounding content may shift when intrinsic dimensions arrive.

With srcset and sizes, the browser chooses a candidate based on the rendered slot, device pixel density, network conditions, and supported format. Authors describe candidates and layout intent; they should not assume a particular file will always be selected. picture is for art direction or format alternatives, not a requirement for every responsive image.

Decisions and trade-offs

Use an ordinary img when one composition works at all sizes. Use srcset for resolution choices and picture when the crop or content must change. Lazy-load images below the initial viewport, but do not lazy-load the likely largest above-the-fold image without measuring the effect.

Alternative text depends on purpose. A linked logo may need the destination name, a product photograph may need distinguishing information, and a decorative flourish needs an empty alternative. Do not outsource that decision to filename recognition or generic image generation.

Accessibility consequences

When an image contains essential text, reproduce the information as real text where it can resize, reflow, translate, and adapt to contrast preferences. Complex diagrams need nearby explanation or data in addition to a short name. The alternative should replace the image's contribution, not inventory pixels.

Images used as controls must expose the action or destination, not merely what the icon resembles. Test with images disabled and with a screen reader so both missing-file behavior and accessible naming are visible.

Failure diagnosis and fixes

• Content jumps during load. Intrinsic dimensions are missing or wrong. Add accurate dimensions and keep responsive CSS.
• A mobile device downloads the largest source. sizes does not match the layout. Inspect the chosen candidate and describe the actual slot.
• The same words are announced twice. The caption and alt duplicate one another. Make the alternative concise or empty when nearby text is complete.
• A crop hides the subject. One composition is being forced everywhere. Add deliberate art-direction sources and test each breakpoint.

Verify it

Inspect the Network panel at several viewport widths and device densities. Confirm the chosen resource is appropriately sized and the aspect-ratio box is present before load. Disable images, throttle the connection, and run a screen-reader pass. Check at 320 CSS pixels and 200% zoom for overflow or cropping. Measure layout shift rather than trusting appearance on a warm cache, and verify every source URL returns the expected content type.

Exercise and next step

Choose one informative and one decorative image. Write the text a person would need if neither image loaded, then decide which image needs that text. Next, organize related items with list semantics instead of visual line breaks.

Boundary of this lesson

Correct markup cannot make an inaccurate, unlicensed, or unnecessarily large asset appropriate. Confirm permission, factual context, crop, and compression before publishing. Automated alternative-text suggestions can help start an inventory, but only a person who understands the page can decide what the image contributes. Revisit that decision when surrounding copy or the asset changes; an alternative that was once sufficient can become redundant or misleading even while every validator continues to pass.

Practice with competing constraints

Prepare one photograph for a narrow card and a wide feature area. Measure dimensions, encoded bytes, selected responsive candidate, and layout shift on a cold load. Then hide the images and review the alternatives in context. Optimize until the wide view is sharp without forcing the narrow view to download unnecessary pixels, and until neither crop changes the factual meaning described by the surrounding text.

Test once more with the image request blocked and with the filename changed. The page should keep its dimensions, expose the intended alternative, and avoid leaving an unexplained empty control or link. Record both the selected candidate and transferred bytes so future visual changes do not quietly reverse the delivery improvement.