TL;DR: Image SEO means every image is compressed into a next-gen format, given a descriptive filename and real alt text, lazy-loaded where appropriate, and sized with explicit dimensions. Each of those does a job: next-gen formats and lazy-loading protect your speed scores, descriptive filenames and alt text tell search engines and AI what the image shows, and explicit width and height stop the layout shift that fails CLS. The one rule people miss: never lazy-load your hero image.
What is image SEO?
Image SEO is the set of image practices that serve three goals at once: page speed, accessibility, and discoverability. A single image touches all three. Its file weight affects loading, its alt text affects accessibility and how machines read it, and its dimensions affect visual stability. Getting images right is one of the highest-leverage technical fixes because a typical page has many of them, and each one is a chance to help or hurt.
This is check 13 of the AI SEO checklist and one of the six technical pre-flight checks. It sits directly on top of the speed check, because unoptimized images are the single most common cause of a failing LCP.
Why does image format and compression matter?
Because images are usually the heaviest thing on a page, and heavy images are the most common reason LCP fails. Serving next-gen formats like WebP and AVIF instead of old JPEGs and PNGs cuts file size dramatically at the same visual quality, and delivering them through a CDN cuts the geographic latency on top. An oversized hero image is the classic culprit: a 3MB photo where a 150KB one would look identical can single-handedly push loading past the 2.5-second threshold.
Compression is not just about format. Size the image to the largest dimension it will actually display at, rather than shipping a 4000px original into a 800px slot and letting the browser shrink it. The bytes the browser downloads are the full file, not the displayed size, so serving right-sized images is often the biggest single speed win on an image-heavy page.
What makes good alt text and file names?
Descriptive, specific, and written for a human who cannot see the image. Alt text should describe what the image actually shows in plain language, not stuff keywords: "emerald verification seal above three document cards" beats "SEO trust image keyword." It serves screen-reader users first, and search engines and AI read it to understand the image, so accurate description is both an accessibility duty and a discoverability signal.
File names do a smaller version of the same job. A descriptive filename like content-capsule-diagram.webp tells a search engine more than IMG_4821.jpg ever could, before the alt text is even read. Two guardrails: describe the image honestly rather than gaming it, and skip alt text on purely decorative images so screen readers can ignore them, using an empty alt attribute instead of a keyword dump.
How should you handle lazy-loading?
Lazy-load what is below the fold, never the hero. Lazy-loading defers off-screen images until the user scrolls near them, which saves bandwidth and speeds initial load, and it is the right default for images down the page. But the largest above-the-fold image is almost always your LCP element, and deferring it delays the exact thing Core Web Vitals measures, making your score worse.
So the rule is split: the hero image loads eagerly, ideally with a high-priority preload hint, and everything below the fold lazy-loads. This is the most common image mistake in practice, because many CMS platforms and plugins lazy-load every image by default, including the one you most need to load first.
Why do images need explicit dimensions?
Because an image without declared width and height causes layout shift, and layout shift fails CLS. When the browser does not know an image's size in advance, it reserves no space, so when the image loads it pushes everything below it downward, and that jump is exactly what Cumulative Layout Shift penalizes. Setting explicit width and height attributes, or a CSS aspect ratio, lets the browser hold the correct space from the start, so the image fills a reserved slot instead of shoving the page. This one attribute pair is the simplest CLS fix there is, and omitting it is one of the most common causes of a failing stability score.
Optimized image vs unoptimized image
| Attribute | Optimized image | Unoptimized image |
|---|---|---|
| Format | WebP or AVIF via CDN | Heavy JPEG or PNG |
| Size | Right-sized to display slot | 4000px original in a small slot |
| File name | Descriptive, like hero-diagram.webp | IMG_4821.jpg |
| Alt text | Plain description of the content | Missing or keyword-stuffed |
| Loading | Hero eager, rest lazy | Everything lazy, including hero |
| Dimensions | Explicit width and height | None, causing layout shift |
How we apply this at HBS
Every image we publish is converted to a next-gen format, right-sized, given descriptive alt text, and shipped with explicit dimensions, and heroes are set to load eagerly while in-content images lazy-load. Alt text is written as an honest description rather than a keyword slot, which serves accessibility and machine-readability at once. This is a standing part of our technical pre-flight, and the Advanced SEO Solutions work we deliver includes auditing and re-optimizing the image layer across a site, which often recovers a failing LCP on its own.
The cheapest speed win on the page
Images are usually both the heaviest thing on a page and the easiest to fix, which makes image SEO the highest-return technical change most sites can make. Convert them, size them, name them, describe them, and reserve their space. If your pages are slow and image-heavy, our Advanced SEO Solutions team can audit every image, fix the formats, dimensions, and loading, and recover the speed and accessibility you are losing. Get a free audit and find out how much weight your images are costing you.
