Image SEO essentials from formats to lazy loading and alt text
Images are usually the heaviest thing on a page and the most neglected part of an SEO audit. Everyone obsesses over title tags while shipping 2 MB hero JPEGs with empty alt attributes and no dimensions. This post walks through the handful of image decisions that actually matter; most of them are one-time fixes.
Formats: WebP is the floor, AVIF is the ceiling
There is no browser-support excuse left. WebP has effectively universal support and typically cuts 25 to 35 percent off a JPEG at the same visual quality. AVIF compresses even harder, often meaningfully smaller than WebP, and support is now broad enough to use it as your primary format with a fallback.
The picture element handles the negotiation for you: offer AVIF first, WebP second, JPEG as the safety net, and each browser takes the best one it understands. Better yet, if your platform or CDN does automatic format negotiation, turn it on and stop thinking about formats forever. In most site audits, simply converting legacy JPEG and PNG libraries to modern formats is the single largest byte savings available on the whole site.
Responsive images: stop sending desktop pixels to phones
A 2400-pixel-wide image scaled down to a 360-pixel phone screen is pure waste. The srcset attribute lets you offer the same image at multiple widths, and the sizes attribute tells the browser how large the image will render at each viewport, so it can pick the smallest file that still looks sharp.
The part people get wrong is sizes. Leave it out and the browser assumes the image spans the full viewport, which makes it download far bigger files than needed. Be honest in sizes: if the image renders at 50 percent of the viewport on desktop and full width on mobile, say exactly that. Generating the width variants is tedious, which is again why an image CDN that resizes on the fly earns its keep.
Lazy loading, and the classic way to get it wrong
Native lazy loading (loading="lazy") is free performance for images below the fold. The browser skips them until the user scrolls near, saving bandwidth and speeding up the initial load. Use it liberally, with one enormous exception.
Never lazy-load your LCP image. The Largest Contentful Paint element is usually the hero image, and lazy-loading it tells the browser to deprioritize the exact resource your Core Web Vitals depend on. It shows up in audit after audit: a site-wide lazy-loading rollout applies loading="lazy" to every img tag, including the hero, and LCP jumps by a second. The fix is the opposite treatment: eager loading plus fetchpriority="high" on the LCP image, and ideally a preload if it is late-discovered.
The rule of thumb: above the fold, eager and prioritized. Below the fold, lazy. If a template cannot know where the fold is, lazy-load everything except the first image or two.
Alt text that describes instead of stuffs
Alt text is an accessibility feature first and a relevance signal second, and writing it for the first purpose automatically serves the second. Describe what the image shows and why it is there.
Good: alt="Barista pouring latte art into a white ceramic cup".
Stuffed: alt="coffee shop best coffee near me espresso latte cappuccino barista coffee beans". This helps no one and reads as spam.
Lazy: alt="image" or alt="photo123.jpg". Worse than useless.
Keep it concrete, roughly a sentence, and skip the phrase "image of" (the alt attribute already implies it). If the image contains text, that text belongs in the alt. And for product images, name the product as a human would, because that is exactly the query Google Images matches against.
Decorative vs meaningful images
Not every image deserves alt text. Decorative flourishes, background swirls, spacer graphics, and icons that sit next to their own text label add nothing when described. For those, use an empty alt attribute: alt="". That is not the same as omitting the attribute: empty alt tells screen readers to skip the image deliberately, while a missing attribute can make them read out the filename.
The test worth applying: if the image vanished, would the reader lose information? Yes means write real alt text. No means alt="" and move on.
Image sitemaps and Google Images
Google Images is still a meaningful discovery channel for ecommerce, recipes, travel, and anything visual. Image sitemaps (or image entries inside your existing sitemap) help Google find images that are loaded via JavaScript or hosted on a CDN subdomain it might not otherwise associate with your pages.
Beyond the sitemap, the ranking inputs for image search are refreshingly old-fashioned: descriptive filenames (walnut-dining-table.avif beats IMG_4021.avif), alt text, the caption and text surrounding the image, and the overall relevance of the host page. Structured data helps too: product and recipe markup feeds image results with rich treatments.
CLS: give every image its dimensions
An image without width and height attributes has no reserved space, so when it loads, everything below it jumps. Multiply by every image on the page and you get a failing Cumulative Layout Shift score.
The fix is almost embarrassingly simple: put width and height attributes on every img element, and let CSS scale it responsively (max-width: 100 percent, height: auto). The browser uses the attributes to compute the aspect ratio and reserves the space before the file arrives. Custom templates and older themes still drop the attributes constantly; a Screaming Frog crawl with a custom extraction for img tags missing width or height finds every offender in one pass.
The one-afternoon audit
Image SEO is mostly a checklist, not a discipline. Crawl the site, find the oversized files, missing alts, lazy-loaded heroes, and dimensionless images. Fix the templates once and every future image inherits the fix. Few afternoons of SEO work pay back this reliably.