Image SEO: alt text, file names, and lazy loading

A search engine can't "see" an image the way a person does — it relies on the surrounding text, the file name, and the alt attribute to understand what an image actually shows. This part covers all three, plus the loading behavior that affects how an image factors into page speed.

Alt text: written for a screen reader first

<!-- Weak: no real information -->
<img src="chart.png" alt="chart" />

<!-- Weak: keyword-stuffed, doesn't describe the image -->
<img src="chart.png" alt="python tutorial chart seo python code python" />

<!-- Strong: actually describes what's shown -->
<img src="python-execution-flow.png" alt="Diagram showing Python source code compiled to bytecode, then run by the interpreter" />

Alt text's primary job is accessibility — it's what a screen reader announces in place of an image that can't be seen. That's not in tension with SEO; a search engine reads the exact same attribute to understand the image, so writing it well for a screen reader user is the same work as writing it well for image search. Stuffing it with repeated keywords, as in the weak example above, fails both jobs at once — it's genuinely unhelpful spoken aloud, and search engines actively discount over-optimized alt text as a spam signal rather than rewarding it.

Descriptive file names, before upload

Weak:   IMG_4471.jpg
Weak:   image1.png
Strong: python-execution-flow-diagram.png

The file name itself is a real, if minor, signal — renaming an image before uploading it costs nothing and gives both image search and general crawling one more piece of relevant context than a camera's or CMS's default auto-generated name ever provides.

Lazy loading — everywhere except the one image that matters most

<img src="hero-image.jpg" alt="..." loading="eager" />
<img src="further-down-the-page.jpg" alt="..." loading="lazy" />

loading="lazy" defers loading an image until it's about to scroll into the viewport — genuinely good for page speed on a content-heavy page with many images. The exception is whichever image is likely to be the page's Largest Contentful Paint element (usually a hero or cover image visible without scrolling) — lazy-loading that one specifically delays the single metric it most directly affects, which is exactly the reasoning behind the Next.js series' priority prop on next/image for a post's cover image.

Modern formats and real dimensions

<img src="diagram.webp" alt="..." width="800" height="400" />

WebP and AVIF produce meaningfully smaller files than JPEG or PNG at equivalent visual quality — a direct page-speed win (part 12 covers speed as a ranking factor directly). Explicit width/height attributes let the browser reserve the correct space before the image loads, preventing the layout shift that an image popping into an unreserved space causes — a real, measured Core Web Vitals metric, not just a visual nicety.

Next: keyword research — before writing a word of content, understanding what people are actually searching for, in their own words.