HTML Images
An image can carry information, support a story, or simply decorate a page. Its alternative text should match that role rather than describe every visible detail automatically.
How it works
- Use src for the image URL and alt for an appropriate text alternative. Decorative images generally need alt="" so they do not add repetitive announcements.
- Set width and height to the image’s intrinsic dimensions to reserve its aspect ratio and reduce layout movement while it loads.
- Use responsive CSS such as max-width: 100%; height: auto. Lazy loading is useful for off-screen images, but avoid delaying an important above-the-fold image.
A practical example
<figure>
<img src="images/workshop-entrance.jpg"
alt="The workshop entrance beside the garden gate"
width="960" height="640">
<figcaption>Enter through the garden on Market Lane.</figcaption>
</figure>
Provide your own image file at that path. The alternative describes the useful location information; the caption adds directions for everyone.