Images: the area where three topics hang together

What this is about

Images are the only area of a website where accessibility, loading time and search engine optimisation hang on the same adjusting screws. Five things are looked at:

The alt text — the text description for people who cannot see the image. The file size. The format. Stating width and height in the HTML. And whether an image is loaded lazily or at once.

Why it matters

Besides the file path, the alt text is the only mandatory element in the <img> tag (Rheinwerk, Barrierefreie Webseiten, ch. 7.3). Screen readers output it instead of the image. The guiding rule for it is: as short as possible, as long as necessary.

Two questions decide for every image: is it decorative or needed for understanding? And if it is needed — what information does it carry? A decorative image gets an empty alt attribute (alt=""). The difference matters: empty, but present. A missing alt attribute is something different from an empty one, and only the empty one says “there is nothing to read out here”.

For images that serve as a link or button, the alt text does not describe the image but the function: alt="To the contact form" is right, alt="Envelope icon" is not.

As a length, 100 to 125 characters is a good starting point (Rheinwerk, Barrierefreie Webseiten, ch. 7.3). Telemetry data from 40 shops shows that 60 to 90 characters even perform better than the usual “use all 125 characters” convention. Keyword stuffing in the alt text is counterproductive — for accessibility anyway, for ranking too.

On weight, the situation is simpler. On most websites images are the largest share of the data transferred. In an evaluation of more than 300 audits, 82 percent of websites had image problems: missing alt texts or files over 100 KB. As a guide: a hero image should not exceed 150 KB, with an absolute upper limit of around 200 KB; images in running text under 100 KB after AVIF conversion.

On format, AVIF is now the standard: 30 to 45 percent smaller than WebP at the same quality, 50 to 70 percent smaller than JPEG, and supported in 94 to 95 percent of browsers worldwide. WordPress can upload and process AVIF since version 6.5.

Stating width and height in the HTML prevents the layout from jumping while loading — that is exactly the quantity Google measures as Cumulative Layout Shift.

And with lazy loading there is a trap that is often overlooked: the top image of a page must never get loading="lazy". It is usually exactly the element whose loading time is measured as Largest Contentful Paint — delayed loading makes the most important metric worse, not better. For this one image, fetchpriority="high" should be set instead. Combining the two cancels each other out.

How to check it yourself

For the alt texts: in the WordPress media library you can click on every image and see the alt text field. Once set, the text is inserted wherever the image is used. Empty fields on images that matter for the content are the finding.

For the file size: open the developer tools (F12), “Network” tab, filter on “Img” and reload the page. You see every image file with its size. Sort descending — the top three are your job.

For the overall situation, a look at PageSpeed Insights is enough. The messages “Efficiently encode images” and “Properly size images” show exactly the files where work pays off. The second message appears when a file has more than four times the pixel width actually displayed.

For lazy loading: open the source and search for loading="lazy". If it is on the first large image of the page, that is the error.

What to do if it is missing

Add the alt texts in the media library — once there, instead of in every use separately. Describe what can be seen in the image and why it is there. For purely decorative images, set an empty alt attribute on purpose.

Convert images to AVIF or WebP. A plugin or a CDN optimiser can do this automatically on upload or on delivery.

Name files sensibly before uploading: gartenhaus-aus-laerche-grau.webp instead of IMG_0023.JPG. Three to six words, hyphens instead of underscores, lowercase, no umlauts.

Set width and height on all <img> tags. In Etch and ACSS this happens automatically through the image components.

And treat the hero image as a special case: no lazy loading, fetchpriority="high" instead. WordPress sets this automatically since version 6.3 on the first larger non-lazy image — but for images inside a component the automation does not apply, and you have to set it yourself.

Sources

• Alt text is, besides the file path, the only mandatory element in the img tag; guiding rule “as short as possible, as long as necessary”; two questions per image (decorative or necessary for understanding, what information); 100–125 characters as a starting point; keyword stuffing counterproductive; the WordPress media library maintains the alt text centrally; functional images describe the function -- @ctx:atlas-accessibility-rheinwerk-barrierefreie-webseiten-07-03-the-alt-attribute@1 -- Rheinwerk, Barrierefreie Webseiten, ch. 7.3
• 82 % of websites with image problems (missing alt texts, files over 100 KB); WebP upload and compression; alt text on every image in the media library; width and height on all img tags against CLS -- @ctx:atlas-seo-technical-audit@1
• AVIF 30–45 % smaller than WebP and 50–70 % smaller than JPEG, 94–95 % browser support, WordPress core 6.5 with AVIF upload; compression thresholds of 150 KB target and ~200 KB limit for the hero image, ≤100 KB for content images; “Properly size images” applies from four times the displayed pixels; never loading="lazy" on the hero image, fetchpriority="high" instead, combining the two cancels out; WordPress core 6.3 sets fetchpriority automatically but misses component-wrapped heroes; file names short, descriptive, with hyphens, lowercase, ASCII; alt text optimum of 60–90 characters according to ImageSEO telemetry from 40 shops; functional images describe the function -- @ctx:atlas-seo-practice-2026@3
• Informative images with descriptive alt text, decorative ones with an empty (never missing) alt attribute -- @ctx:atlas-accessibility-wcag22-checklist@1