Two articles, same topic, same word count. One ranks with a rich thumbnail and clean snippet; the other shows a gray placeholder and truncated title. The difference was forty minutes of image SEO: sized files, descriptive alts, stable dimensions. This guide gives the full checklist — size budgets, alt formulas, dimension discipline and lazy-loading — plus how each item feeds both rankings and AI-search citations.
Part of the image optimization guide. Hit budgets with the image compressor; score the page in the SEO analyzer. Cover sizing in resize presets.
Size budgets per slot (the numbers to hit)
| Slot | Budget | How |
|---|---|---|
| Hero / LCP image | <180KB, 1200×630 | WebP 80%, the LCP element — every KB delays paint |
| In-article image | <150KB each | 800px wide max, JPG/WebP 80% |
| Thumbnail | <50KB | 400px, 75% quality fine |
| OG share cover | <300KB, 1200×630 | Absolute HTTPS URL, test per network |
Audit method: DevTools → Network → Img filter → sort by size. Anything over budget gets the resize-then-compress treatment. Re-score after with the SEO analyzer until image checks pass.
Alt text formula (8–12 descriptive words)
Alt serves two masters: screen readers (accessibility) and crawlers (relevance). Formula: subject + action/context + distinguishing detail. “Technician compressing a 4.2MB photo to 900KB on a laptop” beats “image1” and beats keyword-stuffed “compress jpg image compressor free online tool”. Rules: every meaningful image gets alt; decorative dividers get empty alt (alt=""); never stuff keywords (it reads as spam to both audiences); keep under ~125 characters. Descriptive alts also get cited by AI search engines — generic ones never surface.
Dimensions discipline (kill layout shift)
Images without width/height (or aspect-ratio CSS) push text around as they load — Cumulative Layout Shift, a ranking factor. Fix at the source: set explicit dimensions matching the file (1200×630 hero → width="1200" height="630"), or aspect-ratio: 1200/630 in CSS for responsive scaling. Reserve space even for lazy images — the placeholder box holds layout while bytes stream in. Our card components bake 280px intrinsic sizes for exactly this reason. Verify in Lighthouse: CLS under 0.1 is the target, and image-caused shifts are the most common failure I audit.
Lazy-load below fold, srcset for screens
Two attributes, big wins: loading="lazy" on every below-fold image (never on the hero/LCP image — that delays the most important paint), and srcset serving 400/800/1200px variants so phones don't download desktop bytes. Export the widths once from the resizer, compress each with the compressor, and wire all three. Finish by previewing share cards in the open graph preview — social crops punish unprepared dimensions.
General guidance only. Measure with Lighthouse field data after shipping — lab scores approximate, real-user metrics decide.