• Use real img elements with a src attribute. CSS background images are not indexed.
• Write alt text that describes the image for someone who cannot see it.
• Serve WebP or AVIF at the right dimensions, with width and height set.
• Lazy-load images below the fold, never the main hero image.
• Keep image URLs stable. Changing them throws away what Google has learned.

Images are often the heaviest part of a page and the least optimised. Getting them right pays off twice: faster pages, and visibility in Google Images, Lens, Discover and product results.

Use HTML that search engines can read

 <img src="/images/red-running-shoes.webp"
     alt="Red lightweight running shoes with white sole, side view"
     width="800" height="600" loading="lazy" /> 

Google finds images through the src attribute of img elements, including those inside picture elements. It does not index images set as CSS backgrounds.

Alt text

Alt text exists for accessibility first. Screen readers read it aloud and browsers show it when an image fails to load. Search engines use it, together with surrounding text, to understand the image.

• Describe what is in the image, concisely and specifically.
• Include a relevant term where it fits naturally. Do not stuff keywords.
• Skip phrases such as "image of".
• Use empty alt (alt="") for purely decorative images so screen readers skip them.
• When an image is a link, the alt text acts as the anchor text.

Filenames and context

A descriptive filename such as red-running-shoes.webp gives a small extra hint, and it is certainly better than IMG_4032.jpg. Context counts for more: place images near relevant text, with captions where they help, on a page whose topic matches.

Formats

• AVIF: the best compression for most photos, with wide browser support.
• WebP: excellent compression and near-universal support.
• JPEG: the fallback for photos.
• PNG: for images needing transparency or sharp edges.
• SVG: for logos and icons.

Responsive images

Serve an image sized for the device. A 3000 pixel photo squeezed into a 400 pixel slot wastes bandwidth.

 <img src="/img/shoes-800.webp"
     srcset="/img/shoes-400.webp 400w, /img/shoes-800.webp 800w, /img/shoes-1600.webp 1600w"
     sizes="(max-width: 600px) 100vw, 800px"
     alt="Red lightweight running shoes" width="800" height="600" /> 

Performance

• Set width and height (or CSS aspect-ratio) to prevent layout shift.
• Lazy-load below-the-fold images with loading="lazy".
• Do not lazy-load the LCP image. Give it fetchpriority="high" instead.
• Compress. Most images can lose a great deal of weight with no visible change.
• Use a CDN, ideally one that resizes and converts formats on the fly.

Discovery

• Do not block image folders or your image CDN in robots.txt.
• Add images to your XML sitemap, or a dedicated image sitemap, if they are loaded by JavaScript or hard to reach.
• Keep URLs stable. Cache-busting filenames that change with every build mean Google has to rediscover each image.
• For Discover, use large images at least 1200 pixels wide and allow large previews with max-image-preview:large.

Structured data

Reference images in Product, Article, Recipe and similar markup to qualify for image-rich results and badges. Google also supports image licence metadata for showing a licensable badge.

Common mistakes

• Missing alt text, or the same alt text on every image.
• Important text baked into images where nobody can read it.
• Huge uncompressed files.
• Lazy-loading that depends on scroll events, which crawlers never trigger.
• Blocking the CDN hostname.
• Hotlinked or stock images identical to hundreds of other sites, which rarely rank.

How to test

• PageSpeed Insights flags oversized, unoptimised and offscreen images.
• Crawlers report missing alt text and large files.
• URL Inspection shows whether images load in the rendered page.
• Search Console's Performance report can be filtered to the Image search type.

The GEO angle

Multimodal models can interpret images, but most AI crawlers collecting web content read the HTML and rely on alt text, captions and nearby copy to know what an image shows. Data locked inside a chart or infographic is effectively invisible unless you also provide it as text or a table. If the figure matters, write it out.

Add your title here

This is a paragraph. Writing in paragraphs lets visitors find what they are looking for quickly and easily. Make sure the title suits the content of this text.