SEO und Bilder: die goldenen Regeln, um Ihre Core Web Vitals zu verbessern

Wenn das Bild Ihr Google-Ranking bestimmt

Seit der Einführung der Core Web Vitals durch Google ist die Ladegeschwindigkeit kein bloßer Ergonomie-Bonus mehr: Sie ist ein direktes SEO-Ranking-Kriterium. Und der große Schuldige für einen Core-Web-Vitals-Wert im roten Bereich ist fast immer derselbe Indikator: der LCP (Largest Contentful Paint).

Der LCP misst die Zeit, die nötig ist, um das größte sichtbare Element auf dem Bildschirm anzuzeigen (in der Regel das „Hero“-Banner oder das Hauptbild des Produkts). Braucht es länger als 2,5 Sekunden, um zu erscheinen, bestraft Google Sie — und Ihre Konkurrenten, deren gleiche Seite in 1,8 s lädt, überholen Sie in den SERPs.

Die 3 Core Web Vitals, die Sie kennen sollten

Metrik	Misst	Google-Schwelle „Good“
LCP (Largest Contentful Paint)	Anzeigezeit des größten Elements	≤ 2,5 s
INP (Interaction to Next Paint)	Latenz der Nutzerinteraktionen	≤ 200 ms
CLS (Cumulative Layout Shift)	Visuelle Stabilität (Layout-Sprünge)	≤ 0,1

Von den dreien werden zwei von den Bildern beeinflusst:

• der LCP (schweres Hero-Bild = hoher LCP);
• der CLS (Bild ohne Abmessungen = Layout-Sprung beim Laden).

Der neue König: das AVIF-Format

Sie kennen JPG, Sie beherrschen WebP. Es ist Zeit, eine Stufe höherzugehen.

Das AVIF (AV1 Image File Format) ist der Codec der neuen Generation, unterstützt von Netflix, Google und Apple. Seine Effizienz ist gewaltig: eine AVIF-Datei ist:

• im Schnitt 50 % leichter als ein JPG bei gleichwertiger Bildqualität;
• 20 % leichter als ein WebP;
• überlegen im Umgang mit Komprimierungsartefakten (weniger Farbbänder bei Verläufen, weniger JPEG-Blöcke in einheitlichen Bereichen);
• kompatibel mit 10-Bit-Transparenz (gegenüber 8 Bit bei PNG/WebP).

Wenn Ihr LCP ein Kopfbild ist, ist dessen Umstellung von JPG auf AVIF der stärkste SEO-„Quick Win“, den Sie heute umsetzen können — ohne den Rest Ihres Codes anzurühren.

Das <picture>-Tag: AVIF mit Fallback ausliefern

AVIF wird im Mai 2026 von ~92 % der Browser unterstützt — aber noch nicht von allen Safari-Versionen. Die beste Praxis besteht darin, AVIF vorrangig auszuliefern, mit einem Fallback auf WebP und dann JPG:

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="…"
       width="1920" height="1080"
       loading="eager" fetchpriority="high">
</picture>

Die Schlüsselpunkte dieser Struktur:

• width und height explizit → vermeiden den CLS, indem sie den Platz vor dem Laden des Bildes reservieren;
• loading="eager" beim Hauptbild (über dem Falz) → es ist kontraproduktiv, lazy beim LCP-Bild zu verwenden;
• fetchpriority="high" → weist den Browser an, diesen Download vor den anderen Ressourcen zu priorisieren.

Für Bilder unterhalb des Falzes (Katalog, Blogartikel) gilt das Gegenteil: loading="lazy", um den LCP des sichtbaren Bereichs nicht zu blockieren.

Messen, um zu steuern: die Tools

Vor und nach jeder Optimierung sollten Sie messen:

• PageSpeed Insights (pagespeed.web.dev) → Lighthouse-Score + CrUX-Daten (Chrome User Experience Report) unter realen Bedingungen;
• GTmetrix → detailliertes Wasserfalldiagramm der Anfragen, Identifikation der genauen Datei, die den LCP belastet;
• WebPageTest.org → Tests an mehreren Standorten und in mehreren Browsern;
• Chrome DevTools → Performance → Web Vitals → lokale Messung unter Entwicklungsbedingungen.

Das Mindestziel für SEO: 75 % der Besuche im grünen Bereich bei den Core Web Vitals (Googles Umschlagschwelle).

Die „Zero-Upload“-Architektur für Webmaster

Hunderte Bilder für einen Kunden zu optimieren stellt eine technische und ethische Herausforderung dar. Die Nutzung von Drittanbieter-APIs oder klassischen Online-Konvertern bedeutet, das geistige Eigentum Ihrer Kunden auf unbekannte Server hochzuladen, mit frustrierenden Größenbeschränkungen — und einem erheblichen DSGVO-Risiko, wenn die Bilder identifizierbare Personen enthalten.

Die Zukunft gehört dem Client-Side Processing (clientseitige Verarbeitung). Mit den WebAssembly-Technologien ist es nun möglich, komplexe Codecs (wie libavif, libheif, mozjpeg) zu kompilieren, um sie direkt im Browser des Webmasters laufen zu lassen.

Kein Bild verlässt das Gerät des Profis. Kein Leck-Risiko. Keine Größenbeschränkung außer dem verfügbaren RAM.

Checkliste zur SEO-Bildoptimierung

Vor jeder Veröffentlichung:

1. Passendes Format: AVIF (oder WebP als Fallback) für Web-Bilder, JPG nur zur Abwärtskompatibilität;
2. Kalibrierte Abmessungen: nicht breiter als die tatsächliche Anzeige (max. 1200 px für Artikelinhalte, 1920 px für Hero-Bilder);
3. Qualität 80–85 bei komprimierten Bildern;
4. width und height explizit im HTML → Anti-CLS;
5. loading="lazy" außerhalb des sichtbaren Bereichs, eager für das LCP-Bild;
6. alt beschreibend (SEO + Barrierefreiheit);
7. Beschreibender Dateiname (rotes-seidenkleid-sale.avif > IMG_8421.jpg).

Bringen Sie Ihre Website auf Google-Standard (sofort und kostenlos)

Testen Sie die Leistung der lokalen Konvertierung. Nehmen Sie das schwerste Bild Ihrer Startseite und wandeln Sie es mit unserer WebAssembly-Engine in AVIF um. Das erledigt der RAM Ihres eigenen Geräts: kein Upload, absolute Sicherheit für die Assets Ihrer Kunden und perfekte finale Dateien, um Ihre Core-Web-Vitals-Audits zu bestehen.

Geschrieben von Nikola Markovic · veröffentlicht am 19. Mai 2026.