Bilder fürs Web optimieren: AVIF, WebP und Best Practices

Bilder machen auf den meisten Webseiten den grössten Anteil der übertragenen Datenmenge (Payload) aus. Nicht optimierte Bilder verlangsamen die Ladezeit, verschlechtern die Core Web Vitals (insbesondere den LCP) und vertreiben mobile Nutzer. Eine professionelle Bildoptimierung ist daher der effektivste Hebel zur Beschleunigung einer Website.

Vier Stellschrauben entscheiden über die Bild-Performance: das Format (AVIF/WebP statt JPEG), die Skalierung (passende Auflösung), das Ladeverhalten (Lazy Loading) und die Layout-Stabilität (feste Abmessungen gegen Layout-Shifts). Wer alle vier beherrscht, reduziert das Datenübertragungsvolumen oft um 70 Prozent und mehr.

Die drei Grundregeln der Bildoptimierung

1. Moderne Bildformate nutzen (AVIF & WebP)

Klassische Formate wie PNG (für Grafiken) und JPEG (für Fotos) sind veraltet. Nutzen Sie stattdessen:

• WebP: Bietet exzellenten Komprimierungsschutz und transparente Hintergründe bei ca. 30 % kleineren Dateien als JPEG.
• AVIF: Der modernste Standard. Es komprimiert nochmals deutlich stärker als WebP bei herausragender Detailtreue und Farbtiefe.

Nutzen Sie im HTML das <picture>-Element, um Browsern moderne Formate anzubieten und gleichzeitig ein JPEG-Fallback bereitzustellen:

<picture>
  <source srcset="/images/hero.avif" type="image/avif">
  <source srcset="/images/hero.webp" type="image/webp">
  <img src="/images/hero.jpg" width="800" height="400" alt="Hero-Bild" loading="eager">
</picture>

2. Korrekte Skalierung (Responsive Images)

Laden Sie niemals ein Bild mit einer Auflösung von 4000 × 3000 Pixeln hoch, wenn es auf der Website maximal in einer Breite von 400 Pixeln (z. B. als Teaserbild) dargestellt wird. Jedes Pixel zu viel bedeutet unnötige Byte-Übertragungen.

• Skalieren Sie Bilder vor dem Upload auf die maximal benötigte Darstellungsgrösse.
• Nutzen Sie das Attribut srcset, um verschiedene Bildgrössen für unterschiedliche Display-Breiten bereitzustellen: <img src="small.jpg" srcset="small.jpg 400w, large.jpg 800w" sizes="(max-width: 600px) 400px, 800px" ...>

3. Intelligentes Lazy Loading

Laden Sie Bilder erst herunter, wenn sie sich dem sichtbaren Bereich des Bildschirms nähern. Dies spart Bandbreite und beschleunigt den ersten Seitenaufbau.

• Für Bilder weiter unten (Below the Fold): Verwenden Sie das native Attribut loading="lazy".
• Für Bilder im sichtbaren Einstiegsbereich (Above the Fold): Verwenden Sie niemals Lazy Loading für das LCP-Element (Banner/Logo), sondern laden Sie es bevorzugt mit loading="eager" oder preloading.

---

Bildformate im direkten Vergleich

Die Wahl des Formats ist der grösste Einzelhebel. Die folgende Tabelle zeigt typische Eigenschaften bei vergleichbarer visueller Qualität:

Format	Relative Dateigrösse	Transparenz	Browser-Support	Idealer Einsatz
JPEG	100 % (Referenz)	Nein	Universell	Fallback, Alt-Systeme
PNG	120–200 % (Fotos)	Ja	Universell	Logos, Grafiken, Screenshots
WebP	~70 %	Ja	Sehr breit	Allround-Standard
AVIF	~50 %	Ja	Modern (gut)	Fotos, Hero-Bilder
SVG	Minimal (Vektor)	Ja	Universell	Icons, Logos, Diagramme

Faustregel: AVIF mit WebP als Fallback für Fotos, SVG für alles Vektorbasierte. PNG nur noch, wenn pixelgenaue Transparenz ohne AVIF/WebP nötig ist.

---

Vorher/Nachher: ein konkretes Optimierungsbeispiel

Ein unbearbeitetes Hero-Foto aus einer Digitalkamera vor und nach der Optimierung:

Massnahme	Vorher	Nachher
Format	JPEG	AVIF (WebP-Fallback)
Abmessungen	4032 × 3024 px	1600 × 1200 px
Dateigrösse	3.8 MB	180 KB
Ladeverhalten	loading="lazy" (falsch)	loading="eager" + Preload
LCP (4G mobil)	4.6 s	1.4 s

Durch das Zusammenspiel aus Format, Skalierung und korrektem Ladeverhalten sinkt die Dateigrösse um über 95 Prozent und der LCP fällt klar in den grünen Bereich (< 2.5 s).

---

CLS-Vermeidung durch Layout-Sicherung

Um Layout-Verschiebungen (Cumulative Layout Shift) beim Laden von Bildern zu verhindern, müssen Sie dem Browser mitteilen, wie viel Platz er für das Bild reservieren soll.

• Die Lösung: Tragen Sie immer die Originalabmessungen (width und height Attribute) direkt auf dem <img>-Tag ein (siehe Code-Beispiel oben).
• Das CSS übernimmt anschliessend die flexible Skalierung (z. B. img { max-width: 100%; height: auto; }). Der Browser blockiert den Layoutplatz vorab und verhindert das Springen von Texten.

Checkliste zur Bildoptimierung

• Fotos als AVIF mit WebP- und JPEG-Fallback im <picture>-Element ausliefern.
• Bilder vor dem Upload auf die maximal benötigte Darstellungsgrösse skalieren.
• srcset und sizes für responsive Auflösungen setzen.
• width und height auf jedem <img> deklarieren (gegen CLS).
• Above-the-Fold-Bild mit loading="eager" laden, alle anderen mit loading="lazy".
• LCP-Bild zusätzlich per <link rel="preload"> vorladen.
• Icons und Logos als SVG statt als Rasterbild einbinden.
• Auslieferung über ein CDN mit automatischer Formatumwandlung prüfen.

[!TIP] Die Bereitstellung von AVIF- und WebP-Bildern in passender Skalierung optimiert die mobile Ladezeit dramatisch. Analysieren Sie die Ladeeffizienz Ihrer Bilder live mit dem PageSpeed Check auf balou.tools.