Images
Images are one of the first things designers want to add to a page — and the <img> element makes it simple. Like a placed image in Figma, you point it at a source file and it appears.
But HTML images have one superpower that design tools do not have built in: alt text. This short description is what the browser uses when the image cannot be seen — by a screen reader user, or when the file fails to load. Writing good alt text is one of the fastest ways a designer can make a real difference for accessibility.
The img element
Section titled “The img element”<img> is a self-closing element — it has no text content to wrap, so there is no closing tag.
<img src="photo.jpg" alt="A designer sketching wireframes on paper" />Two attributes are essential:
src— the path to the image file (relative path or full URL).alt— a short text description of what the image shows.
Sizing images
Section titled “Sizing images”By default, an image renders at its natural pixel dimensions, which is often too large. You can constrain it with HTML attributes or (better) with CSS:
<!-- limit width, height scales automatically --><img src="photo.jpg" alt="..." width="400" />In CSS you will usually set max-width: 100% so images never overflow their container — the same idea as “fill” constraints in Figma.
When images fail or cannot be seen
Section titled “When images fail or cannot be seen”If an image fails to load (wrong path, slow connection) the browser shows the alt text instead. Screen readers for blind or low-vision users read the alt text aloud instead of describing pixels. Search engines read alt text to understand image content.
Try changing the alt text. Now imagine a user who cannot see the image — your alt text is their entire experience of it.