AVIF in Next.js & React 2026: Guida Implementazione [Esempi Codice]

Next.js Image Optimization

Next.js include un potente sistema di ottimizzazione immagini che supporta AVIF.

import Image from 'next/image'

export default function ProductImage() {
  return (
    <Image
      src="/product.jpg"
      alt="Prodotto"
      width={800}
      height={600}
      priority
    />
  )
}

Configurazione AVIF

Per abilitare esplicitamente AVIF in Next.js, configura next.config.js.

module.exports = {
  images: {
    formats: ['image/avif', 'image/webp'],
  },
}

React Puro

In React senza Next.js, implementa AVIF manualmente usando il tag picture.

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

Build Pipeline

Automatizza la conversione AVIF nella tua pipeline di build.

Sharp è la libreria Node.js più usata per conversione immagini.

CDN come Cloudflare o Vercel gestiscono conversione automaticamente.

Performance Tips

Best practices per massimizzare le performance con AVIF.

• Usa next/image: Preferiscilo sempre a img tag.
• Dimensioni esplicite: Specifica sempre width/height.
• Placeholder blur: Usa placeholder='blur' per UX migliore.