AVIF für Entwickler

AVIF für Webentwickler

Vollständige Anleitung zur Implementierung von AVIF in Ihren Webprojekten.

HTML-Implementierung

Verwenden Sie das picture-Element für progressive Unterstützung:

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Beschreibung" loading="lazy">
</picture>

CSS-Implementierung

Verwenden Sie @supports für Hintergrundbilder:

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

Build-Tools

• Sharp: Node.js-Bibliothek für Bildkonvertierung
• Squoosh CLI: Googles CLI-Tool für Bildoptimierung
• ImageMagick: Vielseitiges CLI-Tool mit AVIF-Unterstützung

Performance-Tipps

• Verwenden Sie immer Lazy Loading für Bilder unterhalb der Falte
• Implementieren Sie responsive Bilder mit srcset
• Erwägen Sie Qualität 60-80 für die meisten Anwendungsfälle
• Testen Sie auf verschiedenen Geräten und Verbindungen