Image SEO: The Complete Playbook (Formats, Alt Text, CWV)

Images are 50% of bytes on a typical page. They are also a top source of CLS and LCP. That is the entire argument in two sentences: image SEO is performance SEO. The media on your page decides whether Google’s ranking systems score you as fast or slow, and whether Google Images can tell what your page is about at all.

Most image SEO advice stops at alt text. That is like calling a parking lot a car strategy. The real playbook has seven layers — file names, alt text, formats, responsive sizing, loading priority, structured data, and layout stability. Each layer pays on a different board: speed pays in rankings and conversions, semantics pays in image search, schema pays in rich results.

This is the playbook we run on every image-bearing page we touch — the rules, the reasoning behind each, and how to measure that they worked. The on-page SEO guide covers where these elements sit in the wider template; here we go deep on pixels.

Key takeaways

• Images are 50% of bytes on a typical page — the largest single performance lever most sites have never audited.
• AVIF delivers the best compression and is supported by all major browsers; WebP ships about 30% smaller than JPEG with universal support; PNG is only for transparency.
• Prioritize the hero, defer the rest: fetchpriority="high" with a preload above the fold, loading="lazy" below it, and decoding="async" to keep decoding off the critical path.
• Always set width and height — or reserve the slot with aspect-ratio CSS — because unsized images are a top source of cumulative layout shift.
• Alt text is accessibility first, SEO second. Describe the image, let a keyword ride along naturally, never stuff, never leave a content image empty.
• ImageObject schema is required for image-rich results, and a dedicated image sitemap speeds discovery on image-heavy sites.

What image SEO actually means

Image SEO is the practice of making images fast, descriptive, and discoverable so Google’s two relevant systems — page ranking and image search — both reward the page. It spans naming, alt text, format choice, sizing, loading priority, structured data, and layout reservation. One layer without the others leaves money on the table.

You are optimizing for two different readers. The ranking systems experience your images indirectly through Core Web Vitals: an oversized hero drags LCP, an unsized thumbnail drags CLS. The image-ranking systems experience them directly as entities — the file name, alt text, surrounding copy, and structured data tell Google what the picture depicts and where it should surface. The same five tags can win both boards or lose both.

Why images decide your Core Web Vitals

Images decide Core Web Vitals on most pages because they are the heaviest element and the most layout-sensitive one. The largest contentful paint candidate is usually the hero image or product photo, and the most frequent cause of a layout shift is an image loading into space nobody reserved for it.

Run the arithmetic. If images are 50% of your bytes, halving their weight moves total page size by a quarter — no framework rewrite required. If the LCP element is the hero, optimizing that single request is the highest-leverage speed fix available on the page. And the same file that wins you a fast LCP can lose the page its CLS score if it arrives late and pushes content down. The full threshold model — what counts as good versus failing — is broken out in our Core Web Vitals guide.

Half your bytes are images. Most of your layout shift is images too. Fix the images and you fix two ranking systems at once.

Do image file names matter for SEO?

Yes. Use descriptive, hyphen-separated, keyword-aware names: serp-preview-tool.webp, not IMG_4521.jpg. The file name is a context signal in image search and a small tiebreaker on the page. Google’s vision systems do not need it, but the text index still reads it.

Three rules, applied at export and then enforced by the CMS: name what is in the picture, hyphens between words, and match the page’s primary query where it is honest. red-leather-loafer-side-view.webp beats product-1234.webp and beats best-shoes-cheap-comfortable.webp. A human should be able to guess the contents from the URL alone — because so can a screen-reader user forwarding the link, a crawler indexing it, and your own designer searching for it next month.

How to write alt text that ranks and includes

Good alt text describes the image for someone who cannot see it. The keyword rides along when it fits that description; when it does not, there is no keyword. Don’t stuff. Don’t leave a content-bearing image empty. And skip the “image of” preamble — assistive tech already announces the role.

The mental model: read the alt text to a colleague on the phone. If they get the picture — literally — it works. On a product page that means the product, the angle, and the attribute that matters: “brown leather loafer, side profile, rubber sole.” For charts and diagrams, put the takeaway or the key value in the alt text, because the number is the image. Purely decorative images get alt="" so screen readers skip them; an empty alt is a deliberate, correct choice, not laziness.

Which image format should you use?

AVIF if you can, WebP everywhere, JPEG as the fallback, PNG only when transparency is required. AVIF gives the best compression and is supported by all major browsers. WebP runs about 30% smaller than a comparable JPEG and is universally supported.

The nuance is encoding time, not decoding. AVIF is the slowest to encode, so convert at build or upload time — never in a hot request path. Serve formats through a picture element with fallbacks so every browser gets the best it supports and no browser errors. Photos go to AVIF and WebP; images needing transparency go to PNG or alpha AVIF. Done systematically at the template level, this one swap is the cheapest byte reduction most sites have.

How should you size images responsively?

Never serve a 2400px hero into a 400px slot. Use srcset with multiple candidate sizes and sizes so the browser knows which rectangle each candidate will fill before it downloads anything.

The failure pattern is brutal in its simplicity: the CMS stores one giant original, the template prints it everywhere, and a phone pays for 800KB to render a 300px rectangle. Build three or four widths per template — small, medium, large, plus a 2x candidate for heroes — and let srcset choose. sizes is the attribute people skip and shouldn’t; without it the browser guesses viewport fractions and frequently picks the largest candidate for a small screen.

Which loading attributes do you need?

The rule is priority-awareness: the browser does not know which image is your hero, but you do. Above-the-fold hero: fetchpriority="high" plus a preload. Below the fold: loading="lazy". Wherever decoding competes with rendering: decoding="async".

Preload tells the browser to fetch the LCP candidate before the parser discovers it — the difference between a hero found late and a hero already in flight. loading="lazy" is the opposite instruction for everything else, and lazy-loading a hero is a classic own-goal: you delay the exact element LCP measures. decoding="async" lets the browser keep painting frames while the picture decodes. Set all three per image position, never as a blind site-wide default.

How do you stop images from breaking your layout?

Always specify width and height attributes on every image, or reserve the slot with aspect-ratio in CSS. The browser then computes the box before a single pixel downloads, and nothing on the page jumps when the file finally arrives.

Cumulative layout shift is a ranking factor and a rage factor. The mechanics: an unsized image loads late, pushes everything below it down, and every reader mid-paragraph watches their content slide away. Sized attributes kill the entire bug class because the box is knowable from markup alone. If you crop responsively and can’t hard-code dimensions, set the slot’s aspect ratio in CSS on the container instead. And remember that image results in Google’s SERP — carousels, product packs — favor pages whose images are stable and well-described; our SERP features cheat sheet covers which packs your images can win.

Do you need ImageObject schema?

Yes for image-rich results. ImageObject schema is required for those features, and its properties are contentUrl, thumbnailUrl, name, description, author, copyrightNotice, and license. Structured data alone grants nothing; missing it disqualifies you from licensing labels and some visual enhancements.

Treat schema as the image’s passport: what it is, where it lives, who made it, and under what terms it can be reused. Generate it from the same metadata your CMS or asset system already holds — never hand-type it article by article, because the moment you do, half your images ship with stale values.

Are image sitemaps worth it?

For image-heavy sites, yes: a dedicated image sitemap helps Google discover and index your images faster than waiting on page crawls alone. For a normal text-led blog with one hero per post, skip it — the crawler finds those anyway.

Product catalogs, galleries, and news photo archives are where image sitemaps pay, because images are the page’s primary payload there. Generate one from the database, attach each image to its parent URL with contentUrl and title, and validate the XML before every submission with our sitemap validator. If you run a store, the image layer belongs on the same list as product data in our ecommerce SEO checklist.

How do you measure whether your image SEO worked?

Measure three things, not vibes: field Core Web Vitals, Lighthouse image diagnostics, and image-search traffic. Each layer of the playbook fails visibly in one of those three reports, so a monthly loop catches regressions before they compound.

The workflow: run Lighthouse and read the next-gen formats, properly sized images, and explicit width and height audits; find which element your LCP actually is in the Performance panel; watch 75th-percentile CLS and LCP in field data over 28 days — Lighthouse is synthetic, so trust the field numbers for the verdict. In Search Console, switch the search-type filter to Image: a rising line confirms the naming, alt, and schema layer is earning impressions; a flat one says your images are fast but still invisible.

Five image mistakes that cost real rankings

• Lazy-loading the hero. You just delayed your own LCP — the one element that should never be deferred.
• Serving CMS originals. One 2400px file printed into every slot is a 400px rectangle paying 800KB.
• Keyword-list alt text. It reads as spam to people and adds nothing for screen readers; describe, then mention.
• Duplicated alt across variants. Thirty angles of one product need thirty descriptions, not one copied thirty times.
• Fixing formats but not dimensions. AVIF still shifts layout if it loads into a box nobody reserved.

Frequently asked questions

Does image SEO actually affect Google rankings?

Yes, through two routes. Heavy, late-loading, layout-shifting images drag Core Web Vitals, which feeds ranking directly. Well-described images earn impressions in Google Images, which Search Console reports separately — and image packs increasingly appear in main web results.

Does alt text help SEO?

It helps image SEO and accessibility more than web rankings. Alt text is the strongest textual signal of what an image depicts, so it governs image-search relevance, and it is the only part of your image a screen-reader user receives. The keyword should ride along, not drive.

Is AVIF better than WebP?

For delivery weight, yes — AVIF gives the best compression and all major browsers now support it. WebP encodes faster and is the practical universal fallback where AVIF conversion isn’t in your pipeline. JPEG stays as the last resort; PNG only for transparency.

Should every image be lazy-loaded?

No. Lazy-load below-the-fold images and never the above-the-fold hero. The hero wants fetchpriority="high" and a preload so the browser starts fetching it before the parser reaches the tag.

What is an image sitemap?

A sitemap that lists images alongside their parent pages so Google discovers them faster than waiting for page crawls. It matters on image-heavy sites — stores, galleries, archives — and is unnecessary noise on text-led blogs.

The verdict

Image SEO is the cheapest double win in search: the same work that cuts half your page weight and kills your layout shifts also feeds the entity index that surfaces your pictures in Google Images. Start with the hero — format, size, priority, dimensions — then enforce every rule at the template level so no new page can ever ship an IMG_4521.jpg.

Measure twice: once in the field vitals after each template change, and once in Search Console’s image filter to see whether the semantic layer is paying. When the page is fast and described, the ranking side of the equation — crawl, index, and snippet behavior — is covered in the technical SEO guide.