AVIF in Next.js & React 2026: Implementierung [Code-Beispiele]

Next.js Bildoptimierung

Next.js enthält ein leistungsstarkes Bildoptimierungssystem, das AVIF seit Version 12 out-of-the-box unterstützt.

Die next/image-Komponente optimiert Bilder automatisch und konvertiert sie je nach Browser zu AVIF oder WebP.

Die Optimierung erfolgt on-demand beim ersten Request und wird dann gecacht.

Dieser Ansatz bietet die beste Balance zwischen Performance und Developer Experience.

import Image from 'next/image'

export default function ProductImage() {
  return (
    <Image
      src="/product.jpg"
      alt="Produkt"
      width={800}
      height={600}
      priority // Für Bilder above the fold
    />
  )
}

AVIF-Konfiguration

Um AVIF in Next.js explizit zu aktivieren, konfigurieren Sie next.config.js.

Die Reihenfolge in formats bestimmt die Priorität: AVIF wird zuerst versucht, dann WebP als Fallback.

deviceSizes und imageSizes steuern die generierten Varianten für responsive Images.

// next.config.js
module.exports = {
  images: {
    formats: ['image/avif', 'image/webp'],
    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048],
    imageSizes: [16, 32, 48, 64, 96, 128, 256],
  },
}

Reines React

In React ohne Next.js implementieren Sie AVIF manuell mit dem picture-Tag.

Für reines React müssen Sie die Generierung von AVIF/WebP-Varianten im Build-Prozess handhaben.

Sharp ist die am häufigsten verwendete Node.js-Bibliothek für Bildkonvertierung in Build-Pipelines.

function OptimizedImage({ src, alt, ...props }) {
  const avifSrc = src.replace(/\.(jpg|png)$/, '.avif')
  const webpSrc = src.replace(/\.(jpg|png)$/, '.webp')
  
  return (
    <picture>
      <source srcSet={avifSrc} type="image/avif" />
      <source srcSet={webpSrc} type="image/webp" />
      <img src={src} alt={alt} {...props} />
    </picture>
  )
}

Build-Pipeline

Automatisieren Sie die AVIF-Konvertierung in Ihrer Build-Pipeline für maximale Effizienz.

• Pre-build: Generieren Sie AVIF während des Builds für statische Deployments.
• On-demand: Verwenden Sie API-Routes für On-the-fly-Konvertierung mit Cache.
• CDN: Cloudflare oder Vercel handhaben die Konvertierung automatisch.

// scripts/optimize-images.js
const sharp = require('sharp')
const glob = require('glob')

glob('public/images/*.{jpg,png}', (err, files) => {
  files.forEach(file => {
    sharp(file)
      .avif({ quality: 70 })
      .toFile(file.replace(/\.(jpg|png)$/, '.avif'))
  })
})

Performance-Tipps

Best Practices zur Maximierung der Performance mit AVIF in React/Next.js.

• next/image verwenden: Bevorzugen Sie es immer gegenüber img-Tags für automatische Optimierung.
• Explizite Dimensionen: Geben Sie immer width/height an, um Layout-Shift zu vermeiden.
• Placeholder Blur: Verwenden Sie placeholder='blur' für bessere UX beim Laden.
• Kritisches Preloaden: Verwenden Sie priority für LCP-Bilder, Lazy Load für den Rest.
• Monitoring: Verwenden Sie Lighthouse und Web Vitals, um die Auswirkungen zu überprüfen.