Bilder SEO: WebP, Alt-Texte und Lazy Loading richtig einsetzen

Warum Bilder-Optimierung wichtig ist

Bilder machen auf den meisten Websites über 50% des gesamten Datenvolumens aus. Ein unkomprimiertes Foto kann 2–5 MB groß sein — während deine gesamte HTML-Datei vielleicht 50 KB wiegt. Das bedeutet: Bilder sind der größte Hebel, um die Ladezeit deiner Website zu verbessern.

Darüber hinaus sind Bilder eine eigene SEO-Chance. Google Bilder-Suche generiert erheblichen Traffic. Und Alt-Texte helfen sowohl der Barrierefreiheit als auch dem Verständnis von KI-Systemen, die deine Inhalte analysieren.

Moderne Bildformate: WebP und AVIF

WebP ist ein von Google entwickeltes Bildformat, das bei vergleichbarer Qualität 25–34% kleiner ist als JPEG und deutlich kleiner als PNG. Es wird von allen modernen Browsern unterstützt (Chrome, Firefox, Safari, Edge). Es gibt keinen Grund mehr, JPEG oder PNG als Standardformat zu verwenden.

AVIF ist noch neuer und komprimiert noch stärker als WebP — bis zu 50% kleiner als JPEG bei gleicher Qualität. Die Browser-Unterstützung ist mittlerweile gut (Chrome, Firefox, Safari ab Version 16), aber noch nicht so universell wie WebP.

Empfehlung: Verwende WebP als Standardformat. Es bietet die beste Balance aus Kompression, Qualität und Browser-Kompatibilität. Konvertiere deine Bilder mit kostenlosen Online-Tools wie Squoosh (squoosh.app) oder dem Kommandozeilen-Tool cwebp.

Alt-Texte: Beschreibungen für Mensch und Maschine

Der Alt-Text (Alternativtext) beschreibt den Inhalt eines Bildes in Textform. Er wird angezeigt, wenn ein Bild nicht laden kann, von Screenreadern für sehbehinderte Nutzer vorgelesen, und von Suchmaschinen und KI-Modellen genutzt, um den Bildinhalt zu verstehen.

Gute Alt-Texte sind beschreibend und konkret: alt="Diagramm der drei Core Web Vitals Metriken LCP, INP und CLS mit ihren Grenzwerten" ist besser als alt="Bild" oder alt="Core Web Vitals".

Vermeide Keyword-Stuffing in Alt-Texten. Der Text sollte das Bild ehrlich beschreiben, nicht als Gelegenheit für zusätzliche Keywords missbraucht werden. Google erkennt das und wertet es negativ.

Lazy Loading: Bilder erst laden wenn sie sichtbar werden

Lazy Loading bedeutet, dass Bilder erst geladen werden, wenn der Nutzer zu ihnen scrollt. Bilder, die unterhalb des sichtbaren Bereichs liegen, werden beim initialen Seitenaufruf nicht geladen. Das reduziert die anfängliche Ladezeit und verbessert den LCP-Wert.

Die Implementierung ist einfach: Füge das Attribut loading="lazy" zu allen Bildern hinzu, die nicht im sichtbaren Bereich beim Seitenaufruf liegen:

<img src="bild.webp" alt="Beschreibung" width="800" height="450" loading="lazy">

Wichtig: Das Bild im sichtbaren Bereich (das LCP-Element) sollte NICHT lazy geladen werden. Setze dort stattdessen fetchpriority="high", damit es so schnell wie möglich geladen wird.

Width und Height: Layout-Verschiebungen vermeiden

Definiere immer width und height Attribute für Bilder. Ohne diese Attribute reserviert der Browser keinen Platz für das Bild — und wenn es dann lädt, verschiebt sich das gesamte Layout. Das erhöht den CLS-Wert (Cumulative Layout Shift) und führt zu einer schlechteren Nutzererfahrung.

Checkliste für jedes Bild

Format: WebP verwenden, nicht JPEG oder PNG.

Größe: Nicht größer als nötig. Ein Bild, das auf der Website 800px breit angezeigt wird, muss nicht mit 4000px Breite hochgeladen werden.

Kompression: Qualitätsstufe 80–85% reicht für die meisten Anwendungen. Darunter sieht man Artefakte, darüber spart man kaum Dateigröße.

Alt-Text: Beschreibend, konkret, ohne Keyword-Stuffing.

Width/Height: Immer definieren.

Lazy Loading: Für alle Bilder außerhalb des initialen sichtbaren Bereichs.

Häufige Fragen

Zuletzt aktualisiert: 25. März 2026