Comment fonctionne réellement l'optimisation d'image dans Next.js_

next/image est l'une de ces fonctionnalités qu'il est facile de mal comprendre.

Les gens entendent "utilisez <Image /> au lieu de <img>" et s'arrêtent là. Cela suffit pour obtenir quelques avantages, mais ce n'est pas suffisant pour prendre de bonnes décisions en matière de performance.

Il est utile de comprendre ce que le composant fait réellement pour vous.

Le Premier Avantage : La Stabilité de la Mise en Page

Un <img> standard n'est pas intrinsèquement mauvais. Le problème commence lorsque le navigateur ne sait pas combien d'espace réserver avant que l'image ne se charge.

C'est ainsi que vous vous retrouvez avec un contenu qui se déplace vers le bas une fois que l'image apparaît enfin.

Avec next/image, vous êtes orienté vers des dimensions explicites ou un modèle de mise en page basé sur le remplissage :

import Image from "next/image";

export function Hero() {
  return (
    <Image
      src="/hero.jpg"
      alt="Capture d'écran du produit"
      width={1600}
      height={900}
      priority
    />
  );
}

Ces dimensions donnent au navigateur suffisamment d'informations pour réserver de l'espace tôt, ce qui aide à réduire le décalage de mise en page.

Le Deuxième Avantage : Négociation de Format et de Taille

Lorsque l'optimisation des images est activée, la requête est routée à travers le pipeline d'optimisation d'image de Next.js au lieu de toujours servir l'attribut original tel quel.

Ce pipeline peut :

• redimensionner l'image à une largeur plus appropriée
• l'encoder dans un format pris en charge par le navigateur demandeur
• mettre en cache la variante optimisée pour de futures requêtes

C'est utile car une image source de 2000 pixels est souvent inutile pour un affichage mobile, et des formats modernes tels que WebP ou AVIF peuvent réduire considérablement la taille de transfert, selon le contenu de l'image.

Ce Qui Se Passe Sur le Serveur

L'idée erronée commune est que <Image /> est juste un composant de commodité React.

C'est aussi une fonctionnalité d'optimisation côté serveur.

Dans la configuration par défaut, Next.js génère des variantes optimisées via sa route d'image. Cela signifie qu'il y a un réel travail qui se déroule quelque part dans votre déploiement :

• décoder l'image originale
• la redimensionner
• la réencoder
• mettre en cache la sortie

Si vous êtes sur Vercel, une grande partie de ce fardeau opérationnel est caché pour vous. Si vous vous auto-hébergez, c'est votre budget CPU et votre comportement de cache.

Cette distinction est importante une fois que le trafic augmente.

Le Compromis

L'optimisation des images n'est pas gratuite.

Vous troquez effectivement le calcul d'exécution contre de meilleurs poids de charge et un meilleur comportement de rendu.

Il s'agit souvent d'un bon échange, mais c'est tout de même un échange.

Des charges de travail d'images lourdes peuvent devenir coûteuses ou lentes lorsque :

• de nombreuses tailles uniques sont demandées
• le taux de réussite du cache est faible
• les images sources sont trop grandes
• votre déploiement auto-hébergé dispose d'un CPU limité

Si une page sert principalement des actifs statiques avec des dimensions connues, vous pourriez obtenir de meilleurs résultats en pré-traitant les images pendant la compilation ou dans votre pipeline d'actifs, plutôt que de compter sur le redimensionnement à la demande pour tout.

Où les Équipes en Font Souvent Mauvaise Usage

Les erreurs sont prévisibles :

• télécharger des originaux trop grands et supposer que l'optimisation à l'exécution les sauvera
• ignorer sizes sur les images réactives
• utiliser fill sans contrôler le conteneur de mise en page
• supposer que chaque image doit avoir une priorité élevée

Voici un meilleur modèle réactif :

<Image
  src="/dashboard.png"
  alt="Tableau de bord d'analyse"
  fill
  sizes="(max-width: 768px) 100vw, 50vw"
  style={{ objectFit: "cover" }}
/>

Sans une valeur sizes correcte, le navigateur peut toujours choisir une ressource plus grande que ce que la mise en page nécessite réellement.

Une Meilleure Règle de Pouce

Utilisez next/image lorsque :

• vous souhaitez une gestion automatique des images réactives
• vous vous préoccupez des Core Web Vitals
• vous ne souhaitez pas créer manuellement un pipeline d'images

Soyez plus délibéré lorsque :

• les images sont déjà traitées en amont
• vous auto-hébergez avec une capacité de calcul limitée
• les actifs ne constituent pas un goulot d'étranglement de performance significatif

Le composant est utile car il vous fournit de bons paramètres par défaut. Il n'est pas utile s'il vous empêche de réfléchir à la manière dont les images circulent dans votre système.

Lectures Complémentaires

• Composant d'Image Next.js
• Optimisation des Images Next.js
• web.dev : Optimiser le Déplacement de Mise en Page Cumulée