Image SEO: alt text, formats, compression, and lazy load

Google Images processes billions of queries every month. According to Jumpshot data, around 22% of all web searches involve image search. For e-commerce sites, content platforms, and portfolios this is a substantial traffic channel that most sites completely ignore.

Image optimisation affects not only visibility in Google Images but also organic search: page load speed (LCP), Core Web Vitals, user experience, and — indirectly — rankings in the main SERP.

zoom_in

Why optimise images for SEO

Proper image optimisation solves several problems at once: it improves site accessibility for visually impaired users, speeds up page loading, gives Google clear context, and opens an additional organic traffic channel through Google Images.

zoom_in

Images are the heaviest resource type on most pages. Unoptimised images slow loading, degrade LCP (Largest Contentful Paint), and directly affect Core Web Vitals scores. Since 2021, Google has included CWV as a ranking signal.

Alt text: writing rules

The alt attribute (alt="...") is the only way to explain to Google what is shown in an image. It also displays when an image fails to load, and is read aloud by screen readers for visually impaired users.

How to write it correctly

Alt text rules: describe what is visible in the image; include the target keyword naturally if relevant; do not begin with phrases like 'image of...', 'photo of...', 'picture of...' — Google already knows it is an image. Optimal length: 5–15 words.

<!-- Informative image -->
<img
  src="/images/crawl-budget-chart.webp"
  alt="Crawl budget distribution chart by page type"
  width="800"
  height="450"
/>

<!-- Decorative image -->
<img
  src="/images/divider.svg"
  alt=""
  role="presentation"
/>

<!-- Image link: alt describes the link purpose -->
<a href="/tools">
  <img
    src="/images/seo-scripts-icon.webp"
    alt="SEO Scripts: tools for technical audits"
    width="64"
    height="64"
  />
</a>

File names and paths

Google analyses the image filename as an additional signal. The name DSC_0047.jpg provides no information; canonical-url-diagram.webp signals the topic and context.

Formats: WebP, AVIF, JPEG, PNG

Format selection is one of the key optimisation factors. Modern formats (WebP, AVIF) deliver significantly smaller file sizes at the same visual quality.

Recommended strategy: use WebP as the primary format with a JPEG fallback via the <picture> element. Move to AVIF once your audience is predominantly on Chrome 85+ and Safari 16+. SVG for all vector graphics without exception.

<!-- Modern approach: AVIF → WebP → JPEG -->
<picture>
  <source srcset="/images/hero.avif" type="image/avif" />
  <source srcset="/images/hero.webp" type="image/webp" />
  <img
    src="/images/hero.jpg"
    alt="SEO audit of an online store: 340% traffic growth"
    width="1200"
    height="675"
    loading="eager"
    fetchpriority="high"
  />
</picture>

Compression without quality loss

Most images can be compressed by 30–70% with no visible quality loss. Key tools: Squoosh (online), ImageMagick (CLI), Sharp (Node.js), Pillow (Python).

Optimal quality settings

// Next.js: automatic optimisation via next/image
import Image from 'next/image';

// next/image automatically:
// - converts to WebP/AVIF
// - generates srcset
// - adds lazy loading
// - prevents layout shift (requires width/height)
export function HeroImage() {
  return (
    <Image
      src="/images/hero.jpg"
      alt="Organic traffic growth after SEO audit"
      width={1200}
      height={675}
      priority // disables lazy load for the hero image
    />
  );
}

Lazy load and loading='eager'

Lazy loading defers the loading of off-screen images until the user scrolls to them. This reduces the initial page weight and speeds up Time to Interactive.

<!-- Below-fold images: lazy loading -->
<img
  src="/images/article-thumbnail.webp"
  alt="XML sitemap audit screenshot"
  width="400"
  height="225"
  loading="lazy"
/>

<!-- Hero and LCP images: eager + fetchpriority -->
<img
  src="/images/hero.webp"
  alt="Real-time SEO analytics"
  width="1200"
  height="675"
  loading="eager"
  fetchpriority="high"
/>

Dimensions, srcset and art direction

Always specify width and height attributes. This lets the browser reserve space for the image before it loads and prevents Cumulative Layout Shift (CLS) — content jumping during load.

<!-- srcset: different sizes for different screens -->
<img
  src="/images/blog-cover.webp"
  srcset="
    /images/blog-cover-480.webp 480w,
    /images/blog-cover-800.webp 800w,
    /images/blog-cover-1200.webp 1200w
  "
  sizes="(max-width: 480px) 480px, (max-width: 800px) 800px, 1200px"
  alt="Internal linking architecture guide: site structure diagram"
  width="1200"
  height="675"
  loading="lazy"
/>

The srcset attribute lets the browser select the optimal image size for the current screen and pixel density. On a mobile device with 2x DPI the browser loads the 800px version instead of 1200px — saving bandwidth and improving speed.

Structured data

Schema.org markup helps Google show images in rich results: product cards, recipes, articles. The most relevant types for images are ImageObject, Article, Product, and Recipe.

{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Image SEO: complete guide",
  "image": {
    "@type": "ImageObject",
    "url": "https://seohead.tech/images/blog/image-seo.webp",
    "width": 1200,
    "height": 675,
    "caption": "Image optimisation for search: formats, alt text, compression"
  },
  "datePublished": "2026-05-17",
  "author": {
    "@type": "Person",
    "name": "Pavel Barushka"
  }
}

Image sitemap

Google recommends including image information in your XML sitemap — this helps index images loaded via JavaScript and provides additional context (title, caption, licence).

<?xml version="1.0" encoding="UTF-8"?>
<urlset
  xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
  xmlns:image="http://www.google.com/schemas/sitemap-image/1.1"
>
  <url>
    <loc>https://seohead.tech/blog/image-seo</loc>
    <image:image>
      <image:loc>https://seohead.tech/images/blog/image-seo.webp</image:loc>
      <image:title>Image SEO: alt text, formats, compression, and lazy load</image:title>
      <image:caption>Complete guide to image optimisation for search</image:caption>
    </image:image>
  </url>
</urlset>

FAQ