Image Optimization for SEO: A 2026 Field Guide

Images are usually 60–80% of a page's total byte weight, and they are the single biggest factor in Largest Contentful Paint — the loading metric Google uses to rank pages. Optimising them is one of the highest-leverage things you can do for SEO. This guide walks through the 2026 checklist, from format choice to alt text, with the specific defaults that work in production today.

Why images matter for SEO

Google ranks pages on relevance and on user experience. Slow pages get demoted, especially on mobile, where the median connection is still significantly slower than the desktop testing environment most developers use. Image optimisation also opens up traffic from Google Images, which still drives meaningful clicks for visual queries — recipes, product searches, design inspiration, how-to guides.

Three signals matter directly: Largest Contentful Paint (almost always an image), Cumulative Layout Shift (avoided by sizing images correctly), and the relevance signals encoded in alt text, surrounding copy and filenames. Get all three right and you are ahead of most of your competitors.

Pick the right format

In 2026, the default for web photography is AVIF with a WEBP fallback and a JPG final fallback. For UI screenshots and transparent graphics, use lossless WEBP with a PNG fallback. For logos and icons, use SVG.

Compress without visible loss

Most images on production websites are encoded at far higher quality than anyone can see. JPG at quality 95 is functionally identical to JPG at quality 82 on screen but twice the file size. WEBP at quality 90 is wastefully large; quality 75–80 is the sweet spot. AVIF can usually be dropped to quality 55–65 without visible artefacts for photography.

1. Start from the highest-quality source you have. Compressing an already-compressed file stacks artefacts.
2. Set the output quality to the lowest value where the result still looks indistinguishable.
3. Strip metadata (EXIF, colour profiles you do not need) unless you specifically need it.
4. For images larger than 200 KB after compression, ask whether you really need a 3000 px source.

Serve responsive sizes with srcset

A single 3000 px-wide hero image being downloaded by a 375 px phone is a common (and expensive) mistake. The srcset attribute lets the browser pick the right size for the current viewport and pixel density. Provide at least three sizes — a small (~640 px), a medium (~1280 px), and a large (~1920 px) — and let the browser choose.

Pair srcset with a sizes attribute that tells the browser how big the image will display at each breakpoint. Without sizes, the browser has to guess, and it usually guesses too high.

Lazy-load below the fold

Use loading="lazy" on every image that is not visible when the page first loads. Modern browsers handle the rest natively — no JavaScript library, no IntersectionObserver, no scroll handlers. For images above the fold (especially the LCP image), do the opposite: loading="eager" and fetchpriority="high". The combination tells the browser exactly which image to prioritise.

Alt text that helps users and search engines

Alt text serves two audiences: screen-reader users and search engines. Good alt text describes what is in the image and why it matters to the surrounding content. Bad alt text repeats the filename, stuffs keywords, or says 'image of'.

If an image is purely decorative, alt="" tells screen readers to skip it. Empty alt is correct; missing alt is not — it forces screen readers to read out the filename.

Filenames and URLs matter (a little)

Search engines do read image filenames as a relevance signal. Not heavily — your surrounding copy and alt text matter much more — but it costs nothing to use 'walnut-chopping-board.avif' instead of 'IMG_2841.avif'. Use hyphens, lowercase, and keep filenames human-readable. Avoid stuffing keywords; one descriptive phrase is enough.

Structured data and image SEO

Adding image references to your structured data (Product, Recipe, Article, How-To) makes those images eligible for richer treatments in search results, including image carousels and Knowledge Panels. Use absolute URLs in structured data, point to the largest version you serve, and make sure the image is actually crawlable (not blocked by robots.txt).

Core Web Vitals checklist

• Declare width and height on every img tag. Eliminates layout shift for that image.
• Use loading="eager" and fetchpriority="high" on the LCP image only.
• Preload the LCP image with a <link rel="preload" as="image"> tag if it is set via CSS background.
• Lazy-load every image below the fold with loading="lazy".
• Use AVIF or WEBP as the primary format; provide JPG/PNG fallback.
• Serve responsive sizes via srcset and sizes.
• Avoid client-side resizing — let the server send the right size.

How to audit your existing images

1. Run a Lighthouse audit on your top three pages. Look at the LCP element — it is almost always an image.
2. Open the page in DevTools, sort the Network panel by size, and find the heaviest image. If it is over 200 KB compressed, it is a candidate for re-encoding.
3. Check the rendered dimensions of each image against its natural size. If you are serving a 3000 px image into a 600 px slot, you are wasting bandwidth.
4. Skim alt text in the Elements panel. Anything blank-but-not-decorative, generic, or keyword-stuffed needs rewriting.
5. Re-test after changes. Measured improvement is the only thing that matters for ranking.