Bilder für Core Web Vitals optimieren

Wie Bilder die Core Web Vitals beeinflussen

Bilder sind laut dem Web Almanac 2025 auf 85 % der Desktop-Seiten und 76 % der mobilen Seiten für den Largest Contentful Paint verantwortlich. Das macht die Bildoptimierung zur wirkungsvollsten Maßnahme, die Sie für Ihre Core Web Vitals ergreifen können. Aber Bilder beeinflussen nicht nur die Ladegeschwindigkeit. Sie können Layoutverschiebungen verursachen und auf bildlastigen Seiten sogar die Interaktivität verlangsamen. Dieser Leitfaden deckt jeden Blickwinkel ab: von HTML-Attributen und Preloading bis hin zu responsiven Bildern, modernen Formaten und 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?

Sie sind vielleicht überrascht zu erfahren, dass Bilder alle Core Web Vitals beeinflussen können. Wenn Bilder während des Renderings spät zum Download eingereiht werden oder einfach zu groß sind, führt dies normalerweise zu einem schlechten LCP-Wert. Wenn Bilddimensionen nicht festgelegt sind oder sich während der Ladephase ändern, können Bilder auch den CLS-Wert beeinflussen. Und schließlich können sie, wenn die Bilddekodierung zu viel Arbeit im Main Thread beansprucht, sogar die INP beeinflussen. Lassen Sie uns das genauer betrachten:

Largest Contentful Paint

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

Cumulative Layout Shift

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

Interaction to Next Paint (INP)

Bilder können sich auch auf die Interaction to Next Paint (INP) auswirken, welche die Zeit misst, die eine Seite benötigt, um visuell zu reagieren, nachdem ein Nutzer mit ihr interagiert hat. Wenn zu viele große Bilder dekodiert werden müssen, kann es länger dauern, bis die Seite auf Nutzerinteraktionen reagiert, was zu einem schlechten INP-Wert führt. Dies kommt am häufigsten auf Produktlistenseiten vor, auf denen Hunderte von Bildern um Ressourcen konkurrieren.

Schritt 1: Das HTML-Bildelement auf Geschwindigkeit optimieren

Src-Attribut

Gibt die URL des Bildes an. Diese Eigenschaft ist unerlässlich, 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, um das Bild korrekt auf der Seite zu rendern, da sie die Größe des Bildcontainers definieren und wie das Bild hineinpasst. Setzen Sie immer sowohl width als auch height, um Layoutverschiebungen zu verhindern.

Alt-Attribut

Gibt einen alternativen Text für das Bild an, falls es nicht angezeigt werden kann. Dies ist für die Barrierefreiheit wichtig, da es sehbehinderten Nutzern hilft zu verstehen, worum es auf dem Bild geht. 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 für die Verbesserung der Seiten-Performance, da sie es ermöglicht, Bilder asynchron und nur bei Bedarf zu laden. Setzen Sie niemals loading="lazy" für das LCP-Bild. Laut dem Web Almanac 2025 laden immer noch 16 % der Seiten ihr LCP-Bild per Lazy-Load, 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 Abrufs einer Ressource im Verhältnis 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 niedrigeren Prioritäten 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 verwendet werden. Nur 17 % der Seiten verwenden es für ihr LCP-Bild, was bedeutet, dass der überwiegenden Mehrheit der Websites ein einfacher Gewinn entgeht.

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

Der zweite Schritt, nachdem Sie das HTML optimiert haben, ist die Betrachtung der Bildplanung (Scheduling). In vielen Fällen ist der größte Engpass in Bezug auf Bilder, die die LCP-Metrik beeinflussen, das späte Einreihen (Late Scheduling). Wenn ein Browser die Chance hat, das LCP-Element früh während des Render-Prozesses herunterzuladen, steht das Bild dem Browser so früh wie möglich zur Verfügung und der Browser kann früh im Render-Prozess beginnen, dieses Element zu zeichnen (Paint).

Klingt einfach, oder? Nun, wie stellen wir sicher, dass das Bild so früh wie möglich für den Download in die Warteschlange eingereiht wird?

Das LCP-Element per Preload laden

Der effektivste Weg, um einen frühen Download sicherzustellen, ist, das Bild im Voraus zu laden (Preload). Das Preloading des Bildes erfolgt mit einem einfachen Tag am Anfang des <head>-Elements. Zum Beispiel:

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

Dieses einfache Tag teilt dem Browser mit, dass wir „image.jpg“ ziemlich bald benötigen werden, und der Browser beginnt sofort mit dem Herunterladen dieser Datei.

Auf von CoreDash überwachten Websites erzielen 83 % der Seitenaufrufe mit einem per Preload geladenen LCP-Bild beim LCP die Bewertung „gut“, verglichen mit 65 % ohne Preloading.

Das LCP-Element per Eager Load laden

Hohe fetchpriority verwenden

Wenn Sie aus irgendeinem Grund das LCP-Element nicht per Preload laden können, stellen Sie zumindest sicher, dass für das Element das fetchpriority-Attribut auf high gesetzt ist. 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 Preloading eines Bildes!

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

Das Dritte, was Sie tun müssen, ist sicherzustellen, dass Sie keine wertvollen Netzwerkressourcen für Bilder verschwenden, die größer sind, als sie sein sollten. Dies erreichen Sie durch die Verwendung von responsiven Bildern, Komprimierung und neuen und schnelleren Bildformaten.

Responsive Bilder

Hier ist ein responsives Bild, das srcset und sizes verwendet:

<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 basierend auf der Viewport-Breite das am besten geeignete Bild aus. Für per Lazy-Load geladene „Below-the-fold“-Bilder können Sie auch sizes="auto" verwenden (unterstützt in Chrome 126+ und Edge 126+), wodurch der Browser die richtige Größe automatisch basierend auf dem CSS-Layout des Bildes berechnen kann.

Bildkomprimierung

Neue und schnellere Bildformate

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

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

Verwenden Sie das <picture>-Element, um das beste Format bereitzustellen, das der jeweilige 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 wird zuerst AVIF versuchen, auf WebP zurückgreifen und JPEG als letzten Ausweg verwenden. Wenn Sie neugierig auf die Zukunft sind, lesen Sie mehr über JPEG XL und seinen aktuellen Browser-Unterstützungsstatus.

Schritt 4: Layout Shift beseitigen!

Bilder, die während des Ladevorgangs ihre Größe ändern, verursachen einen Layout Shift. So einfach ist das. Dieser Abschnitt behandelt die 3 häufigsten Gründe. Den vollständigen Leitfaden zu allen CLS-Ursachen durch Bilder und Medien (einschließlich Videos, Iframes, Art Direction, Nichtübereinstimmungen bei responsiven Bildern und Lazy Loading) finden Sie unter Wie Bilder und Medien Layout Shifts verursachen.

1. Fehlende Bilddimensionen

2. Styling-Probleme

Normalerweise wird durch einen einfachen CSS-Trick verhindert, dass Bilder größer als der Viewport 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 einen Layout Shift 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 auto width und height gerendert wird. Das bedeutet in der Regel, dass der Browser das Bild mit 0x0px rendert, bevor das Bild heruntergeladen wurde.

3. Platzhalter

Einige JavaScript-basierte Lazy-Loading-Skripte verwenden Platzhalter. Wenn Sie einen CSS-Trick wie den oben erwähnten max-width:100% und height:auto verwenden, entspricht die automatische Höhe (auto height) des quadratischen Platzhalters nicht dem height-Attribut des Bildes. 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 im Main Thread dekodiert werden. Normalerweise ist dies kein Problem, aber ich habe es oft auf Produktlistenseiten gesehen (wo manchmal bis zu 500 Bilder um Ressourcen konkurrieren!).

Der Trick besteht darin, allen Bildern decoding="async" hinzuzufügen, um sicherzustellen, dass diese Bilder in einem separaten Thread dekodiert werden können. Versuchen Sie auch 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 normalerweise das wichtigste visuelle Element. Daher müssen wir dieses wirklich priorisieren.

1. Laden Sie das Bild frühzeitig im Head der Seite per Preload mit diesem Code: <link rel="preload" as="image" href="path-to-img.png">
2. Teilen Sie dem Browser mit, dass dieses Bild nicht per Lazy Load 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 per Preload laden, können Sie diesen Teil überspringen)
4. Setzen Sie decoding="sync", da dieses Element so wichtig ist, dass wir es im Main Thread dekodieren möchten

Hier ist ein vollständiges Beispiel für ein optimiertes, responsives LCP-Bild mit Preloading:

<!-- 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 recht früh beim Laden der Seite geladen werden, aber vorzugsweise nach dem LCP-Element. Dies können wir erreichen, indem wir das LCP-Element per Preload laden. Das gibt diesen sichtbaren Bildern ihre natürliche, korrekte Download-Reihenfolge.

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

Bildstrategie für „Below-the-fold“-Bilder

Alle „Below-the-fold“-Bilder sollten per Lazy Load geladen werden. So einfach ist das! Es gibt keine Ausnahmen!

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

Hintergrundbilder vermeiden

Wenn Sie Hintergrundbilder (Background Images) verwenden, sollten Sie dies überdenken. Hintergrundbilder können nicht per Lazy Load geladen werden, Sie können die decoding-Eigenschaft nicht steuern und Sie können die fetchpriority nicht festlegen. Hintergrundbilder sind in der Regel nicht responsiv, was Sie wahrscheinlich eine Menge Bandbreite kosten wird. Aber das Wichtigste ist, dass Hintergrundbilder normalerweise erst entdeckt werden, nachdem der Browser die CSS-Dateien heruntergeladen hat. Dies ist fast nie der richtige Zeitpunkt, um einen Bild-Download auszulösen! Lesen Sie, warum Hintergrundbilder böse sind und wie Sie Hintergrundbilder verzögern können, wenn Sie keine Wahl haben.

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

Den Einfluss mit Real User Monitoring überwachen

Nachdem Sie diese Optimierungen angewendet haben, überprüfen Sie, ob sie die Leistung für reale 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ächlichen Auswirkungen auf Ihre Besucher. Verfolgen Sie Ihre LCP, CLS und INP im Laufe der Zeit, um zu bestätigen, dass Ihre Bildoptimierungen wie erwartet funktionieren.