A few attributes make images more accessible and faster.
alt text
alt describes the image for people who cannot see it and for when it fails to load. Describe what the image shows in the context of the page.
<img src="cat.jpg" alt="A grey cat asleep on a stack of books">Write what you would say if you described the picture over the phone. Keep it short. Do not start with “image of” or “picture of”.
If an image is purely decoration, use an empty alt. Screen readers will skip it.
<img src="divider.png" alt="">width and height
Setting the real size lets the browser reserve space before the image loads, so the page does not jump.
<img src="https://placehold.co/400x200" alt="A grey placeholder" width="400" height="200">Use CSS such as max-width: 100%; height: auto; so the image still shrinks on small screens.
loading
loading="lazy" tells the browser to wait to download an image until the visitor scrolls near it. Use it for images further down the page, not the main image at the top.
<img src="gallery-1.jpg" alt="Shelves of poetry books" width="600" height="400" loading="lazy">Leaving alt out
alt makes screen readers read the file name aloud. Always include the attribute. Use alt="" when there is nothing to say.Exercise: describe and size an image
Write an img for team.jpg showing three booksellers at a counter. It is 800 by 450 pixels and below the fold.
Show a possible solution
<img src="team.jpg" alt="Three booksellers smiling behind the shop counter" width="800" height="450" loading="lazy">