Bild-SEO: Alt-Text, Formate, Komprimierung und Lazy Loading

Google Images verarbeitet jeden Monat Milliarden von Anfragen. Laut Daten von Jumpshot betreffen rund 22 % aller Websuchen die Bildersuche. Für E-Commerce-Shops, Content-Plattformen und Portfolios ist das ein erheblicher Traffic-Kanal, den die meisten Websites komplett ignorieren.

Die Bildoptimierung wirkt sich nicht nur auf die Sichtbarkeit in Google Images aus, sondern auch auf die organische Suche: auf die Ladezeit der Seite (LCP), die Core Web Vitals, das Nutzererlebnis und – indirekt – auf das Ranking in der Haupt-SERP.

zoom_in

Warum Bilder für SEO optimieren

Eine saubere Bildoptimierung löst mehrere Probleme gleichzeitig: Sie verbessert die Barrierefreiheit für sehbehinderte Nutzer, beschleunigt das Laden der Seite, gibt Google klaren Kontext und erschließt über Google Images einen zusätzlichen Kanal für organischen Traffic.

zoom_in

Bilder sind auf den meisten Seiten der schwerste Ressourcentyp. Nicht optimierte Bilder verlangsamen das Laden, verschlechtern den LCP (Largest Contentful Paint) und wirken sich direkt auf die Bewertung der Core Web Vitals aus. Seit 2021 berücksichtigt Google die CWV als Rankingsignal.

Alt-Text: Schreibregeln

Das alt-Attribut (alt="...") ist die einzige Möglichkeit, Google zu erklären, was auf einem Bild zu sehen ist. Es wird außerdem angezeigt, wenn ein Bild nicht geladen werden kann, und von Screenreadern für sehbehinderte Nutzer vorgelesen.

So formulieren Sie ihn richtig

Regeln für Alt-Texte: Beschreiben Sie, was auf dem Bild zu sehen ist. Nennen Sie das Ziel-Keyword, wenn es passt, und möglichst natürlich. Beginnen Sie nicht mit Formulierungen wie „Bild von …“, „Foto von …“ oder „Abbildung von …“, denn Google weiß bereits, dass es sich um ein Bild handelt. Optimale Länge: 5–15 Wörter.

<!-- 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>

Dateinamen und Pfade

Google wertet den Dateinamen eines Bildes als zusätzliches Signal aus. Der Name DSC_0047.jpg liefert keinerlei Information, canonical-url-diagram.webp dagegen signalisiert Thema und Kontext.

Formate: WebP, AVIF, JPEG, PNG

Die Wahl des Formats ist einer der wichtigsten Hebel bei der Optimierung. Moderne Formate (WebP, AVIF) liefern bei gleicher visueller Qualität deutlich kleinere Dateien.

Empfohlene Strategie: Verwenden Sie WebP als Hauptformat mit einem JPEG-Fallback über das <picture>-Element. Wechseln Sie zu AVIF, sobald Ihre Zielgruppe überwiegend Chrome 85+ und Safari 16+ nutzt. Verwenden Sie SVG ausnahmslos für alle Vektorgrafiken.

<!-- 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>

Komprimierung ohne Qualitätsverlust

Die meisten Bilder lassen sich um 30–70 % komprimieren, ohne dass ein Qualitätsverlust sichtbar wird. Wichtige Werkzeuge: Squoosh (online), ImageMagick (CLI), Sharp (Node.js), Pillow (Python).

Optimale Qualitätseinstellungen

// 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 Loading und loading='eager'

Lazy Loading verschiebt das Laden von Bildern außerhalb des sichtbaren Bereichs, bis der Nutzer zu ihnen scrollt. Dadurch sinkt das anfängliche Seitengewicht, und die Time to Interactive verkürzt sich.

<!-- 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"
/>

Maße, srcset und Art Direction

Geben Sie immer die Attribute width und height an. So kann der Browser den Platz für das Bild reservieren, bevor es geladen ist, und verhindert den Cumulative Layout Shift (CLS), also das Verspringen von Inhalten während des Ladens.

<!-- 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"
/>

Das Attribut srcset ermöglicht es dem Browser, für die aktuelle Bildschirmgröße und Pixeldichte die optimale Bildgröße auszuwählen. Auf einem mobilen Gerät mit 2x-DPI lädt der Browser die 800-px-Version statt der 1200-px-Version. Das spart Datenvolumen und beschleunigt die Seite.

Strukturierte Daten

Schema.org-Markup hilft Google, Bilder in Rich-Suchergebnissen anzuzeigen, etwa in Produktkarten, Rezepten oder Artikeln. Für Bilder sind vor allem die Typen ImageObject, Article, Product und Recipe relevant.

{
  "@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": "seohead"
  }
}

Bild-Sitemap

Google empfiehlt, Bildinformationen in Ihre XML-Sitemap aufzunehmen. Das hilft bei der Indexierung von Bildern, die per JavaScript geladen werden, und liefert zusätzlichen Kontext wie Titel, Bildunterschrift und Lizenz.

<?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