Image SEO: Complete Visual Optimization Guide

Make Images Findable

• Use HTML image elements. Google finds images in the src attribute of an <img> element, including one inside <picture>, and says: “Google doesn’t index CSS images.” An image set as a CSS background won’t appear in image results.
• Always give a fallback src. For srcset and <picture>, Google notes that “some browsers and crawlers don’t understand these attributes” and recommends “that you always specify a fallback URL using the src attribute.”
• Use a supported format: Google lists “BMP, GIF, JPEG, PNG, WebP, SVG, and AVIF”, and suggests the file extension match the file type.
• Don’t block image files in robots.txt if you want them in results.
• Make JavaScript galleries crawlable. Images inserted only after an interaction, or by scripts Google can’t render, may never be seen; see JavaScript SEO. Google describes dynamic rendering as “a workaround and not a long-term solution” for JavaScript-generated content.
• Reference each image by one URL across the site, so Google “can cache and reuse the image without needing to request it multiple times.”

Context Decides What an Image Ranks For

Google says the page an image sits on “can have a great influence on how and where the image may appear in Google’s search results”, and that it “extracts information about the subject matter of the image from the content of the page, including captions and image titles.”

• Place images near the text they illustrate, on pages about the same subject.
• Write alt text. Google calls it “The most important attribute when it comes to providing more metadata for an image”, and says it uses alt text “along with computer vision algorithms and the contents of the page to understand the subject matter of the image.” Its example ladder runs from missing alt text and keyword stuffing (“Bad”) to “puppy” (“Better”) to “Dalmatian puppy playing fetch” (“Best”).
• Use descriptive file names. Google says the filename “can give Google very light clues”; my-new-black-kitten.jpg is better than IMG00023.JPG.
• Use captions where they help the reader; Google reads them as page content.
• Keep important text out of images. Text inside an image isn’t available as page text.

For accessibility, describe what an informative image shows, describe the action for a linked or button image, and give purely decorative images an empty alt="" so screen readers skip them. When an image is a link, Google notes that its alt text “is useful as anchor text”.

Choose Formats and Sizes

Compress each image and check the result by eye, since the right setting depends on the image. Serve the size the layout displays: resizing a large file with CSS still downloads the large file. Google adds that “High-quality photos appeal to users more than blurry, unclear images”, so compress for size without making images unclear.

Responsive images let the browser pick a file for the screen:

<img src="kitchen-800.webp"
     srcset="kitchen-400.webp 400w, kitchen-800.webp 800w, kitchen-1200.webp 1200w"
     sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
     width="1200" height="800"
     alt="Galley kitchen with white cabinets and a walnut counter">

And <picture> provides newer formats with a fallback:

<picture>
  <source srcset="kitchen.avif" type="image/avif">
  <source srcset="kitchen.webp" type="image/webp">
  <img src="kitchen.jpg" width="1200" height="800" alt="Galley kitchen with white cabinets and a walnut counter">
</picture>

Load Images Without Hurting Core Web Vitals

• Set width and height. web.dev’s CLS guide says: “Always include width and height size attributes on your images and video elements.” That prevents layout shift.
• Lazy-load below the first screen only. web.dev’s lazy-loading guide cautions: “Don’t lazy-load images that are likely to be in-viewport when the page loads, especially LCP images.” Use loading="lazy" for the rest.
• Make the main image fast. A large hero image can be the page’s Largest Contentful Paint element, so size it correctly and serve it early; see Core Web Vitals optimization.
• Strip unneeded camera metadata, but keep IPTC rights fields if you use them for licensing (below).

Image Sitemaps

An image sitemap can list images Google might not discover otherwise. Google’s image sitemap documentation supports two tags, <image:image> and <image:loc>, in the namespace declared on <urlset>:

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
        xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">
  <url>
    <loc>https://example.com/kitchen-renovation/</loc>
    <image:image>
      <image:loc>https://cdn.example.com/kitchen.jpg</image:loc>
    </image:image>
  </url>
</urlset>

Google says it removed <image:caption>, <image:geo_location>, <image:title> and <image:license> from its documentation. Put captions and context on the page instead. Image URLs can be on another domain, such as a CDN; Google encourages verifying the CDN’s domain in Search Console so it can report crawl errors. Errors appear in the Sitemaps report; general sitemap practice is in XML sitemaps.

Structured Data and Image Metadata

• Preferred image for the page. Google’s selection of a page’s preview image “is completely automated”, but you can suggest one with primaryImageOfPage, an image property on the main entity, or og:image. Google advises a relevant, representative, high-resolution image, not a logo or an image with text, and not one with “an extreme aspect ratio”.
• Rich results. Google says that with structured data it “can display your images in certain rich results, including a prominent badge in Google Images,” and that the image property is required for that badge in those types. Product and recipe images belong in their Product and Recipe markup. HowTo markup no longer helps: Google removed its how-to documentation in September 2023 “as this rich result is no longer shown in search results”, on desktop or mobile.
• Licensing. Google’s image license metadata documentation says “There are two ways that you can add photo metadata to your image”: structured data or IPTC photo metadata, and that if both conflict, “Google will use the structured data information.” With a license URL and a license-acquisition page, an image can be eligible for the Licensable badge.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "ImageObject",
  "contentUrl": "https://cdn.example.com/kitchen.jpg",
  "license": "https://example.com/image-license",
  "acquireLicensePage": "https://example.com/license-our-photos",
  "creator": { "@type": "Person", "name": "Jane Smith" }
}
</script>

Measuring Image Search Traffic

• Search Console Performance report with the search type set to Image, which Google says “Includes search traffic from results shown in the Google Images tab.” Compare queries and pages with the Web search type.
• Pages earning image traffic, to see which visual content is found.
• Core Web Vitals for pages with large images, in Search Console and PageSpeed Insights.
• Engagement on image-heavy pages in GA4, compared before and after changes over comparable periods.

Image SEO Errors

• Images as CSS backgrounds when they should be indexed.
• Missing alt text, the same alt text on every image, or alt text stuffed with keywords.
• Generic file names such as image1.jpg.
• Oversized files scaled down with CSS.
• Lazy-loading the hero image.
• Image sitemaps that still rely on caption, title or license tags.
• HowTo markup added for images.
• Important text embedded only inside images.

For each image, decide first whether it informs, links or decorates; that decides its alt text, and only the informative ones need the descriptive alt text Google uses to understand an image’s subject.