Image Accessibility: Alt Text, Responsive Images and Why Search Engines Care

Accessibility and SEO look like two different jobs. With images they are the same job: make every picture understandable to software and comfortable for every visitor — and both audiences reward you.

Roughly one in six people lives with a visual or motor impairment. Screen-reader users, people on slow connections, and users who block images all experience your gallery differently. Search engines are, in that sense, just another blind visitor trying to make sense of your page.

Alt text: the text behind the image

Alt text is the written replacement an image conveys when it cannot be seen — by a screen reader, a broken connection, or a crawler. It is an attribute, not visible copy:

<img src="blue-shoes.jpg" alt="Blue running shoes on a wooden floor">

How to write it well

• Describe the content, not the file. "Blue Nike running shoes, side view" — not "IMG_4092.jpg".
• Be specific but brief. One or two sentences. Decorative images get an empty alt (`alt=""`) so screen readers skip them.
• Never start with "image of." Assistive technology already announces that it is an image.
• Include text that appears in the picture. A quote graphic without its words is useless to a blind reader.
• Match the link context. If the image is clickable, the alt should say where the link goes.

Alt text and SEO

Google does not "see" your JPEG; it reads what surrounds it — alt text, captions, headings, structured data. Descriptive alt gives the crawler a second chance to understand the page, and images can surface in Google Images sending qualified traffic. Keyword-stuffed alt backfires: it reads as spam to both users and algorithms. Describe the picture; the relevance follows naturally.

Responsive images: one source, every screen

A 4000-pixel photo displayed in a 600-pixel column wastes bandwidth on phones and slows the Largest Contentful Paint — a Core Web Vitals signal. Serve what each screen actually needs:

• Intrinsic width: resize to the largest size you display, not the size of the original file. Resize Image does this in-browser in seconds.
• density descriptors: `srcset` with 1×, 2×, 3× lets the browser pick sharpness for retina screens.
• Modern formats: WebP or AVIF typically cut 25–40% versus JPG at the same quality. Convert with Convert Image — keep a JPG fallback for ancient clients.

A practical rule: under 100KB for images above the fold, under 200KB for the rest. Compress after resizing, never before — the resize is where most bytes die.

Captions, context and figure elements

Alt text handles the "what"; the page around the image should handle the "why." Pair meaningful images with a visible caption, use headings to structure the gallery, and prefer semantic markup (`<figure>` and `<figcaption>`) over a bare `<img>` floating in a `<div>`. Captions are read by everyone — and studies consistently show they get read more than body copy.

A checklist you can run on any page

1. Every content image has meaningful alt — or empty alt if decorative.
2. No text baked into images that conveys information available nowhere else. If it must be in the picture, repeat it in the caption or the copy.
3. Sizes are responsive: no 4000px assets in 600px slots.
4. Format is modern: WebP/AVIF with a sensible fallback.
5. Weights are sane: under 100KB above the fold.
6. Contrast is readable — at least 4.5:1 for normal text inside the graphic.
7. The image works when it fails: turn images off in your browser and re-read the page. If the meaning collapses, the alt text is missing.

That last test takes thirty seconds and tells you everything about how your images behave for anyone who cannot see them.

Do it on your own images

Resize to the display size with Resize Image, export a modern format with Convert Image, compress to the weight budget with Compress Image — then write the alt text while the picture is still fresh in your head. All of it happens in your browser, free, with no upload.

Prepare accessible images now →