The img Element: src and alt

The img element embeds an image in the page. Its src attribute identifies the resource, while alt provides a text alternative when the image cannot be seen or loaded.

<img src="images/field-notes.jpg"
     alt="A notebook open beside a hiking map">

Write alternative text based on the role of the image in that context. If the image communicates information that is not available nearby, describe that information. Do not start every description with “Image of”; screen readers already identify the element as an image.

An image used only for decoration should generally have an empty alternative (alt=""). That tells assistive technology it can be skipped. Omitting alt is not the same as providing an empty alternative: without the attribute, a screen reader may announce the file name or another unhelpful value.

If an image is a link, the alternative should describe the link’s purpose. If a chart contains important data, provide the data or a detailed explanation in the surrounding content instead of expecting a short alt value to carry everything. Providing width and height also helps the browser reserve layout space before the file loads.