Bildoptimierung 2026: AVIF, lazy loading, srcset

Bilder machen auf den meisten Websites 50 bis 70 Prozent des übertragenen Datenvolumens aus. Kein anderer Faktor entscheidet so stark darüber, ob Ihre Seite in unter zwei Sekunden steht oder ob Besucher auf einem grauen Platzhalter warten. Wenn wir eine langsame Kundenseite übernehmen, sind schlecht ausgelieferte Bilder fast immer der größte Einzelposten. Die gute Nachricht: Mit einer Handvoll bewährter Techniken holen Sie den Löwenanteil der Ladezeit zurück. Genau diesen Stack setzen wir heute in jedem Projekt ein.

Warum Bilder der größte Hebel sind

Google bewertet Ladezeit über die Core Web Vitals, und die zentrale Kennzahl dafür ist der Largest Contentful Paint (LCP) – die Zeit, bis das größte sichtbare Element geladen ist. In der Praxis ist dieses Element fast immer ein Bild: das Hero-Motiv oben, ein Produktfoto, ein Titelbild. Ist dieses Bild zu groß, im falschen Format oder wird es zu spät geladen, ist der LCP schlecht. Und ein schlechter LCP kostet Sie Ranking und Conversions.

Der Hebel ist deshalb so groß, weil Bilder gleich mehrfach optimierbar sind: über das Format, über die ausgelieferte Größe und über den Zeitpunkt des Ladens. Wer alle drei Stellschrauben nutzt, reduziert das Bild-Datenvolumen realistisch um 50 bis 80 Prozent – ohne sichtbaren Qualitätsverlust.

Moderne Formate: AVIF mit WebP-Fallback

Das klassische JPEG ist überholt. Zwei moderne Formate liefern bei gleicher Qualität deutlich kleinere Dateien:

• AVIF komprimiert am stärksten und spart gegenüber JPEG oft 30 bis 50 Prozent. Es wird seit 2024 von allen großen Browsern unterstützt (Chrome, Firefox, Safari ab Version 16, Edge) und gilt damit als etabliert.
• WebP ist etwas weniger effizient, wird aber praktisch überall unterstützt und dient als sicheres Netz für ältere Geräte.

Die saubere Lösung ist, beide Formate parallel bereitzustellen und den Browser das jeweils beste selbst wählen zu lassen. Technisch übernimmt das das picture-Element mit mehreren Quellen: Zuerst wird AVIF angeboten, dann WebP, und ganz zuletzt bleibt JPEG als Rückfallebene. Kein Besucher sieht je ein kaputtes Bild, aber die allermeisten bekommen die kleinste Datei.

Eine Faustregel: AVIF und WebP glänzen bei Fotos. Für Logos, Icons und einfache Grafiken bleibt oft SVG die beste Wahl, weil es beliebig skaliert und winzig ist.

Richtige Größe und responsive Auslieferung

Der zweithäufigste Fehler nach dem falschen Format ist die falsche Größe. Ein Bild, das auf dem Smartphone 400 Pixel breit dargestellt wird, aber in voller Desktop-Auflösung von 2000 Pixeln geladen wird, verschwendet ein Vielfaches an Daten. Die Lösung heißt srcset und sizes:

• srcset stellt dem Browser mehrere Größenvarianten desselben Bildes zur Verfügung.
• sizes teilt ihm mit, wie breit das Bild im Layout tatsächlich dargestellt wird.

Der Browser kombiniert beide Angaben mit der Bildschirmgröße und Pixeldichte des Geräts und lädt genau die passende Variante – auf dem Handy die kleine, auf dem Retina-Desktop die große. Das ist einer der wirksamsten und zugleich am häufigsten vergessenen Handgriffe.

Ebenso wichtig, aber oft übersehen: width und height gehören an jedes Bild. Kennt der Browser die Seitenverhältnisse vorab, reserviert er den Platz sofort und das Layout springt beim Nachladen nicht. Das verhindert den Cumulative Layout Shift (CLS) – jene nervigen Sprünge, bei denen man versehentlich den falschen Button trifft.

Ladeverhalten: lazy loading richtig einsetzen

Nicht jedes Bild muss sofort laden. Mit dem Attribut loading="lazy" lädt der Browser Bilder erst, wenn der Nutzer in ihre Nähe scrollt. Für alles unterhalb des sichtbaren Bereichs – Bildergalerien weiter unten, Fußzeilen-Grafiken – ist das ideal und spart Bandbreite genau dort, wo sie zunächst nicht gebraucht wird.

Der entscheidende Punkt, an dem viele scheitern: Das LCP-Bild darf niemals lazy geladen werden. Wer das Hero-Bild oben auf „lazy" setzt, verzögert es künstlich um oft mehr als eine halbe Sekunde – und verschlechtert damit ausgerechnet die Kennzahl, die zählt. Laut aktuellen Erhebungen machen immer noch rund 16 Prozent aller Seiten genau diesen Fehler.

Für das wichtigste Bild oben gilt das Gegenteil: Es soll so früh wie möglich laden. Mit fetchpriority="high" signalisieren Sie dem Browser, dieses Bild vorrangig zu behandeln. So findet und lädt er das Hero-Motiv sofort, statt es hinter Schriften und Skripten einzureihen.

Automatisierung statt Handarbeit

All das von Hand zu pflegen – jedes Bild in drei Formaten und fünf Größen exportieren – ist unrealistisch und fehleranfällig. Deshalb gehört eine automatisierte Bild-Pipeline dazu: Ein Build-Prozess oder ein Bild-CDN erzeugt die Formate und Größen on demand und liefert sie aus dem nächstgelegenen Server aus. Sie laden ein Bild einmal in voller Qualität hoch, den Rest erledigt das System.

Fazit

Der 80/20-Stack ist überschaubar: moderne Formate mit Fallback, responsive Auslieferung über srcset und sizes, feste Dimensionen gegen Layout-Sprünge, lazy loading unterhalb der Falz – aber Priorität statt Verzögerung für das Hero-Bild. Setzen Sie diese fünf Punkte konsequent um, ist der größte Teil Ihres Performance-Problems gelöst. Alles Weitere ist Feinschliff.