Images are usually the heaviest part of a page and the worst maintained. They get uploaded once, straight from the camera or from the photographer, and nobody looks at them again. That is a shame, because two things sit here at the same time: the fastest speed win available to you, and a piece of accessibility that carries more legal weight every year.
This article covers the three things a report measures on your images: the alt text, the declared dimensions and the way the file is delivered. You will find them in the report under “Images”.
Alt text: what is there when the photo is not
Alt text is a short description you attach to an image: <img src="roof.jpg" alt="Roofer laying new tiles on a terraced house">. It is meant for three groups.
For blind and partially sighted visitors first of all. Their screen reader reads the alt text instead of showing the photo. With nothing there, the visitor hears “image” or, worse, the filename: “I M G underscore 4 7 2 1 dot J P G”.
For Google second. In its own documentation on images Google calls alt text a short but descriptive piece of text explaining the relationship between the image and your content, and calls writing it quite important. It is also what gets you into Google Images, which for visual trades brings real traffic.
And third, for any visitor whose image fails to load: slow connection, broken link, blocked CDN.
How to write alt text that works
Describe what is visible, in plain words, as if explaining it to someone over the phone. “Roofer laying new tiles on a terraced house” is good. “roofer, roof repair, roof tiles, Etten-Leur, North Brabant” is a row of keywords that reads as nonsense to a screen reader and that Google has recognised as spam for years.
Keep it short, a line or two. Do not start with “image of” or “photo of”: the screen reader has already said it is an image.
There is one case where empty alt text is the right answer: purely decorative images. A divider, a background shape, an icon next to text that already says the same thing. Give those alt="", exactly that, empty. The screen reader then skips it, which here is the kindest outcome. Leaving the attribute out entirely does something else: then the screen reader starts guessing.
If an image sits inside a link with no other text, the reverse applies: the alt text is the link text and it has to describe the destination.
Width and height: the cheapest speed win there is
Give every image a width and a height in the HTML. Not to set its size on screen, that is your CSS, but to pass on the aspect ratio. The browser can then reserve the space before the file has arrived.
Without those numbers the browser only learns how big the photo is once it is in. Until then the slot is zero pixels tall, and the moment the photo arrives everything below it shifts down. That is the main cause of layout shift, and layout shift is one of the three Core Web Vitals Google measures on. There is more on that in the article on Core Web Vitals.
The nice part is that this is not a design decision and involves no trade-off. Two attributes per image, and the page holds still while it loads.
The file itself
This is nearly always where the biggest win sits, and where the least gets done. Three things.
The format. JPEG and PNG are old formats. At the same quality WebP delivers roughly a third fewer bytes, AVIF a little more again, and both are supported by every browser that still matters. On a WordPress site it is usually a matter of a plugin doing it automatically on upload.
The dimensions. A photo 4000 pixels wide displayed in an 800 pixel column ships five times more data than needed. The browser scales it down neatly, so you never see it, but your visitor pays for it in loading time. Store images at the size they are shown, with at most a second version for high resolution screens.
Lazy loading. With loading="lazy" the browser only fetches an image when it comes into view. For everything below the fold that is pure gain. Do not put it on your hero image: that one needs to arrive as early as possible, and lazy loading makes it slower.
And the filename
A small point with a small effect, but it costs nothing. replacing-roof-tiles-etten-leur.jpg tells Google something; IMG_4721.jpg does not. Rename them before uploading rather than after: once uploaded, the old name is already in your pages.
What you can do today
- Open your homepage, right click your largest photo and check its properties for how many kilobytes it weighs.
- Go through the images on your three most important pages and give them alt text describing what they show.
- Give decorative images a deliberate
alt=""rather than leaving the attribute out. - Check that your images carry a width and height in the HTML.
- Switch on automatic conversion to WebP in your CMS or at your host.
Want all of this checked in one go? The free SEO check runs through these points and names the images that are missing something.
