Hauptbereich
Agency
web-development

Moderne Bildoptimierung fürs Web

Redaktion ·

Bilder sind fast immer der schwerste Brocken auf einer Webseite — oft mehr als die Hälfte des gesamten Seitengewichts. Genau deshalb sind sie der größte einzelne Hebel für Ladezeit und Core Web Vitals. Eine schlecht optimierte Hero-Grafik kann den Largest Contentful Paint ruinieren; ein Bild ohne reservierten Platz lässt das Layout springen und treibt den CLS hoch. Wer Bilder im Griff hat, hat die Performance halb gewonnen.

Moderne Bildoptimierung ist dabei kein einzelner Trick, sondern ein Bündel zusammenwirkender Maßnahmen: das richtige Format, die richtige Größe pro Gerät, das richtige Ladeverhalten und reservierter Platz im Layout. Dieser Artikel geht die vier durch — und zeigt die Fallen, die mehr schaden als nutzen.

Die Formate: AVIF und WebP schlagen JPEG/PNG

Die alten Standards — JPEG für Fotos, PNG für Grafiken mit Transparenz — sind universell unterstützt, aber ineffizient. Die modernen Formate komprimieren deutlich besser:

  • WebP ist rund 25–35 % kleiner als JPEG bei vergleichbarer Qualität und wird heute praktisch überall unterstützt (über 97 % der Browser, Stand Anfang 2026). Der sichere Standard.
  • AVIF geht noch weiter: bis zu rund 50 % kleiner als JPEG, mit besserer Qualität gerade bei niedrigen Bitraten. Die Unterstützung liegt bei etwa 92 % (Anfang 2026) — gut, aber nicht ganz universell.

Die saubere Strategie: AVIF als beste Option ausliefern, mit WebP (und notfalls JPEG) als Fallback für Browser, die AVIF nicht können. Genau dafür gibt es das <picture>-Element. Mehr zu den Formaten im Glossar unter Image Optimization mit WebP/AVIF.

Responsive Images: die richtige Größe pro Gerät

Ein 2000-Pixel-Bild an ein 400-Pixel-Smartphone-Display zu schicken, verschwendet Bandbreite massiv. Responsive Images lösen das, indem sie dem Browser mehrere Größen anbieten und ihn die passende wählen lassen.

  • srcset und sizes. Mit srcset hinterlegst du mehrere Auflösungen desselben Bildes; mit sizes sagst du dem Browser, wie breit das Bild im Layout dargestellt wird. Der Browser wählt dann die kleinste Variante, die noch scharf genug ist — abhängig von Displaygröße und Pixeldichte.
  • <picture>-Element. Für Art Direction (anderes Bild-Crop je Viewport) oder für den Format-Fallback (AVIF → WebP → JPEG). Hier definierst du explizite <source>-Alternativen, die der Browser der Reihe nach prüft.

Faustregel: srcset/sizes für „dasselbe Bild in verschiedenen Größen”, <picture> für „verschiedene Bilder oder Formate”.

Lazy-Loading — aber nicht auf das LCP-Bild

loading="lazy" weist den Browser an, ein Bild erst zu laden, wenn es in die Nähe des sichtbaren Bereichs scrollt. Das spart Bandbreite und beschleunigt den initialen Seitenaufbau, weil der Browser sich zuerst auf die kritischen Elemente konzentriert. Native Browser-Unterstützung liegt 2026 bei rund 95 %.

Die entscheidende Falle: Niemals das LCP-Bild lazy-laden. Lazy-Loading auf der Hero-Grafik, dem Logo oder dem Above-the-fold-Bild verzögert genau das Element, das den LCP bestimmt — der Browser entdeckt es erst spät und lädt es verspätet. Messdaten zeigen den Effekt drastisch: Lazy-Loading des LCP-Bildes verschob den LCP-Wert (75. Perzentil) von 364 ms auf 720 ms und drückte den Anteil „guter” Seiten von 79 % auf 52 %.

Für das LCP-Bild gilt das Gegenteil: kein lazy, sondern oft fetchpriority="high", damit es so früh wie möglich geladen wird. Lazy-Loading gehört auf die Bilder unter dem Fold, nicht auf das wichtigste Bild oben. Mehr zum Mechanismus im Glossar unter Lazy Loading.

width/height gegen Layout-Shift

Ein Bild ohne angegebene Maße ist ein klassischer CLS-Verursacher: Der Browser weiß nicht, wie viel Platz es brauchen wird, rendert den Text drumherum — und schiebt dann alles nach unten, sobald das Bild lädt. Das ist der ruckelnde Sprung, den jeder kennt.

Die Lösung steht in jeder web.dev-Empfehlung: Immer width und height an Bildern setzen. Moderne Browser berechnen daraus automatisch das Seitenverhältnis (aspect-ratio) und reservieren den korrekten Platz, bevor das Bild geladen ist. Für responsive Layouts kombinierst du die HTML-Attribute width/height mit CSS width: 100%; height: auto; — der Browser hält das Verhältnis und rechnet die Höhe proportional aus. Wichtig bei srcset: Alle Varianten sollten dasselbe Seitenverhältnis haben, sonst springt das Layout beim Wechsel. Tiefer ins Thema geht der Lexikon-Eintrag Cumulative Layout Shift eliminieren.

Kompression und Werkzeuge

Über Format und Größe hinaus zählt die Qualitätsstufe: Für Fotos im Web reicht meist eine Qualität von 75–85 %, der Unterschied zum Original ist kaum sichtbar, die Ersparnis aber groß. Das alles von Hand zu machen, skaliert nicht — moderne Build-Tools und Frameworks erzeugen die Formate, Größen und srcset-Attribute automatisch beim Build, und Image-CDNs liefern Bilder geräteabhängig optimiert aus. Der saubere Weg ist, diese Optimierung in die Pipeline zu legen, statt sie pro Bild manuell zu erledigen.

FAQ

Soll ich AVIF oder WebP verwenden? Am besten beides: AVIF als erste Wahl (beste Kompression) mit WebP als Fallback über das <picture>-Element. WebP ist nahezu universell unterstützt (über 97 %), AVIF etwas weniger (rund 92 %, Anfang 2026), komprimiert aber noch stärker. Beide schlagen JPEG und PNG deutlich.

Was ist der Unterschied zwischen srcset und dem picture-Element? srcset/sizes liefert dasselbe Bild in verschiedenen Größen, und der Browser wählt die passende für Display und Pixeldichte. Das <picture>-Element nutzt du, wenn du je nach Viewport ein anderes Bild zeigen willst (Art Direction) oder Format-Fallbacks wie AVIF → WebP → JPEG brauchst.

Warum darf ich das LCP-Bild nicht lazy-laden? Weil Lazy-Loading das Laden verzögert — und das LCP-Bild ist gerade das Element, das den Largest Contentful Paint bestimmt. Es lazy zu laden verzögert den LCP messbar (in einer Analyse von 364 auf 720 ms). Above-the-fold-Bilder lädst du eager, oft mit fetchpriority="high"; lazy gehört auf Bilder unter dem Fold.

Wie verhindere ich, dass Bilder das Layout springen lassen? Setz immer width und height an jedes Bild. Der Browser berechnet daraus das Seitenverhältnis und reserviert den Platz, bevor das Bild lädt — kein Sprung. Für responsive Bilder kombinierst du die Attribute mit CSS height: auto; width: 100%.

Wie stark beeinflusst Bildoptimierung die Core Web Vitals? Sehr stark. Bilder machen oft den größten Teil des Seitengewichts aus, deshalb ist ihre Optimierung einer der wirksamsten LCP-Hebel — Format, Größe und Auslieferung zusammen können das Seitengewicht um 50–70 % senken. Korrekte Maße verhindern zusätzlich CLS. Zwei der drei Core Web Vitals hängen direkt an Bildern.

Themenuebersicht

Web DevelopmentPerformance