AVIF zur Website Hinzufügen 2026: 5 Minuten Setup [Anleitung]

Implementierungsübersicht

Die Hinzufügung von AVIF-Unterstützung zu Ihrer Website erfordert drei Schritte: Bilder generieren, Server konfigurieren und HTML aktualisieren.

Die gute Nachricht ist, dass Sie sich nicht für ein einziges Format entscheiden müssen. Sie können AVIF an moderne Browser und JPEG/PNG an ältere Browser ausliefern.

Es gibt zwei Hauptansätze: client-seitig mit picture-Tag oder server-seitig mit Content Negotiation.

Das picture-Tag ist einfacher zu implementieren, Content Negotiation ist eleganter, erfordert aber Server-Konfiguration.

Picture-Tag-Methode

Das HTML5-picture-Tag ermöglicht die Angabe mehrerer Quellen mit automatischem Fallback.

Der Browser wählt automatisch die erste unterstützte Quelle.

Die Reihenfolge ist wichtig: AVIF zuerst, dann WebP, dann JPEG/PNG als Fallback.

Das img-Element ist obligatorisch als finaler Fallback und für Attribute wie alt, width, height.

• Pro: Funktioniert überall, keine Server-Konfiguration, volle Kontrolle.
• Contra: Mehr HTML, mehrere Varianten zu verwalten.

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Hero-Bild" width="1200" height="600">
</picture>

Content Negotiation

Bei Content Negotiation wählt der Server das Format basierend auf dem Accept-Header des Browsers.

Der Browser sendet einen Accept-Header, der unterstützte Formate angibt.

Der Server antwortet mit dem besten verfügbaren Format.

Das HTML bleibt sauber, mit einem einzigen src pro Bild.

• Pro: Sauberes HTML, automatisch, einfaches Caching.
• Contra: Erfordert Server-Konfiguration, schwieriger zu debuggen.

# Nginx-Konfiguration
map $http_accept $avif_suffix {
  ~*avif ".avif";
  default "";
}

location ~* \.(jpg|jpeg|png)$ {
  add_header Vary Accept;
  try_files $uri$avif_suffix $uri =404;
}

CSS-Hintergrund

Für CSS-Hintergrundbilder verwenden Sie @supports oder die image-set-Technik.

.hero {
  background-image: url('hero.jpg');
}

@supports (background-image: url('test.avif')) {
  .hero {
    background-image: url('hero.avif');
  }
}

/* Oder mit image-set */
.hero {
  background-image: image-set(
    url('hero.avif') type('image/avif'),
    url('hero.webp') type('image/webp'),
    url('hero.jpg') type('image/jpeg')
  );
}

Testen und Validierung

Überprüfen Sie, dass die Implementierung in allen Ziel-Browsern korrekt funktioniert.

In Chrome DevTools > Network filtern Sie nach 'Img' und überprüfen Sie die Type-Spalte.

Verwenden Sie den Responsive-Modus, um verschiedene Geräte und UA-Strings zu simulieren.

• Chrome DevTools: Der Network-Tab zeigt, welches Format geladen wird.
• Mehrere Browser Testen: Safari, Firefox, Edge, um Fallback zu überprüfen.
• Lighthouse: Überprüfen Sie, ob noch 'serve images in modern formats' vorgeschlagen wird.
• WebPageTest: Detaillierte Analyse, was an verschiedene Browser ausgeliefert wird.