Bild-SEO-Optimierung: die vollständige Checkliste

20. März 2026 · 10 Min. Lesezeit
NEWImgMin for Chrome — right-click any image to compress, no upload.Zu Chrome hinzufügen →

Auf den meisten Websites machen Bilder rund 50 % des gesamten Seitengewichts aus. Unoptimierte Bilder sind der häufigste Grund, warum Seiten an den Core Web Vitals scheitern — und das wirkt sich direkt auf Ihre Rankings aus. Diese Checkliste behandelt jede Technik der Bildoptimierung, die 2026 fürs SEO zählt.

Warum Bildoptimierung fürs SEO zählt

Google nutzt die Seitengeschwindigkeit als Ranking-Faktor, und Bilder sind meist die schwersten Assets einer Seite. Der direkte Einfluss:

Schneller Gewinn: Allein das Komprimieren von Bildern kann den LCP um 1-3 Sekunden verbessern. Das ist oft der Unterschied zwischen Bestehen und Scheitern der Core Web Vitals.

Die vollständige Bild-SEO-Checkliste

1. Komprimieren Sie jedes Bild

Das ist die Optimierung mit dem höchsten Impact und geringsten Aufwand. Komprimieren Sie alle Bilder vor dem Hochladen:

FormatZielqualitätErwartete Ersparnis
JPG/JPEG75-85%60-75%
PNGVerlustfreie Optimierung20-40%
WebP75-85%70-85 % vs Original

Nutzen Sie Tools, die Bilder clientseitig verarbeiten (wie ImgMin — kein Upload nötig), um sensible Bilder nicht auf Drittanbieter-Server zu laden. Formatspezifische Anleitungen: JPG komprimieren, PNG komprimieren, WebP komprimieren.

2. Nutzen Sie das richtige Format

Liefern Sie mehrere Formate mit dem <picture>-Element:

<picture>
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Product hero image" width="1200" height="630">
</picture>

3. Auf Anzeigemaße skalieren

Servieren Sie nie ein 4000×3000-Bild in einem 800×600-Platz. Das verschwendet Bandbreite und schadet dem LCP.

<img
  srcset="photo-640.webp 640w, photo-1024.webp 1024w, photo-1920.webp 1920w"
  sizes="(max-width: 640px) 100vw, (max-width: 1024px) 80vw, 1200px"
  src="photo-1024.webp"
  alt="Descriptive alt text"
  width="1200" height="800">

4. Immer Breite und Höhe setzen

Ohne explizite Maße kann der Browser vor dem Laden keinen Platz für Bilder reservieren. Das verursacht Layout-Verschiebungen — ein CLS-Problem (Cumulative Layout Shift), das den Core Web Vitals schadet.

<!-- Bad: causes layout shift -->
<img src="photo.jpg" alt="Photo">

<!-- Good: browser reserves space -->
<img src="photo.jpg" alt="Photo" width="800" height="600">

Kombinieren Sie mit CSS aspect-ratio oder height: auto für responsives Verhalten ohne Verschiebungen.

5. Schreiben Sie aussagekräftigen Alt-Text

Der Alt-Text ist Googles primärer Weg, Bildinhalte zu verstehen. Guter Alt-Text hilft Ihnen, in Web- und Bildersuche zu ranken.

Schlechter Alt-TextGuter Alt-Text
alt="" (empty)alt="Golden retriever playing fetch in a park"
alt="image1.jpg"alt="Bar chart showing Q3 2026 revenue growth"
alt="photo photo photo SEO keywords"alt="Red Nike running shoes on a trail"

Richtlinien für Alt-Text:

6. Nutzen Sie aussagekräftige Dateinamen

Google liest Dateinamen als Signal für den Bildinhalt.

Trennen Sie Wörter mit Bindestrichen. Halten Sie Dateinamen kleingeschrieben, knapp und beschreibend.

7. Setzen Sie Lazy Loading ein

Lazy Loading verschiebt Bilder außerhalb des Bildschirms, bis der Nutzer in ihre Nähe scrollt. Das verbessert die anfängliche Ladezeit erheblich.

<!-- Native lazy loading (all modern browsers) -->
<img src="photo.jpg" alt="Description" loading="lazy" width="800" height="600">

<!-- Don't lazy-load above-the-fold images -->
<img src="hero.jpg" alt="Hero" loading="eager" fetchpriority="high">

Wichtig: Lazy-loaden Sie nie Ihr LCP-Bild (meist Hero/Banner). Nutzen Sie loading="eager" und fetchpriority="high" für Bilder oberhalb des Sichtbereichs. Alles andere lazy-loaden.

8. Kritische Bilder vorladen

Sagen Sie dem Browser bei Ihrem LCP-Bild, es früh zu laden:

<link rel="preload" as="image" href="hero.webp" type="image/webp">

Das kann 200-500 ms beim LCP einsparen, weil der Browser mit dem Download beginnt, bevor er das HTML parst, das das Bild referenziert.

9. Nutzen Sie ein CDN für die Bildauslieferung

Content Delivery Networks liefern Bilder von Servern, die dem Nutzer am nächsten sind. Vorteile:

10. Strukturierte Daten für Bilder hinzufügen

Helfen Sie Google, Ihre Bilder im Kontext zu verstehen, mit strukturierten Daten:

In strukturierten Daten referenzierte Bilder erscheinen eher in Googles Rich Results und Bildkarussells.

11. Erstellen Sie eine Bild-Sitemap

Sind Ihre Bilder fürs SEO wichtig (Produktfotos, Infografiken), nehmen Sie sie in Ihre Sitemap auf:

<url>
  <loc>https://example.com/page</loc>
  <image:image>
    <image:loc>https://example.com/photo.jpg</image:loc>
    <image:title>Product photo</image:title>
  </image:image>
</url>

12. Unnötige Metadaten entfernen

EXIF-Daten (Kameramodell, GPS-Koordinaten, Zeitstempel) fügen 20-100 KB pro Bild hinzu. Entfernen Sie sie vor dem Hochladen für:

Zusammenfassung der Core-Web-Vitals-Wirkung

OptimierungCWV-MetrikTypische Wirkung
Bilder komprimierenLCP-1 bis -3 Sekunden
Auf Anzeigegröße skalierenLCP-0,5 bis -2 Sekunden
Breite/Höhe setzenCLSBeseitigt Bild-Layout-Verschiebungen
Lazy LoadingLCP, FIDSchnelleres initiales Laden
LCP-Bild vorladenLCP-200 bis -500 ms
WebP nutzenLCP-25 bis -35 % Übertragungsgröße
CDN-AuslieferungLCP-50 bis -80 % Latenz

Beginnen Sie mit Schritt 1: Komprimieren Sie Ihre Bilder

ImgMin komprimiert JPG, PNG und WebP direkt im Browser. Kein Upload, kein Server, kein Datenschutzrisiko.

Bilder kostenlos komprimieren

Schnellreferenz-Checkliste

Zusammenfassung

Bildoptimierung ist die SEO-Arbeit mit dem höchsten ROI. Allein Komprimierung behebt oft Fehler bei den Core Web Vitals. Kombiniert mit richtiger Dimensionierung, Alt-Text, Lazy Loading und modernen Formaten sehen Sie messbare Verbesserungen bei Tempo und Rankings.

Verwandte Tools