Bilder für SEO optimieren: Format, Alt-Text und Lazy Loading

Im April 2023 hatte ich ein Problem: Mein Blog-Artikel “Was ist SEO?” rankten gut, aber die Ladezeit war katastrophal. Lighthouse Performance Score: 42. Das größte Problem? Ein einziges Hero-Bild: 4.2 MB, 4000x3000px JPEG, unoptimiert.

Nachdem ich dieses eine Bild optimierte (WebP, 1200x800px, 85KB), sprang mein LCP von 6.8 auf 2.1 Sekunden. Der Performance-Score? Von 42 auf 89.

Bilder machen oft 50-70% der gesamten Seitengröße aus. Wenn Sie Ihre Bilder nicht optimieren, verschwenden Sie Potenzial.

Warum Bilder-Optimierung kritisch für SEO ist

1. Core Web Vitals

Bilder beeinflussen direkt zwei der drei Core Web Vitals:

LCP (Largest Contentful Paint):
Oft ist das größte Element im Viewport ein Bild (Hero-Image, Featured-Bild). Ein 3MB-Bild kann Ihren LCP von <2.5s (gut) auf >4s (schlecht) treiben.

CLS (Cumulative Layout Shift):
Bilder ohne definierte Höhe/Breite laden nach und verschieben den Content. Das ist frustrierend für Nutzer - und schadet Ihrem CLS-Score.

Mehr zu Core Web Vitals: Core Web Vitals verstehen

2. Mobile Performance

Mobile Nutzer haben oft langsamere Verbindungen. Ein 2MB-Bild, das auf Desktop in 0.5s lädt, braucht auf 3G vielleicht 8 Sekunden.

Seit Mobile-First Indexing bewertet Google primär die mobile Version. Langsame Bilder = schlechte Rankings.

3. Image Search

Google Bildersuche kann eine massive Traffic-Quelle sein. Optimierte Bilder mit guten Alt-Texten und beschreibenden Dateinamen ranken in der Bildersuche.

Mein Beispiel:
Ein Artikel über “SEO-Checkliste” mit einer optimierten Infografik (Alt-Text: “SEO-Checkliste für Anfänger mit 15 Schritten”) bringt mir 200+ Besucher/Monat über Google Bildersuche.

4. Accessibility

Blinde und sehbehinderte Nutzer nutzen Screenreader. Alt-Texte ermöglichen ihnen, Bilder zu “hören”. Das ist nicht nur SEO, sondern Barrierefreiheit.

Bildformate: WebP vs. JPEG vs. PNG vs. AVIF

WebP: Der moderne Standard

Was ist WebP?
Ein von Google entwickeltes Bildformat, das 25-35% kleinere Dateien bei gleicher Qualität liefert.

Vorteile:

• Deutlich kleinere Dateien als JPEG/PNG
• Unterstützt Transparenz (wie PNG)
• Unterstützt Animation (wie GIF)
• Exzellente Kompression

Nachteile:

• Ältere Browser (< IE 11, Safari < 14) unterstützen es nicht
• Lösung: Fallback auf JPEG/PNG

Browser-Support 2025: 95%+

Wann nutzen:
Für fast alle Bilder auf modernen Websites.

JPEG: Der Klassiker

Was ist JPEG?
Verlustbehaftetes Format, ideal für Fotos mit vielen Farben.

Vorteile:

• Universelle Unterstützung
• Gute Kompression für Fotos
• Klein, wenn richtig komprimiert

Nachteile:

• Größer als WebP bei gleicher Qualität
• Keine Transparenz
• Qualitätsverlust bei starker Kompression

Wann nutzen:
Als Fallback für WebP oder wenn WebP nicht verfügbar.

PNG: Für Grafiken und Transparenz

Was ist PNG?
Verlustfreies Format, ideal für Grafiken mit Transparenz.

Vorteile:

• Unterstützt Transparenz (Alpha-Kanal)
• Verlustfrei
• Gut für Logos, Icons, Screenshots

Nachteile:

• Große Dateien bei Fotos
• Nicht ideal für komplexe Bilder

Wann nutzen:
Logos, Icons, Grafiken mit Transparenz - aber konvertieren Sie zu WebP für Web.

AVIF: Die Zukunft

Was ist AVIF?
Noch neueres Format (2020), basierend auf AV1-Video-Codec.

Vorteile:

• 30-50% kleinere Dateien als WebP
• Exzellente Qualität
• Unterstützt HDR

Nachteile:

• Browser-Support noch begrenzt (ca. 85% in 2025)
• Langsamere Encoding-Zeit

Wann nutzen:
Für kritische Bilder mit mehrfachem Fallback (AVIF → WebP → JPEG).

SVG: Für Vektorgrafiken

Was ist SVG?
Vektorformat, skalierbar ohne Qualitätsverlust.

Vorteile:

• Winzige Dateien für simple Grafiken
• Skaliert perfekt (Retina, 4K)
• Kann per CSS/JS animiert werden

Nachteile:

• Nur für Vektorgrafiken (Logos, Icons, simple Illustrationen)
• Nicht für Fotos geeignet

Wann nutzen:
Logos, Icons, simple Grafiken.

Empfehlung 2025

Standard-Setup:

<picture>
  <source srcset="bild.avif" type="image/avif">
  <source srcset="bild.webp" type="image/webp">
  <img src="bild.jpg" alt="Beschreibung" width="800" height="600">
</picture>

Browser wählt das beste unterstützte Format.

Bildgröße und Kompression

Dateigrößen-Ziele

Bildtyp	Zielgröße	Maximum
Hero-Bild (Full-Width)	100-150 KB	200 KB
Featured-Bild (Blog)	50-80 KB	120 KB
Content-Bild (inline)	30-60 KB	100 KB
Thumbnail	10-20 KB	30 KB
Logo	5-15 KB	30 KB

Faustregel:
Gesamte Seite sollte <500 KB sein. Wenn Sie 10 Bilder haben, bleiben pro Bild ~30-50 KB.

Bildabmessungen

Problem:
Ein 4000x3000px Bild wird auf 800px Breite angezeigt - aber die vollen 4000px geladen.

Lösung:
Skalieren Sie Bilder auf die tatsächlich benötigte Größe.

Typische Größen:

Use Case	Desktop	Tablet	Mobile
Hero Full-Width	1920px	1024px	768px
Blog Featured	1200px	800px	600px
Content Inline	800px	600px	400px
Thumbnail	400px	300px	200px

Responsive Images mit srcset:

<img 
  src="bild-800.webp"
  srcset="bild-400.webp 400w,
          bild-800.webp 800w,
          bild-1200.webp 1200w"
  sizes="(max-width: 600px) 100vw,
         (max-width: 1200px) 50vw,
         800px"
  alt="Beschreibender Alt-Text"
  width="800"
  height="600"
  loading="lazy"
>

Browser lädt automatisch die passende Größe.

Kompression

JPEG-Qualität:

• 100%: Unnötig groß, kaum sichtbarer Unterschied zu 85%
• 85-90%: Sweet Spot - hohe Qualität, moderate Größe
• 70-80%: Gut für weniger kritische Bilder
• <70%: Sichtbare Artefakte

WebP-Qualität:

• 80-85%: Entspricht JPEG 90-95%
• Aggressivere Kompression möglich ohne Qualitätsverlust

Tools:

1. ImageOptim (Mac): https://imageoptim.com/
   Drag & Drop, automatische Optimierung

2. Squoosh (Web): https://squoosh.app/
   Von Google, WebP/AVIF-Konvertierung

3. TinyPNG (Web): https://tinypng.com/
   Exzellente PNG/JPEG-Kompression

4. Sharp (Node.js): https://sharp.pixelplumbing.com/
   Für automatisierte Pipelines

Mein Workflow: Squoosh für einzelne Bilder, Sharp für Bulk-Processing.

Alt-Text: Best Practices

Was ist Alt-Text?

Der alt-Attribut beschreibt ein Bild textbasiert.

Zwecke:

1. Accessibility: Screenreader lesen ihn vor
2. SEO: Google versteht, was das Bild zeigt
3. Fallback: Wird angezeigt, wenn Bild nicht lädt

Schlechte Alt-Texte

Zu vermeiden:

<!-- Leer -->
<img src="bild.jpg" alt="">

<!-- Dateiname -->
<img src="IMG_1234.jpg" alt="IMG_1234">

<!-- Keyword-Stuffing -->
<img src="seo.jpg" alt="SEO SEO-Tipps SEO-Strategie SEO-Optimierung">

<!-- Zu generisch -->
<img src="person.jpg" alt="Bild">

<!-- Zu lang -->
<img src="workshop.jpg" alt="Hier ist ein Bild von unserem Workshop, bei dem wir über SEO gesprochen haben und viele Teilnehmer dabei waren, die...">

Gute Alt-Texte

Prinzipien:

1. Beschreibend: Was zeigt das Bild?
2. Präzise: 5-15 Wörter ideal
3. Kontextuell: Passt zum umgebenden Text
4. Keyword-relevant: Natürlich, nicht gestopft

Beispiele:

<!-- Hero-Bild -->
<img src="hero.webp" alt="Lisa Bergmann erklärt SEO-Grundlagen am Whiteboard">

<!-- Screenshot -->
<img src="gsc.webp" alt="Google Search Console Performance-Report mit steigendem Traffic">

<!-- Infografik -->
<img src="core-web-vitals.webp" alt="Core Web Vitals Infografik: LCP, INP und CLS Schwellenwerte">

<!-- Produktbild -->
<img src="buch.webp" alt="SEO für Anfänger Buch, Softcover, 250 Seiten">

<!-- Dekoratives Bild -->
<img src="divider.webp" alt="" role="presentation">

Besonderheit: Dekorative Bilder
Rein dekorative Bilder (Trennlinien, Hintergründe) sollten alt="" haben - das signalisiert Screenreadern, sie zu überspringen.

Alt-Text Checklist

• Beschreibt, was im Bild zu sehen ist
• 5-15 Wörter lang
• Enthält relevantes Keyword (natürlich)
• Wiederholt nicht den umgebenden Text wörtlich
• Endet nicht mit “Bild von…” (redundant)
• Bei dekorativen Bildern: alt=""

Häufige Fragen

Frage: Soll ich das Keyword in jeden Alt-Text packen?
Antwort: Nein. Nur wenn es natürlich passt. Nicht erzwingen.

Frage: Soll ich den Titel des Artikels als Alt-Text nutzen?
Antwort: Selten sinnvoll. Beschreiben Sie das spezifische Bild.

Frage: Braucht jedes Bild Alt-Text?
Antwort: Jedes Bild braucht ein alt-Attribut. Dekorative Bilder bekommen alt="".

Lazy Loading: Bilder erst bei Bedarf laden

Was ist Lazy Loading?

Bilder werden erst geladen, wenn sie in den Viewport scrollen - nicht beim initialen Seitenaufruf.

Vorteile:

• Schnellerer initialer Seitenaufbau
• Weniger Datenverbrauch
• Bessere Core Web Vitals (LCP, INP)

Implementierung (nativ):

<img src="bild.webp" alt="..." loading="lazy">

Ein Attribut, fertig. Browser erledigen den Rest.

Wann NICHT lazy loaden

Achtung:
Bilder above the fold (im sofort sichtbaren Bereich) sollten NICHT lazy geladen werden.

Warum?
Lazy Loading verzögert das Laden. Wenn Ihr Hero-Bild lazy ist, verschlechtert sich LCP.

Best Practice:

<!-- Hero-Bild above the fold -->
<img src="hero.webp" alt="..." loading="eager">

<!-- Bilder below the fold -->
<img src="content1.webp" alt="..." loading="lazy">
<img src="content2.webp" alt="..." loading="lazy">

Moderne Frameworks (Astro, Next.js) machen das automatisch richtig.

JavaScript-basiertes Lazy Loading

Native loading="lazy" reicht meistens.
Für komplexere Fälle (Hintergrundbilder, iframes, etc.):

Intersection Observer API:

const images = document.querySelectorAll('img[data-src]');

const imageObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      img.removeAttribute('data-src');
      imageObserver.unobserve(img);
    }
  });
});

images.forEach(img => imageObserver.observe(img));

Aber: Nutzen Sie native loading="lazy" wenn möglich - es ist einfacher und performanter.

Dateinamen und URLs

Beschreibende Dateinamen

Schlecht:

IMG_1234.jpg
screenshot-2025-11-22-14-23.png
bild.jpg

Gut:

core-web-vitals-infografik.webp
google-search-console-performance-report.webp
lisa-bergmann-seo-workshop.webp

Vorteile:

• Google versteht den Kontext
• Bessere Image-Search-Rankings
• Professionell

Regeln:

• Kleinbuchstaben
• Bindestriche statt Leerzeichen
• Beschreibend, 3-6 Wörter
• Keywords natürlich einbauen

Organisierte Ordnerstruktur

Schlecht:

/images/IMG_1234.jpg
/images/IMG_1235.jpg
/images/screenshot.png

Gut:

/images/blog/seo-grundlagen/core-web-vitals-infografik.webp
/images/blog/technical-seo/mobile-first-screenshot.webp
/images/author/lisa-bergmann-portrait.webp

Vorteile:

• Einfachere Verwaltung
• Klare Struktur
• URL spiegelt Kontext wider

Strukturierte Daten für Bilder

ImageObject Schema

Für wichtige Bilder (Featured Images, Produktbilder):

{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Bilder für SEO optimieren",
  "image": {
    "@type": "ImageObject",
    "url": "https://example.com/images/blog/bilder-seo.webp",
    "width": 1200,
    "height": 630,
    "caption": "Infografik: Bilder-Optimierung für SEO"
  }
}

Vorteil:
Google kann Rich Results mit Bildern erstellen.

Lizenz-Informationen

Wenn Sie eigene Bilder haben und sie schützen wollen:

{
  "@type": "ImageObject",
  "url": "...",
  "license": "https://creativecommons.org/licenses/by/4.0/",
  "creator": {
    "@type": "Person",
    "name": "Lisa Bergmann"
  }
}

Content Delivery Network (CDN) für Bilder

Warum CDN?

Ein CDN speichert Ihre Bilder auf Servern weltweit. Nutzer laden Bilder vom nächstgelegenen Server - schneller.

Vorteile:

• Schnellere Ladezeiten global
• Automatische Formatkonvertierung (WebP, AVIF)
• Automatische Kompression
• Responsive Image-Generierung

CDN-Anbieter

Kostenlose/Günstige:

• Cloudflare Images: $5/Monat für 100k Bilder
• Cloudinary: Kostenloser Plan für kleine Sites
• imgix: Ab $0 (Pay-as-you-go)

Für Astro (meine Empfehlung):
Astro’s eigenes Image-Optimization (bei Cloudflare Pages gehostet) ist bereits ein CDN.

Beispiel (Cloudinary):

<img src="https://res.cloudinary.com/demo/image/upload/w_800,f_auto,q_auto/sample.jpg">

f_auto = automatisches Format (WebP/AVIF)
q_auto = automatische Qualität
w_800 = 800px Breite

Meine Bilder-Optimierungs-Pipeline

Schritt 1: Export

Wenn ich Bilder erstelle (Screenshots, Grafiken):

• Export in höchster Qualität (PNG oder hochwertiges JPEG)
• Mindestens 1200px Breite für Hauptbilder

Schritt 2: Zuschnitt und Skalierung

Mit Photopea (kostenlose Photoshop-Alternative im Browser):

1. Bild öffnen
2. Auf benötigte Größe skalieren (1200px, 800px, 400px)
3. Zuschneiden auf 16:9 oder 4:3 (konsistentes Format)

Schritt 3: Konvertierung und Kompression

Squoosh (https://squoosh.app/):

1. Bild hochladen
2. WebP auswählen, Qualität 80-85%
3. Optional: AVIF für kritische Bilder
4. Download

Batch-Processing mit Sharp (Node.js):

const sharp = require('sharp');

sharp('input.jpg')
  .resize(1200, 630)
  .webp({ quality: 85 })
  .toFile('output.webp');

Schritt 4: Responsive Versionen

Astro macht das automatisch:

---
import { Image } from 'astro:assets';
import hero from '../images/hero.jpg';
---

<Image src={hero} alt="..." width={1200} height={630} format="webp" />

Astro generiert automatisch mehrere Größen (400w, 800w, 1200w).

Schritt 5: Upload und Einbindung

1. Upload zu /src/images/blog/[article-slug]/
2. Beschreibenden Dateinamen geben
3. In Markdown/Astro einbinden mit Alt-Text
4. loading="lazy" für Bilder below-the-fold

Schritt 6: Testing

Nach dem Veröffentlichen:

1. Lighthouse: Performance-Score prüfen
2. PageSpeed Insights: LCP checken
3. Google Search Console: Neue Bilder in Image-Index?

Tools Übersicht

Tool	Zweck	Kosten	Link
Squoosh	WebP/AVIF-Konvertierung	Kostenlos	squoosh.app
TinyPNG	JPEG/PNG-Kompression	Kostenlos (Limit)	tinypng.com
ImageOptim	Mac Batch-Kompression	Kostenlos	imageoptim.com
Sharp	Node.js Automation	Kostenlos	sharp.pixelplumbing.com
Photopea	Bildbearbeitung (Browser)	Kostenlos	photopea.com
Cloudinary	CDN + Auto-Optimization	Ab $0	cloudinary.com
Lighthouse	Performance-Test	Kostenlos	Chrome DevTools

Häufige Fehler bei Bild-SEO

Fehler 1: Riesige Dateigrößen

Problem:
2-5 MB Bilder, unoptimiert hochgeladen.

Lösung:
WebP, Kompression, richtige Skalierung. Ziel: <100 KB.

Fehler 2: Fehlende Alt-Texte

Problem:
alt="" oder kein Alt-Attribut.

Lösung:
Jedes Bild braucht beschreibenden Alt-Text (außer dekorativ).

Fehler 3: Keine width/height-Attribute

Problem:
Bilder ohne Dimensionen → CLS (Layout Shift).

Lösung:
Immer width und height angeben:

<img src="..." alt="..." width="800" height="600">

Fehler 4: Alles lazy loaden

Problem:
Hero-Bild above-the-fold mit loading="lazy" → schlechter LCP.

Lösung:
Above-the-fold: loading="eager" oder kein Attribut.
Below-the-fold: loading="lazy".

Fehler 5: Nur ein Bildformat

Problem:
Nur JPEG, kein WebP/AVIF.

Lösung:
<picture> Element mit mehreren Formaten:

<picture>
  <source srcset="bild.avif" type="image/avif">
  <source srcset="bild.webp" type="image/webp">
  <img src="bild.jpg" alt="...">
</picture>

Fehler 6: Generische Dateinamen

Problem:
image1.jpg, IMG_1234.jpg, screenshot.png.

Lösung:
Beschreibende Namen: seo-checkliste-infografik.webp.

Bilder-SEO Checklist

Vor dem Upload:

• Bild auf benötigte Größe skaliert (max 1200-1920px Breite)
• Komprimiert (WebP 80-85% oder JPEG 85-90%)
• Beschreibender Dateiname (z.B. core-web-vitals-infografik.webp)
• Dateigröße <150 KB (idealerweise <100 KB)

Beim Einbinden:

• Alt-Text geschrieben (5-15 Wörter, beschreibend)
• width und height Attribute gesetzt
• loading="lazy" für Bilder below-the-fold
• loading="eager" für Hero-/Above-fold-Bilder
• Responsive srcset für verschiedene Bildschirmgrößen

Nach dem Upload:

• Lighthouse Performance-Test (Score 90+?)
• LCP < 2.5s?
• CLS < 0.1?
• Bild wird in Google Bildersuche indexiert?

Vierteljährlich:

• Große Bilder identifizieren (PageSpeed Insights → “Bilder optimieren”)
• Ungenutzte Bilder löschen
• Neue WebP/AVIF-Versionen für alte JPEGs erstellen

Fallstudie: Von 4.2 MB zu 85 KB

Ausgangssituation:

• Artikel “Was ist SEO?” mit Hero-Bild
• Bild: 4000x3000px JPEG, 4.2 MB
• Lighthouse Performance: 42
• LCP: 6.8 Sekunden
• Mobile völlig unbenutzbar

Optimierung:

1. Skalierung: 4000x3000px → 1200x800px
2. Format: JPEG → WebP
3. Kompression: 100% → 85% Qualität
4. Responsive: Zusätzlich 800px und 400px Versionen
5. Lazy Loading: Nein (above-the-fold)
6. width/height: Attribute hinzugefügt

Resultat:

• Dateigröße: 4.2 MB → 85 KB (-98%)
• Lighthouse Performance: 42 → 89 (+47 Punkte!)
• LCP: 6.8s → 2.1s (-69%)
• Mobile komplett nutzbar

Zeitaufwand: 10 Minuten
Kosten: 0 Euro
ROI: Unbezahlbar

Fazit: Bilder sind kritisch für SEO

Unoptimierte Bilder sind der häufigste Performance-Killer. Die gute Nachricht: Es ist einfach zu beheben.

Die 5 Kernpunkte:

1. WebP nutzen: 25-35% kleiner bei gleicher Qualität
2. Richtig skalieren: Nicht 4000px laden, wenn 1200px reichen
3. Alt-Texte schreiben: Beschreibend, 5-15 Wörter, keyword-relevant
4. Lazy Loading: Ja, aber nicht above-the-fold
5. width/height setzen: Verhindert CLS

Nächste Schritte:

1. Lighthouse-Audit Ihrer Website durchführen
2. Größte Bilder identifizieren (PageSpeed Insights)
3. Top 10 Seiten optimieren (WebP, Kompression, Alt-Texte)
4. Pipeline für neue Bilder etablieren

Weiterführende Artikel:

• Core Web Vitals optimieren
• Mobile-First Indexing verstehen
• Technical SEO: robots.txt & Sitemap

Bilder-Optimierung hat meinen Performance-Score von 42 auf 89 gebracht. Was könnte sie für Ihre Website tun?

---

Über die Autorin:
Lisa Bergmann ist SEO Consultant mit Spezialisierung auf Technical SEO und Performance-Optimierung. Sie hilft kleinen Unternehmen, durch intelligente Bilder-Optimierung schnellere, besser rankende Websites zu erstellen. Mehr über Lisa

Letzte Aktualisierung: 22. November 2025