Image SEO

What image SEO actually means

Image SEO is the practice of optimizing the images on your pages so they load fast, get understood by Google, and pull traffic from both regular search and Google Images. Get it wrong and you leave rankings, referral clicks, and page speed on the table for no good reason.

It is a bundle of small technical decisions: descriptive filenames, alt text, responsive srcset, sensible lazy-loading, modern formats like WebP and AVIF, and an image sitemap. None of them is hard on its own. The problem is that most sites skip four of the six and wonder why their product photos never rank.

A real example: from lazy default to optimized

Here is a typical CMS output for a product photo, then the version an SEO would actually ship.

Before, what most CMS software outputs:

<img src="/uploads/IMG_20240517_00423.jpg" alt="">

After, descriptive name, alt text, responsive, modern format:

<img
  src="/images/cast-iron-skillet-12-inch.webp"
  srcset="/images/cast-iron-skillet-12-inch-400.webp 400w,
          /images/cast-iron-skillet-12-inch-800.webp 800w,
          /images/cast-iron-skillet-12-inch-1200.webp 1200w"
  sizes="(max-width: 600px) 100vw, 600px"
  width="1200" height="900"
  alt="Pre-seasoned 12-inch cast iron skillet on a wooden countertop"
  loading="lazy" decoding="async">

Two things worth calling out. The width and height attributes reserve space so the layout does not jump, which protects your CLS. And loading="lazy" is on this image because it sits below the fold. You do not lazy-load your LCP image (usually the hero), that delays the very thing the browser is timing and it will tank your Largest Contentful Paint.

The six levers, and what each one buys you

How to audit image SEO on a page

1. View source and grep for <img. Check every image has a real alt and a filename a human could read.
2. Confirm the LCP image is NOT lazy-loaded. Run PageSpeed Insights, find the LCP element, and make sure it has no loading="lazy" and ideally fetchpriority="high".
3. Check responsive delivery. Open DevTools, throttle to a mobile viewport, and confirm the browser downloads a small variant, not the full-res original.
4. Test format. In the Network tab, sort by size. Any JPEG/PNG over ~100KB is a WebP/AVIF candidate.
5. Verify dimensions are set. Every content image should carry width and height to prevent layout shift.
6. Look for an image sitemap. Especially if images load via JavaScript or sit in CSS backgrounds where Google may not find them.

Common mistakes and how to fix them

• Lazy-loading the hero. The single most common self-inflicted wound. Fix: exclude above-the-fold images from lazy-loading and add fetchpriority="high" to the LCP image.
• Keeping camera filenames. DSC03412.jpg ranks for nothing. Fix: rename to hyphenated, descriptive slugs before upload.
• One giant image for all devices. A 2500px photo squeezed into a 400px slot wastes bandwidth. Fix: generate a srcset with a sizes attribute.
• Treating alt as a keyword dumping ground. Stuffing hurts accessibility and does not help ranking. Fix: describe the image plainly. More on that on the dedicated alt attribute page.
• Ignoring next-gen formats. Fix: convert to WebP or AVIF at build time, see serving images in next-gen formats.

The one mistake that undoes the rest

If you fix only one thing, fix the LCP image. The largest element in the viewport, usually the hero, is what Core Web Vitals times for Largest Contentful Paint. Lazy loading it, serving it as an oversized original, or leaving it uncompressed all push that number the wrong way, and no amount of alt text or sitemap work will offset a slow hero. Load it eagerly, size it correctly, and add fetchpriority="high" so the browser fetches it first.

Everything else on this page compounds on top of that foundation. Descriptive filenames and clean alt text win in Google Images, responsive delivery and modern formats protect load time, and an image sitemap surfaces visuals Google might otherwise miss.

Frequently asked questions