Image SEO

Image SEO covers the practices that make images discoverable in image search, accessible to assistive technology, and efficient enough to load without dragging down Core Web Vitals. It overlaps three disciplines (search, accessibility, performance) and the same techniques typically improve all three.

File names

Images uploaded with default camera or stock-library file names (IMG_4892.jpg, screenshot-2026-04-25-at-10-33-11.png) provide no signal about content. Rename before uploading to descriptive, hyphen-separated, lowercase strings:

• core-web-vitals-search-console-report.webp
• liam-hayward-seo-specialist-portrait.webp
• gbp-listing-knowledge-panel-example.png

The file name is a low-weight ranking signal for image search and a useful fallback when alt text is missing. It also makes content management vastly easier for everyone working on the site.

Alt text

Alt text describes an image for users who cannot see it: screen reader users, users on slow connections where images don’t load, and search engines indexing the page.

The rules:

Describe what the image shows. Not what it means symbolically; not what you want the user to associate with the image. The literal content of the image.

Be specific. “Person at a laptop” is weak. “SEO specialist Liam Hayward analysing a Search Console report on a laptop” is useful. Specificity helps both screen reader users and search visibility.

Skip “image of” or “picture of”. Screen readers already announce the element as an image. Repeating the type is redundant.

Use empty alt for decorative images. Pure decoration (background patterns, separator graphics) should have alt="", which tells screen readers to skip the image. Don’t use the word “decorative” in the alt; use the empty string.

Don’t keyword stuff. Alt text is a content field, not a keyword field. Stuffed alt text damages accessibility (it’s read out loud to screen reader users) and looks spammy to search engines.

File formats

Use modern formats. The order of preference for most cases:

1. AVIF. Smallest file sizes for photographic content. Browser support is now near-universal.
2. WebP. Excellent compression, broad support, the safe modern default.
3. PNG. Use only when transparency or pixel-perfect graphics are required (logos, UI screenshots).
4. JPEG. Acceptable fallback for older systems. Newer formats are smaller at equivalent quality.
5. SVG. The right choice for logos, icons, and illustrations. Scales without quality loss; usually the smallest file size.

Avoid GIFs for anything except short looping animations. For longer animations, use a video format (MP4, WebM) with the <video> element.

Image dimensions and srcset

Images should be served at the dimensions they will be displayed at, with appropriate variants for different viewport sizes. The srcset and sizes attributes let the browser choose the right variant:

<img
  src="hero-800.webp"
  srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1600.webp 1600w"
  sizes="(min-width: 768px) 800px, 100vw"
  width="800"
  height="450"
  alt="Descriptive alt text"
  loading="lazy"
/>

Setting explicit width and height reserves layout space and prevents Cumulative Layout Shift, one of the Core Web Vitals.

Lazy loading

Use loading="lazy" on images below the fold. This defers loading until the image is about to enter the viewport, reducing initial page weight and improving LCP for above-the-fold content.

The exception: do not lazy-load the LCP image. The largest above-the-fold image is the one Core Web Vitals is measuring; lazy-loading it actively damages LCP scores.

Image compression

Modern build tools and CDNs handle compression automatically (Astro’s <Image> component, Next.js Image, Cloudflare Images, Vercel’s image optimisation). For static images, run them through a tool like Squoosh or ImageOptim before uploading. Aim for the smallest file size that delivers acceptable visual quality; for most photographic content, WebP at quality 75 to 85 is the sweet spot.

Image search and structured data

Image search remains a meaningful traffic source for visual niches (recipes, products, photography, design). To improve image search visibility:

• Use descriptive file names and alt text
• Surround images with relevant text content; image search uses the surrounding context heavily
• Provide an <img> element rather than a CSS background image, which isn’t indexed
• Where appropriate, add ImageObject schema with caption, creator, and license properties

For e-commerce, Product schema with image references is more impactful than ImageObject schema for the typical use case.

Common image SEO mistakes

Mistake	Effect
Default camera file names	Lost relevance signal
Missing alt text	Accessibility failure; weaker indexing
Decorative images with descriptive alt	Screen reader noise
PNG for photographic content	5 to 10x larger than WebP equivalents
No width/height attributes	CLS damage
Lazy loading the LCP image	LCP damage
Background-image CSS for content imagery	Not indexed by image search

Frequently asked questions

Should I include keywords in image file names? Where they fit naturally, yes. Don’t manufacture keyword-stuffed file names that don’t accurately describe the image.

Do alt text length limits matter? Screen readers handle long alt text but it becomes tedious for users. 125 characters is a useful target. Beyond that, consider whether the image needs a longer description elsewhere on the page (a caption or surrounding text).

Does Google index images served from a CDN with a different domain? Yes, but the indexing signals are slightly weaker. Images served from your own domain (or a subdomain) carry the page’s relevance context more directly. For sites optimising heavily for image search, self-hosted or first-party CDN delivery is preferable.