Image SEO: The Complete Guide

Images are often the largest assets on a page, the slowest things to load, and the part of a page most likely to be ignored by both developers and search engines. That is a missed opportunity. Done right, image SEO drives traffic from Google Images, makes your pages accessible to everyone, and protects the Core Web Vitals scores that influence rankings. Done wrong, it bloats your pages, shifts your layout, and leaves your best visual content invisible to search.

This guide walks through every layer of image SEO, from filenames and alt text to modern formats, responsive markup, lazy loading, sitemaps, and structured data. Each section is practical and ready to apply today.

Why Image SEO Matters

There are three independent reasons to take images seriously, and each one stands on its own.

Google Images is a real traffic source

Google Images is one of the largest search surfaces on the web. For recipes, products, travel, fashion, interiors, and any visually driven topic, a meaningful share of discovery happens through image search. If your images are unnamed, undescribed, and undiscoverable, you are simply absent from that channel. Google understands an image by combining the visual content with the page around it: nearby text, headings, captions, the filename, the alt attribute, and structured data. An image rarely ranks on filename or alt text alone. It ranks when it clearly supports a well-defined page topic and Google can crawl the file.

Accessibility is the point, not a side effect

Alt text exists first and foremost for people who cannot see the image: screen reader users, people on very slow connections, and anyone hitting a broken image. Treating accessibility as the primary goal happens to produce the best SEO outcome too, because accurate, descriptive text is exactly what search engines want. Accessibility is also a legal requirement in many jurisdictions, so this is not optional polish.

Images drive Core Web Vitals

Images are usually the heaviest element on a page, which makes them the single biggest lever for performance. The hero image is frequently the Largest Contentful Paint element, so how fast it loads directly sets your LCP score. Images without dimensions are the most common cause of Cumulative Layout Shift. Both are part of Core Web Vitals, which feed into Google's page experience signals.

Descriptive Filenames

The filename is the first piece of context Google reads. A camera default like IMG_0023.jpg tells search engines nothing. A descriptive name like black-kitten-sleeping.jpg tells them exactly what the image shows.

The rules are simple:

• Keep names short but descriptive.
• Separate words with hyphens, not underscores. Google treats hyphens as word separators and underscores as joiners, so red-running-shoes.jpg reads as three words while red_running_shoes.jpg can read as one.
• Use lowercase and avoid spaces or special characters.
• Describe the actual image, not a keyword you wish to rank for.

If you manage thousands of images, automate the naming as part of your publishing workflow rather than renaming by hand.

Alt Text Done Right

Alt text is the most important metadata you provide for an image. The mindset that produces good alt text is simple: describe the image to someone who cannot see it, in the context of the page it sits on.

What good alt text looks like

Be accurate and specific. "Golden retriever puppy chewing a blue rope toy on a wooden floor" is far better than "dog" or "cute puppy image". Aim for roughly 80 to 140 characters, about the length of a short sentence. Screen readers will read longer text, but listener attention fades, so be complete without rambling.

What to avoid

Do not keyword stuff. Repeating your target phrase across every image, or writing alt text like "running shoes buy running shoes best running shoes", hurts both accessibility and SEO. Do not start with "image of" or "picture of" since screen readers already announce that it is an image. Keywords are fine when they appear naturally because they genuinely describe the image.

Decorative images

If an image is purely decorative and adds no information, give it an empty alt attribute (alt="") so screen readers skip it. An empty alt is correct here; a missing alt attribute is not.

Modern Image Formats: WebP and AVIF

Format choice is the easiest large win in image SEO. The legacy JPEG and PNG formats are far heavier than modern alternatives at the same visual quality.

• WebP reduces file size by roughly 25 to 35 percent versus JPEG at equivalent quality and is supported across effectively all modern browsers.
• AVIF goes further, often saving 50 percent or more over JPEG, with browser support now well above 90 percent.

A practical approach is to serve AVIF first, fall back to WebP, and fall back to JPEG for the rare old browser. The <picture> element handles this gracefully. Keep using SVG for logos, icons, and line art, since it is resolution independent and tiny.

Responsive Images: srcset and sizes

A single large image served to every device wastes bandwidth on phones and looks soft on high-resolution displays. Responsive images let the browser pick the best file for each screen. The srcset attribute offers several widths and sizes tells the browser how much space the image will occupy, so it can choose before layout is final.

<img
  src="shoes-800.jpg"
  srcset="shoes-400.jpg 400w,
          shoes-800.jpg 800w,
          shoes-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw, 50vw"
  width="1200"
  height="800"
  alt="Blue trail running shoes on a rocky path">

When you also need different formats, wrap sources in a <picture> element so the browser takes the first format it supports:

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" width="1600" height="900"
       alt="Sunrise over a mountain ridge">
</picture>

Width and Height to Prevent Layout Shift

Always set explicit width and height attributes on every image. When the browser knows the dimensions, it reserves the correct space before the image downloads, so content does not jump as images arrive. That jump is exactly what Cumulative Layout Shift measures, and it is one of the most common and most avoidable Core Web Vitals failures.

Modern CSS handles this well: set the attributes to the image's intrinsic pixels and let CSS scale it responsively with height: auto. The browser uses the ratio from the attributes to reserve space while still allowing fluid resizing.

Lazy Loading, Except the LCP Image

Lazy loading defers off-screen images until the user scrolls near them, which saves bandwidth and speeds up the initial load. Add it with a single attribute:

<img src="gallery-3.webp" width="800" height="600"
     loading="lazy" alt="Ceramic mugs on a shelf">

The one image you must never lazy load is the LCP image, usually the hero at the top of the page. Lazy loading it delays the very element Google measures for LCP. Instead, do the opposite and prioritise it. Add fetchpriority="high" to the hero image so the browser fetches it early, and consider preloading it. For background images set in CSS, a preload with fetchpriority="high" is the way to surface it early since the browser cannot discover it from markup alone.

Image Sitemaps

An image sitemap helps Google discover images it might otherwise miss, especially those loaded via JavaScript, CSS backgrounds, or galleries. You can extend your existing XML sitemap with image entries rather than maintaining a separate file. See our XML sitemaps reference for the full picture on sitemap structure.

<url>
  <loc>https://example.com/products/trail-shoes</loc>
  <image:image>
    <image:loc>https://example.com/img/trail-shoes.webp</image:loc>
  </image:image>
</url>

This is most valuable for image-heavy sites where standard crawling may not reach every file.

Captions and Context

Google reads the page around an image to understand it. Captions, nearby headings, and body text all add meaning. A visible caption using <figure> and <figcaption> is read by users and search engines alike, and tends to attract attention because captions are among the most-read text on a page. Place images near the text they illustrate rather than dumping them in a gallery divorced from context.

Structured Data for Images

Structured data tells Google which images carry meaning for the page's main entity. Several rich result types depend on it: Product markup uses product photos, Recipe markup requires recipe images, and Article markup uses the hero. Providing high-quality images through the relevant schema makes your content eligible for richer presentation in search.

Reserve ImageObject and image fields in schema for images that genuinely represent the page entity, such as the product shot, the recipe photo, or the article hero. You do not need to mark up every decorative image. Use Google's Rich Results Test to confirm your markup is valid.

Common Image SEO Mistakes

• Camera-default filenames like DSC_0481.jpg that carry no meaning.
• Missing or stuffed alt text. Both extremes fail; aim for accurate description.
• Serving JPEG or PNG everywhere when WebP or AVIF would cut weight dramatically.
• No width and height, causing layout shift and a worse CLS score.
• Lazy loading the hero image, which sabotages LCP.
• Oversized images. Uploading a 4000px file displayed at 600px wastes bandwidth; resize to what is actually shown.
• CSS background images for meaningful content. Use real <img> elements so Google can index the image and you can give it alt text.
• Forgetting structured data for products, recipes, and articles that qualify for rich results.

Frequently Asked Questions