Bilder für Core Web Vitals optimieren

Wie Bilder die Core Web Vitals beeinflussen

Bilder sind auf 85 % der Desktop-Seiten und 76 % der mobilen Seiten für den Largest Contentful Paint verantwortlich, laut dem 2025 Web Almanac. Das macht Bildoptimierung zur wirkungsvollsten Maßnahme, die Sie für Ihre Core Web Vitals ergreifen können. Doch Bilder beeinflussen nicht nur die Ladegeschwindigkeit. Sie können Layout-Verschiebungen verursachen und auf bildlastigen Seiten sogar die Interaktivität verlangsamen. Dieser Leitfaden deckt jeden Aspekt ab: von HTML-Attributen und Preloading über responsive Bilder und moderne Formate bis hin zu den Strategien, die Sie auf jedes Bild Ihrer Seite anwenden sollten.

Zuletzt überprüft von Arjen Karel im Februar 2026

Welche Core Web Vitals können Bilder beeinflussen?

Es mag Sie überraschen, dass Bilder alle Core Web Vitals beeinflussen können. Bilder, die zu spät während des Renderings zum Download eingereiht werden oder schlicht zu groß sind, führen in der Regel zu einem hohen LCP-Wert. Wenn Bildabmessungen nicht gesetzt sind oder sich während der Ladephase ändern, können Bilder auch den CLS-Wert beeinflussen. Und schließlich können sie sogar den INP beeinflussen, wenn die Bilddekodierung zu viel Arbeit auf dem Main Thread verursacht. Schauen wir uns das genauer an:

Largest Contentful Paint

Largest Contentful Paint (LCP) misst, wie lange es dauert, bis das größte Element auf der Seite (z. B. ein Bild oder Video) für den Nutzer sichtbar wird. Laut dem 2025 Web Almanac sind Bilder auf 85 % der Desktop-Seiten und 76 % der mobilen Seiten das LCP-Element. Wenn ein Bild zu spät eingereiht wird oder zu lange zum Laden braucht, kann es den LCP-Wert der Seite erheblich verschlechtern.

Cumulative Layout Shift

Cumulative Layout Shift (CLS) misst, wie stark sich der Inhalt einer Seite während des Ladens verschiebt. Bilder können Layout-Verschiebungen verursachen, wenn sie nicht korrekt dimensioniert sind oder nach dem Laden der Seite eingefügt werden, wodurch andere Elemente verschoben werden. Der 2025 Web Almanac berichtet, dass 65 % der Desktop-Seiten noch mindestens ein Bild ohne explizite Abmessungen haben.

Interaction to Next Paint (INP)

Bilder können auch Interaction to Next Paint (INP) beeinflussen, das die Zeit misst, die eine Seite benötigt, um nach einer Nutzerinteraktion visuell zu reagieren. Wenn zu viele große Bilder dekodiert werden müssen, kann die Seite langsamer auf Nutzerinteraktionen reagieren, was zu einem schlechten INP-Wert führt. Dies tritt am häufigsten auf Produktlistenseiten auf, wo Hunderte von Bildern um Ressourcen konkurrieren.

Schritt 1: Das HTML-Bildelement für Geschwindigkeit optimieren

Src-Attribut

Gibt die URL des Bildes an. Diese Eigenschaft ist essenziell, da sie dem Browser mitteilt, wo das Bild zu finden ist.

Width- und Height-Attribut

Gibt die Breite und Höhe des Bildes in Pixeln an. Diese Eigenschaften sind wichtig für die korrekte Darstellung des Bildes auf der Seite, da sie die Größe des Bildcontainers und die Einpassung des Bildes definieren. Setzen Sie immer sowohl Width als auch Height, um Layout-Verschiebungen zu verhindern.

Alt-Attribut

Gibt einen alternativen Text für das Bild an, falls es nicht angezeigt werden kann. Dies ist wichtig für die Barrierefreiheit, da es sehbehinderten Nutzern hilft zu verstehen, was das Bild zeigt. Es ist auch wichtig für die Suchmaschinenoptimierung (SEO), da Suchmaschinen den Alt-Text verwenden, um den Inhalt des Bildes zu verstehen.

Loading-Attribut (Lazy Loading)

Gibt an, wie der Browser das Bild laden soll (lazy, eager oder auto). Diese Eigenschaft ist wichtig zur Verbesserung der Seitenleistung, da sie es ermöglicht, Bilder asynchron und nur bei Bedarf zu laden. Setzen Sie niemals loading="lazy" auf das LCP-Bild. Laut dem 2025 Web Almanac laden 16 % der Seiten ihr LCP-Bild immer noch lazy, was einer der häufigsten Performance-Fehler im Web ist.

Srcset-Attribut

Sizes-Attribut

Decoding-Attribut

Fetchpriority-Attribut

Das Fetchpriority-Attribut gibt die Priorität des Ressourcenabrufs relativ zu anderen Ressourcen auf der Seite an. Das Attribut kann einen von drei Werten haben: "high", "low" oder "auto". Eine Ressource mit hoher Priorität wird vor Ressourcen mit niedrigerer Priorität geladen. Stand 2026 wird fetchpriority in allen modernen Browsern unterstützt (Chrome 102+, Safari 17.2+, Firefox 132+, Edge 102+) und kann sicher in der Produktion eingesetzt werden. Nur 17 % der Seiten verwenden es auf ihrem LCP-Bild, was bedeutet, dass die überwiegende Mehrheit der Websites einen einfachen Gewinn verpasst.

Schritt 2: Sicherstellen, dass das Bild so früh wie möglich zum Download eingereiht wird

Der zweite Schritt nach der HTML-Optimierung ist die Betrachtung des Bild-Schedulings. In vielen Fällen ist der größte Engpass bei der Auswirkung von Bildern auf die LCP-Metrik die späte Einreihung. Wenn ein Browser die Möglichkeit hat, das LCP-Element früh während des Rendering-Prozesses herunterzuladen, steht das Bild dem Browser so früh wie möglich zur Verfügung und der Browser kann dieses Element früh im Rendering-Prozess darstellen.

Klingt einfach, oder? Aber wie stellen wir sicher, dass das Bild so früh wie möglich zum Download eingereiht wird?

Das LCP-Element vorladen

Der effektivste Weg, einen frühen Download sicherzustellen, ist das Vorladen des Bildes. Das Vorladen des Bildes erfolgt mit einem einfachen Tag am Anfang des <head>-Elements. Zum Beispiel:

<link rel="preload" as="image" href="image.jpg">

Dieser einfache Tag teilt dem Browser mit, dass wir "image.jpg" sehr bald benötigen werden, und der Browser beginnt sofort mit dem Herunterladen dieser Datei.

Auf den von CoreDash überwachten Websites erzielen 83 % der Seitenaufrufe mit einem vorgeladenen LCP-Bild ein 'gutes' LCP-Ergebnis, verglichen mit 65 % ohne Vorladen.

Das LCP-Element eager laden

Hohe Fetchpriority verwenden

Wenn Sie aus irgendeinem Grund das LCP-Element nicht vorladen können, stellen Sie zumindest sicher, dass das Element das Fetchpriority-Attribut auf high gesetzt hat. Dies gibt dem Browser den Hinweis, dass ein Bild für die Seite wichtig ist, und der Browser wird es mit hoher Priorität herunterladen. Bitte beachten Sie, dass die Verwendung von fetchpriority="high" normalerweise nicht so effizient ist wie das Vorladen eines Bildes!

Schritt 3: Sicherstellen, dass das Bild so schnell wie möglich heruntergeladen wird

Der dritte Schritt ist sicherzustellen, dass Sie keine wertvollen Netzwerkressourcen für Bilder verschwenden, die größer sind als nötig. Sie können dies durch responsive Bilder, Komprimierung und die Verwendung neuer, schnellerer Bildformate erreichen.

Responsive Bilder

Hier ist ein responsives Bild mit srcset und sizes:

<img
  src="hero-800.jpg"
  srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw, 800px"
  width="800" height="450" alt="Descriptive alt text">

Der Browser wählt das passendste Bild basierend auf der Viewport-Breite aus. Für lazy geladene Below-the-Fold-Bilder können Sie auch sizes="auto" verwenden (unterstützt in Chrome 126+ und Edge 126+), wodurch der Browser die korrekte Größe automatisch basierend auf dem CSS-Layout des Bildes berechnet.

Bildkomprimierung

Neue und schnellere Bildformate

Bilder gehören oft zu den größten Ressourcen einer Webseite und können die Ladegeschwindigkeit einer Seite erheblich verlangsamen, wenn sie nicht optimiert sind. Moderne Bildformate wie WebP und AVIF bieten bei gleicher visueller Qualität eine deutlich bessere Komprimierung als JPEG.

WebP wird von praktisch allen Browsern unterstützt (~99 % globale Unterstützung) und reduziert die Dateigröße im Vergleich zu JPEG typischerweise um 25–35 %. AVIF geht noch weiter mit über 50 % Einsparung gegenüber JPEG und hat mittlerweile 94,7 % Browser-Unterstützung (Chrome 85+, Firefox 93+, Safari 16.4+). Trotzdem zeigt der 2025 Web Almanac, dass AVIF nur bei 0,7 % der LCP-Bilder verwendet wird, während JPEG mit 57 % immer noch dominiert. Das ist eine enorme Chance.

Verwenden Sie das <picture>-Element, um das beste Format zu liefern, das jeder Browser unterstützt:

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" width="800" height="450" alt="Descriptive alt text">
</picture>

Der Browser versucht zuerst AVIF, fällt auf WebP zurück und verwendet JPEG als letzte Option. Wenn Sie sich für die Zukunft interessieren, lesen Sie über JPEG XL und den aktuellen Stand der Browser-Unterstützung.

Schritt 4: Layout-Verschiebungen eliminieren!

Bilder, die während des Ladens ihre Größe ändern, verursachen eine Layout-Verschiebung. So einfach ist das. Es gibt 3 Hauptgründe, warum Bilder Layout-Verschiebungen verursachen (es gibt weitere, aber diese 3 sind die häufigsten):

1. Fehlende Bildabmessungen

2. Styling-Probleme

Normalerweise werden Bilder durch einen einfachen CSS-Trick daran gehindert, größer als der Viewport zu werden:

img{
   max-width:100%;
   height:auto;
}

Das ist ein großartiger Trick und Sie sollten ihn verwenden. Leider sehe ich regelmäßig Varianten dieses Tricks, die eine Layout-Verschiebung verursachen. Zum Beispiel durch Hinzufügen von width:auto:

img{
   max-width:100%;
   height:auto;
   width:auto;
}

Dies führt dazu, dass jedes Bild mit einer automatischen Breite und Höhe gerendert wird. Das bedeutet normalerweise, dass der Browser das Bild bei 0x0px rendert, bevor das Bild heruntergeladen wurde.

3. Platzhalter

Einige JavaScript-basierte Lazy-Loading-Skripte verwenden Platzhalter. Wenn Sie einen CSS-Trick wie das oben erwähnte max-width:100% und height:auto verwenden, wird die automatische Höhe des quadratischen Platzhalters nicht mit dem Height-Attribut des Bildes übereinstimmen. Im Grunde wird das Bild zuerst mit dem quadratischen Platzhalter bei 720x720 gerendert und wenn das endgültige Bild heruntergeladen wurde, wird es bei 720x180 gerendert:

<img
  src="1x1placeholder.png"
  data-src="hero.png"
  width="720"
  height="180"
  style="height:auto;max-width:100%"
>

Schritt 5: Den Main Thread schützen

Als Nächstes muss sichergestellt werden, dass nicht zu viele Bilder gleichzeitig auf dem Main Thread dekodiert werden. Normalerweise ist das kein Problem, aber ich habe es auf Produktlistenseiten schon oft erlebt (wo manchmal bis zu 500 Bilder um Ressourcen konkurrieren!).

Der Trick besteht darin, allen Bildern decoding="async" hinzuzufügen, damit diese Bilder auf einem separaten Thread dekodiert werden können. Versuchen Sie außerdem zu vermeiden, dass so viele Bilder auf einmal dekodiert werden, indem Sie allen Below-the-Fold- und versteckten Bildern loading="lazy" hinzufügen.

Schritt 6: Die richtige Strategie für jedes Bild wählen!

Bildstrategien für das LCP-Element

Das LCP-Element ist in der Regel das wichtigste visuelle Element. Daher müssen wir es wirklich priorisieren.

1. Laden Sie das Bild früh im Head der Seite mit folgendem Code vor: <link rel="preload" as="image" href="path-to-img.png">
2. Teilen Sie dem Browser mit, dass dieses Bild nicht lazy geladen werden soll, indem Sie loading="eager" setzen oder das loading-Attribut weglassen
3. Geben Sie dem Browser den Hinweis, dass dieses Bild mit hoher Priorität heruntergeladen werden soll, indem Sie fetchpriority="high" verwenden (wenn Sie das Bild vorladen, können Sie diesen Schritt überspringen)
4. Setzen Sie decoding="sync", da dieses Element so wichtig ist, dass wir es auf dem Main Thread dekodieren wollen

Hier ist ein vollständiges Beispiel eines optimierten, responsiven LCP-Bildes mit Vorladen:

<!-- In <head> -->
<link rel="preload" as="image" href="hero-800.jpg"
  imagesrcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1200.jpg 1200w"
  imagesizes="(max-width: 600px) 100vw, 800px">

<!-- In <body> -->
<img src="hero-800.jpg"
  srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw, 800px"
  width="800" height="450" alt="Descriptive alt text"
  fetchpriority="high" decoding="sync">

Bildstrategie für Logos und andere sichtbare (Nicht-LCP-)Bilder

Sichtbare Bilder sollten relativ früh während des Seitenladens geladen werden, aber vorzugsweise nach dem LCP-Element. Wir können dies erreichen, indem wir das LCP-Element vorladen. Das gibt diesen sichtbaren Bildern ihre natürliche, korrekte Download-Reihenfolge.

1. Teilen Sie dem Browser mit, dass dieses Bild nicht lazy geladen werden soll, indem Sie loading="eager" setzen oder das loading-Attribut weglassen
2. Setzen Sie decoding="async", da dieses Element sicher abseits des Main Threads dekodiert werden kann!

Bildstrategie für Below-the-Fold-Bilder

Alle Below-the-Fold-Bilder sollten lazy geladen werden. So einfach ist das! Es gibt keine Ausnahmen!

1. Teilen Sie dem Browser mit, dass dieses Bild lazy geladen werden soll, indem Sie loading="lazy" setzen
2. Setzen Sie decoding="async", da dieses Element sicher abseits des Main Threads dekodiert werden kann!

Hintergrundbilder vermeiden

Wenn Sie Hintergrundbilder verwenden, sollten Sie das überdenken. Hintergrundbilder können nicht lazy geladen werden, und Sie können weder die Decoding-Eigenschaft noch die Fetchpriority steuern. Hintergrundbilder sind in der Regel nicht responsiv, was Sie wahrscheinlich viel Bandbreite kostet. Am wichtigsten ist jedoch, dass Hintergrundbilder normalerweise erst entdeckt werden, nachdem der Browser die CSS-Dateien heruntergeladen hat. Das ist fast nie der richtige Zeitpunkt, um einen Bild-Download auszulösen! Lesen Sie, warum Hintergrundbilder problematisch sind und wie Sie Hintergrundbilder verzögern können, wenn Sie keine andere Wahl haben.

Sie können normale Image-Tags in Kombination mit der CSS-Eigenschaft object-fit:cover verwenden, damit sich normale Bilder wie Hintergrundbilder verhalten!

Die Auswirkungen mit Real User Monitoring überwachen

Überprüfen Sie nach der Anwendung dieser Optimierungen, ob sie die Leistung für echte Nutzer tatsächlich verbessern. Lab-Tools wie Lighthouse können bestätigen, dass Ihre Änderungen korrekt sind, aber nur Real User Monitoring zeigt Ihnen die tatsächliche Auswirkung auf Ihre Besucher. Verfolgen Sie Ihren LCP, CLS und INP über die Zeit, um zu bestätigen, dass Ihre Bildoptimierungen wie erwartet funktionieren.