Image Optimisation for SEO · Complete Guide

Alt text (the alt attribute on <img> elements) is the primary text-based signal Google uses to understand what an image depicts. It is read by screen readers for users with visual impairments (an accessibility requirement under WCAG 2.1) and crawled by Googlebot as a primary image relevance signal.

How to write effective alt text

Alt text should describe what the image shows in a way that serves two purposes simultaneously: enabling a visually impaired user to understand what they are missing, and communicating the image's content and context to Google.

<!-- Bad: empty or generic -->
<img src="hero.jpg" alt="">
<img src="chart.jpg" alt="image">
<img src="product.jpg" alt="photo">

<!-- Good: descriptive and contextually relevant -->
<img src="lcp-waterfall-diagram.webp" 
     alt="Chrome DevTools waterfall showing LCP sub-parts: TTFB, 
          resource load delay, resource load duration, and render delay">
<img src="blue-running-shoes.jpg"
     alt="Men's Brooks Ghost 15 running shoes in blue and grey">

Alt text dos and don'ts

• Do: Describe what the image actually shows, including relevant details (colour, position, action, subject)
• Do: Include relevant keywords naturally where they accurately describe the image
• Do not: Keyword-stuff alt text — "keyword research keyword research guide keyword research tool" is spam
• Do not: Start with "image of..." or "photo of..." — screen readers announce images already
• Do not: Leave alt text blank for informational images — blank alt text is correct only for purely decorative images (CSS-like icons, decorative borders)

Decorative images: use empty alt text

Purely decorative images (abstract backgrounds, decorative dividers, icons that repeat information already in text) should have alt="" (empty alt attribute, not omitted). Empty alt text tells screen readers to skip the image; an omitted alt attribute causes screen readers to read the file name. For decorative images with no semantic meaning, CSS background images are preferable to <img> elements.

Image file names contribute to Google's understanding of image content and context — particularly for images where alt text is absent or minimal. Google's official documentation explicitly states that descriptive file names help Googlebot understand image content.

<!-- Non-descriptive file names — provide no context -->
IMG_4821.jpg
DSC00342.png
image1.webp
photo-2.jpg

<!-- Descriptive file names — communicate content -->
keyword-research-methodology-diagram.webp
brooks-ghost-15-mens-running-shoes.jpg
google-search-console-performance-report.png

Use lowercase letters and hyphens (not underscores) to separate words in file names. Underscores are not treated as word separators by Google's search systems in the same way hyphens are. Avoid spaces (which become %20 in URLs) and special characters.

Image directory paths also provide context. /images/products/running-shoes/ communicates more about the image category than /images/p/. This is a minor signal but a costless one — naming directories descriptively as part of standard site organisation.

ImageObject structured data provides additional metadata to Google about images — particularly for images that are the primary subject of a page (recipes, products, news articles). When implemented correctly, this can improve Google Images appearance and rich result eligibility.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "ImageObject",
  "contentUrl": "https://example.com/images/product.jpg",
  "description": "Men's Brooks Ghost 15 running shoes in blue and grey",
  "name": "Brooks Ghost 15 Running Shoes",
  "width": 1200,
  "height": 800,
  "author": {
    "@type": "Organization",
    "name": "Example Store"
  },
  "license": "https://creativecommons.org/licenses/by/4.0/"
}
</script>

Google's Image Search features — image licensing badges, product image carousels, recipe image thumbnails in search results — all use structured data to determine eligibility. For product pages, Recipe schema, and Article schema, the "image" property with a complete ImageObject is recommended for rich result eligibility.

Google Images is a significant traffic source for certain content types (recipes, products, DIY guides, photography). Ranking in Google Images requires optimising for factors beyond just alt text:

• Page quality and relevance. The most important Google Images ranking factor is the quality and relevance of the page hosting the image. An image on a high-quality, topically authoritative page ranks better in image search than the same image on a low-quality page.
• Image quality and resolution. Google favours high-resolution images (at least 1200px wide for editorial content). Blurry, pixelated, or very small images are less likely to appear in prominent image search positions.
• Image freshness. Recently-uploaded images for trending or current topics rank better than older images covering the same subject.
• Image licensing. Implementing schema.org/license in structured data and the IPTC photo metadata standard enables the "Creative Commons license" filter in Google Images — expanding the audience that can find your images.
• SafeSearch compliance. Explicit or graphic content that violates SafeSearch policies is excluded from filtered results.

Image optimisation decisions directly affect LCP and CLS — two of Google's three Core Web Vitals ranking signals. The connection is documented in our LCP and CLS guides; this section summarises the on-page SEO implications.

• LCP. The LCP element is an image on the majority of pages. Image format (WebP vs JPEG), file size, preload hints, and fetchpriority all directly affect how quickly the LCP image paints. Poor LCP affects ranking through the Core Web Vitals signal.
• CLS. Images without width and height attributes cause layout shifts when they load. Setting explicit dimensions on all images prevents CLS. This is both an image SEO best practice and a Core Web Vitals requirement.

The on-page image optimisation checklist

• Descriptive alt text on all non-decorative images
• Descriptive file name (hyphens, lowercase, no spaces)
• Explicit width and height attributes on all <img> elements
• WebP or AVIF format with JPEG fallback via <picture>
• fetchpriority="high" on the LCP image only
• loading="lazy" on all below-fold images
• Responsive images with srcset and sizes
• Image file size appropriate for display dimensions (not oversized)

loading="lazy" on <img> elements defers image loading until the user scrolls near the image. It is supported natively in all modern browsers and is one of the simplest performance improvements available. However, incorrect application directly harms LCP.

Correct application: add loading="lazy" to all images that are not visible in the initial viewport — images in article body sections (typically the second half of longer articles), images in "related articles" modules, avatar images in comment sections, and images in footer areas. The first 2–3 images in an article should load eagerly (the default).

Authentic Sources