Ein einziges unkomprimiertes Hero-Bild kann mehr wiegen als der gesamte restliche Code einer Seite zusammen. Bilder sind auf den meisten Websites der mit Abstand größte Datenbrocken — und damit die Stellschraube mit dem größten Hebel auf Ladezeit und Ranking.
Die gute Nachricht: Du musst kein Profi sein, um hier viel herauszuholen. Mit den richtigen Bildformaten — vor allem WebP und AVIF — halbierst du das Gewicht deiner Bilder oft, ohne dass jemand einen Qualitätsunterschied sieht.
Dieser Beitrag zeigt dir, welche Formate sich heute wirklich lohnen, wie du Bilder richtig komprimierst, was es mit srcset und Lazy Loading auf sich hat — und wie das alles auf deine Core Web Vitals einzahlt.
Das größte sichtbare Element einer Seite ist fast immer ein Bild — ein Hero-Foto, ein Produktbild, ein Banner. Genau dieses Element misst Google mit dem Largest Contentful Paint (LCP), einem der drei Core Web Vitals. Googles eigene Dokumentation bringt es auf den Punkt: Das LCP-Element einer Seite ist in den meisten Fällen entweder ein Bild oder eine Web-Schriftart.
Heißt im Klartext: Lädt dein größtes Bild langsam, ist dein LCP schlecht — und ein schlechter LCP-Wert drückt dein Ranking, unabhängig davon, wie gut deine Texte sind.
Der Hebel ist riesig, weil Bilder den Löwenanteil der übertragenen Bytes ausmachen. Wenn du ein 800-KB-JPEG durch ein 250-KB-AVIF ersetzt, sparst du mehr als die meisten anderen Performance-Maßnahmen zusammengenommen.
Es gibt nicht das eine richtige Format. Aber es gibt für jeden Anwendungsfall ein bestes.
Der entscheidende Punkt: WebP und AVIF sind kein Qualitätskompromiss. Die Dateien sind kleiner, weil die Kompressionsverfahren schlicht moderner sind — nicht, weil Bildinformationen verloren gehen, die das Auge wahrnimmt.
Die ehrliche Antwort: am besten beides, gestaffelt.
WebP ist heute die sichere Standardwahl. Es wird von allen modernen Browsern unterstützt und liefert zuverlässig 25 bis 35 Prozent Einsparung gegenüber JPEG. Als Facebook auf WebP umstellte, sparte das Unternehmen 25 bis 35 Prozent bei JPEGs und rund 80 Prozent bei PNGs. YouTube berichtete von 10 Prozent schnelleren Seitenaufbauten allein durch WebP-Thumbnails.
AVIF geht noch weiter und komprimiert deutlich stärker — die Browserunterstützung liegt inzwischen bei über 94 Prozent global (Stand laut caniuse.com). Das einzige praktische Manko: Das Erstellen von AVIF-Dateien dauert länger, was bei sehr großen Bildmengen relevant werden kann.
Die saubere Lösung ist gestaffelte Auslieferung über das <picture>-Element: Der Browser bekommt zuerst AVIF angeboten, fällt bei fehlender Unterstützung auf WebP zurück und im Notfall auf das JPEG. So bekommt jeder Besucher das modernste Format, das sein Browser versteht — ganz ohne JavaScript.
So sieht das im HTML aus:
<picture>
<source srcset="hero.avif" type="image/avif" />
<source srcset="hero.webp" type="image/webp" />
<img src="hero.jpg" alt="Aussagekräftiger Alt-Text" width="1600" height="900" />
</picture>
Format allein reicht nicht. Ein AVIF in voller Qualität ist immer noch unnötig groß. Drei Hebel sind entscheidend:
Die meisten modernen Bild-Pipelines — von Build-Tools über CDNs bis zu CMS-Plugins — erledigen das automatisch. Wichtig ist, dass es überhaupt passiert.
Ein Smartphone braucht kein Bild in Desktop-Auflösung. Mit srcset und sizes lieferst du jedem Gerät genau die Variante, die es tatsächlich anzeigt — der Browser wählt automatisch die passende.
<img
src="foto-800.webp"
srcset="foto-400.webp 400w, foto-800.webp 800w, foto-1600.webp 1600w"
sizes="(max-width: 600px) 100vw, 800px"
alt="Aussagekräftiger Alt-Text"
width="1600" height="900" />
Das srcset-Attribut listet die verfügbaren Bildgrößen mit ihrer jeweiligen Pixelbreite. Das sizes-Attribut sagt dem Browser, wie breit das Bild im Layout dargestellt wird. Daraus berechnet der Browser selbst, welche Datei am sparsamsten ist — und lädt nur diese.
Für ein Mobilgerät kann das den Unterschied zwischen einem 1,6-MB- und einem 90-KB-Download bedeuten. Genau solche Einsparungen verbessern den LCP auf Mobilgeräten spürbar — und mobil werden die Core Web Vitals von Google primär bewertet.
Bilder, die erst weit unten auf der Seite auftauchen, müssen nicht sofort geladen werden. Das native loading="lazy"-Attribut sorgt dafür, dass der Browser sie erst lädt, wenn der Nutzer in ihre Nähe scrollt.
<img src="weiter-unten.webp" alt="..." loading="lazy" width="800" height="600" />
Aber Achtung — und das ist der häufigste Fehler: Setze niemals loading="lazy" auf dein LCP-Bild. Das Hero-Bild ganz oben soll so früh wie möglich laden, nicht verzögert. Für genau dieses Bild gilt das Gegenteil: fetchpriority="high" und kein Lazy Loading. Google empfiehlt für das LCP-Element ausdrücklich eine hohe Ladepriorität.
Eine simple Faustregel: Alles, was beim Seitenaufruf sofort sichtbar ist (above the fold), wird eager geladen. Alles darunter bekommt loading="lazy". Und immer width und height setzen — sonst springt das Layout beim Nachladen, und du ruinierst deinen CLS-Wert.
Trotz exzellenter Werkzeuge nutzt das Web sein Potenzial bei Weitem nicht aus. Der HTTP Archive Web Almanac 2024 zeigt: Auf Mobilgeräten sind immer noch rund 32 Prozent aller Bilder JPEGs und 28 Prozent PNGs — moderne Formate wie WebP (12 Prozent) und AVIF (1 Prozent) sind die Ausnahme, nicht die Regel.
Der Almanac formuliert es deutlich: Fast alle JPEGs, PNGs und GIFs im Web wären mit einem modernen Format besser bedient. AVIF wächst rasant — die Zahl der ausgelieferten AVIF-Bilder hat sich gegenüber 2022 fast vervierfacht — aber das Gros der Websites verschenkt weiterhin Ladezeit.
Genau darin liegt deine Chance: Bildoptimierung ist eine der wenigen technischen SEO-Maßnahmen mit unmittelbarem, messbarem Effekt — und die meisten Wettbewerber haben sie noch nicht umgesetzt.
<picture> davorgeschaltetsrcset und sizes für responsive Auslieferung nutzenwidth und height immer im HTML angeben (schützt den CLS-Wert)loading="lazy" für alles unterhalb des sichtbaren Bereichsfetchpriority="high"Nein — jedenfalls nicht sichtbar. Die kleineren Dateigrößen entstehen durch effizientere Kompressionsverfahren, nicht durch das Wegwerfen wahrnehmbarer Bildinformationen. Bei vergleichbarer Einstellung sieht ein WebP für das menschliche Auge identisch zum JPEG aus — bei deutlich geringerem Gewicht.
In der Praxis ist es die sicherste Lösung. Über das <picture>-Element bietest du AVIF zuerst an, dann WebP, und das JPEG als letzte Rückfallebene. So bekommt jeder Browser das beste Format, das er versteht — und niemand sieht ein kaputtes Bild.
Beides zusammen. Der größte Einzelfehler ist meist ein riesiges Bild, das in einem kleinen Slot dargestellt wird. Erst auf die Anzeigegröße skalieren, dann ins moderne Format konvertieren — die Kombination bringt die größte Einsparung.
Teilweise ja. Gängige CMS wie WordPress bieten Plugins, die Bilder automatisch in WebP konvertieren und komprimieren. Für eine saubere <picture>-Auslieferung mit AVIF-Fallback, korrektem srcset und priorisiertem LCP-Bild lohnt sich aber technische Unterstützung.
Schwere Bilder sind auf vielen Seiten die größte unsichtbare Ladezeit-Bremse — und der schnellste Hebel für bessere Core Web Vitals. In einem kostenlosen 30-minütigen Erstgespräch werfen wir einen Blick auf deine Seite und zeigen dir, wo der größte Performance-Gewinn liegt.
