AVIF dans Next.js & React 2026: Guide [Exemples de Code]

Optimisation d'image Next.js

Next.js inclut une puissante optimisation d'image intégrée avec prise en charge d'AVIF. Le composant next/image sert automatiquement AVIF aux navigateurs compatibles.

Lorsque vous utilisez le composant Image de next/image, Next.js convertit automatiquement les images aux formats WebP et AVIF à la demande. Le serveur détecte la prise en charge du navigateur via l'en-tête Accept et sert le format optimal.

Cela se produit à la périphérie (avec le déploiement Vercel) ou sur votre serveur, avec des résultats mis en cache pour les demandes suivantes. Aucune configuration n'est nécessaire pour la prise en charge de base d'AVIF.

Configuration next/image

Personnalisez le comportement d'AVIF via next.config.js.

// next.config.js
module.exports = {
  images: {
    formats: ['image/avif', 'image/webp'],
    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
    minimumCacheTTL: 60 * 60 * 24 * 30, // 30 jours
    dangerouslyAllowSVG: false,
    contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;",
  },
}

Chargeurs d'image personnalisés

Pour des sources d'images externes ou des CDN, mettez en œuvre des chargeurs personnalisés avec prise en charge d'AVIF.

Les chargeurs personnalisés fonctionnent avec n'importe quel CDN d'images. Le CDN gère la négociation des formats, typiquement via un paramètre 'f_auto' ou similaire qui détecte la prise en charge d'AVIF par le navigateur.

// Chargeur Cloudinary personnalisé avec AVIF
const cloudinaryLoader = ({ src, width, quality }) => {
  const params = [
    'f_auto', // Détection automatique de la prise en charge d'AVIF/WebP
    'c_limit',
    `w_${width}`,
    `q_${quality || 'auto'}`
  ];
  return `https://res.cloudinary.com/your-cloud/image/upload/${params.join(',')}/${src}`;
};

export default function ProductImage({ src, alt }) {
  return (
    <Image
      loader={cloudinaryLoader}
      src={src}
      alt={alt}
      width={800}
      height={600}
      quality={80}
    />
  );
}

Traitement au moment de la construction

Pour les sites statiques, traitez les images au moment de la construction pour une performance maximale.

La conversion au moment de la construction est idéale pour le contenu statique. Toute conversion de format se produit pendant la construction, éliminant ainsi les frais généraux de traitement au moment de l'exécution. Sharp est la bibliothèque par défaut pour le traitement d'images Node.js avec un excellent support AVIF.

// Utilisation de sharp pour la conversion AVIF au moment de la construction
import sharp from 'sharp';
import fs from 'fs';
import path from 'path';

async function convertToAvif(inputPath, outputPath) {
  await sharp(inputPath)
    .avif({ quality: 80 })
    .toFile(outputPath);
}

// Dans getStaticProps ou lors de la construction
export async function getStaticProps() {
  const images = await processAllImages();
  return { props: { images } };
}