Images and alt text

img shows a picture from src and carries alt: the words that stand in for it when it cannot be seen. Width and height reserve its space before it loads.

Hone is a place to practise programming. This is one of its lessons, written out in full and free to read without an account.

What it is for

Alt text is how a blind reader, a broken connection and a search engine all understand a picture. The size attributes are why good pages do not jump as images arrive.

How to think about it

Ask what the image says. If it says something, put that in alt. If it is decoration, alt is empty, on purpose. Then give width and height so the layout is settled from the start.

Worked example

<img src="cat.jpg" alt="A grey cat asleep on a keyboard">

src is the file; alt says what it shows, in a short sentence.

<img src="divider.png" alt="">

Decorative: an empty alt tells screen readers to skip it. Empty is a choice; missing is a mistake.

<img src="chart.png" alt="Sales by month, rising" width="400" height="300">

Width and height reserve the space, so the text does not jump when the image loads.

Your turn

Describe the image for people who cannot see it.

<img src="team.jpg" ="The team at the summer picnic">

The trap

Stuffing alt with keywords or leaving it off. The reader hears the file name, 'IMG_2231.jpg', instead of what the picture shows.

Practise images and alt on HoneA question on it now, a coding challenge where there is one, and it is remembered for review. Free, no email needed.