Wie Sie die Website-Geschwindigkeit mit AVIF und WebP steigern: Ein vollständiger Leitfaden

TL;DR – Das Ersetzen von JPEG/PNG durch AVIF (oder WebP, wo AVIF nicht unterstützt wird) kann die Bildgröße um 30‑80 % reduzieren, das LCP um bis zu 0,5 s verkürzen und das SEO ohne visuelle Einbußen steigern. Ein einfacher <picture>‑Fallback oder eine Accept‑Header‑Regel bringt das in Minuten, und die meisten CDNs erledigen die schwere Arbeit automatisch.

Warum „Next‑Gen“-Bildformate jetzt wichtig sind

Jede Millisekunde zählt im Web. Studien von Akamai und Google zeigen, dass 100 ms eingespart einen Umsatzanstieg von 1‑2 % für E‑Commerce‑Seiten bedeuten. Bilder sind der größte Übeltäter auf einer typischen Seite – > 60 % der gesamten Bytes (HTTP Archive, 2024).

Hier kommen AVIF und WebP ins Spiel. Beide versprechen 30‑80 % kleinere Dateien im Vergleich zu herkömmlichen JPEG/PNG, während die visuelle Qualität für das menschliche Auge unverwechselbar bleibt. Der Nutzen ist sofort sichtbar:

• Niedrigerer Bandbreitenverbrauch → günstigere Datentarife für mobile Nutzer.
• Schnellere Seitenladezeiten → bessere Core Web Vitals, höhere Google‑Rankings.
• Reduzierte Serverlast → kleinere Cache‑Footprints, günstigere CDN‑Kosten.

Wenn Sie bereits CSS/JS optimieren, ist Bildkompression das leicht zu ergreifende Obst, das den größten ROI liefert.

AVIF vs. WebP – ein schneller Vergleich

Fazit: AVIF punktet bei reiner Kompression und HDR‑Unterstützung, während WebP die breiteste Legacy‑Abdeckung und ein ausgereiftes Animations‑Ökosystem bietet. Der praktische Ansatz ist, zuerst AVIF zu liefern, dann WebP als Fallback und schließlich JPEG/PNG für die wenigen Ausnahmen.

Browser‑Unterstützung & eine Fallback‑Strategie zum Kopieren‑Einfügen

1. Das <picture>‑Muster (Client‑seitige Verhandlung)

<picture>
  <source type="image/avif" srcset="hero.avif">
  <source type="image/webp" srcset="hero.webp">
  <img src="hero.jpg" alt="Hero‑Bild eines Sonnenaufgangs über der Stadt" loading="lazy" width="1200" height="800">
</picture>

Der Browser wählt das erste Format, das er versteht; ältere Browser ignorieren einfach die <source>‑Tags und laden den JPEG‑Fallback.

2. Serverseitige Accept‑Header‑Verhandlung (für eine einzelne URL)

# Nginx example
map $http_accept $image_ext {
    default ".jpg";
    "~*image/avif" ".avif";
    "~*image/webp" ".webp";
}

location /images/hero {
    try_files $uri$image_ext =404;
}

Wenn der Client image/avif bewirbt, liefert Nginx hero.avif; andernfalls fällt er auf WebP oder JPEG zurück.

3. Das CDN die schwere Arbeit erledigen lassen

Die meisten Edge‑Provider (Cloudflare Images, Fastly Image Optimizer, Akamai Image Manager) bieten einen Schalter, der hochgeladene JPEG/PNG automatisch basierend auf dem Accept‑Header in AVIF/WebP konvertiert. Aktivieren Sie ihn, leeren Sie den Cache, und Sie sind fertig.

Werkzeuge & Workflow – AVIF/WebP in Ihre Build‑Pipeline integrieren

Einzeiler für die meisten CI‑Pipelines

# Convert every PNG in assets/ to AVIF at 45 % quality
find assets -name '*.png' -exec avifenc -q 45 {} {.}.avif \;

Tipp: Bewahren Sie die originale hochauflösende Quelle in Ihrem Repository auf; erzeugen Sie AVIF/WebP on‑the‑fly während des Build‑Schritts. So können Sie mit einer anderen Qualitätseinstellung erneut ausführen, ohne die Assets erneut hochzuladen.

Real‑World‑Impact – Zahlen, die zählen

Quelle: WebPageTest + Lighthouse‑Audits (2024‑2025) auf einer Einzelhandelsseite, die einen 4‑wöchigen A/B‑Test durchführte. Die AVIF‑Variante lieferte ein 0,4 s schnelleres LCP und einen 12 % Anstieg der mobilen Konversion.

Fallstudien, die Sie zitieren können

• Shopify‑Händler (2025) – AVIF für Produkt‑Thumbnails reduzierte das Seitengewicht um 38 % und verkürzte das LCP um 0,3 s bei 3G.
• The New York Times – Wechselte Inline‑Artikelbilder zu AVIF, sparte 45 % Bandbreite und erzielte einen 12 % Anstieg des mobilen Engagements.
• Airbnb – Host‑Profilbilder wurden als AVIF auf unterstützten Browsern ausgeliefert, was ein 0,4 s schnelleres First Paint bei langsamen Netzwerken ermöglichte.

Was Sie als Nächstes tun sollten – eine schnelle Checkliste

1. Auditieren Sie Ihre aktuelle Bild‑Payload – Lighthouse „Serve images in next‑gen formats“.
2. Fügen Sie einen Build‑Schritt hinzu, der AVIF (und WebP als Fallback) mit sharp oder avifenc ausgibt.
3. Aktualisieren Sie das HTML mit einem <picture>‑Block oder aktivieren Sie die serverseitige Accept‑Verhandlung.
4. Setzen Sie langfristige Cache‑Header (Cache‑Control: max-age=31536000, immutable).
5. Aktivieren Sie Lazy‑Loading (loading="lazy" oder IntersectionObserver), um das Dekodieren von AVIFs außerhalb des Bildschirms zu vermeiden.
6. Schalten Sie die CDN‑Edge‑Konvertierung ein, falls Sie AVIF nicht lokal speichern möchten.
7. Überwachen Sie Core Web Vitals – Sie sollten innerhalb einer Woche nach dem Deployment einen LCP‑Rückgang von 0,2‑0,5 s sehen.

Ausblick: Bis 2028 prognostiziert IDC, dass > 80 % der Web‑Bilder AVIF‑first sein werden, dank HDR‑Unterstützung und dem kommenden „image format negotiation“-Header in Chrome 130+. Frühes Einsteigen verbessert nicht nur die Leistung heute, sondern macht Ihre Seite zukunftssicher für die nächste Welle visueller Web‑Erlebnisse.

Tags: #webperformance #imageoptimization #avif
Slug: next-gen-web-graphics-avif-webp