Comment optimiser des images dans Next.js avec le composant Image

Les images sont cruciales sur un site web mais posent des problèmes de performance si elles ne sont pas implémentées correctement : chargement très lent, consommation de bande passante élevée…

Cela peut devenir très problématique pour l’utilisateur final, surtout lors de la navigation mobile.

La balise HTML <img> ne permet pas de résoudre ces problèmes, c’est pourquoi Next.js fournit un composant Image pour la remplacer et l’améliorer.

Le composant Image de Next.js

Le composant Image permet d’optimiser et de servir les images de manière efficace. Le composant va déclencher :

• L’optimisation automatique du fichier : compression, redimensionnement, conversion WebP
• Le lazy loading avec un placeholder temporaire (une version floutée par exemple, qui se charge plus vite en attendant l’image complète)
• La réduction du Cumulative Layout Shift.

En particulier, le CLS mesure les sauts dans la page quand l’image est chargée et que sa dimension réelle devient connue. On veut bien sûr éliminer ces sauts.

En utilisant le composant Image au lieu de la balise <img> standard, vous profitez directement de tous ces apports sans avoir à optimiser manuellement chaque fichier en amont.

Comparaison entre Image et <img>

Rien de mieux qu’un tableau récapitulatif pour bien comprendre ce qu’il se passe quand on utilise le composant Image :

Code	Évite le Layout Shift ?	Optimisation des fichiers ?
<img src={...} />	Non	Non
<img src={...} width={500} height={500} />	Oui	Non
import img from "./img.png"; <Image src={img} />	Oui, largeur/hauteur déduites automatiquement	Oui
import img from "./img.png"; <Image src={img} width={500} height={500} />	Oui, respecte les attributs width/height	Oui
<Image src="/url/img.png" width={500} height={500} />	Oui, respecte les attributs width/height	Oui
<Image src="/url/img.png" />	Non, génère une erreur	N/A

On comprend évidemement l’intérêt d’optimiser la taille du fichier image, mais il ne faut pas sous-estimer l’intérêt d’éviter au passage les shifts.

Vous remarquerez que si vous utilisez une image distante, via son URL, il faut bien configurer sa taille et sa hauteur pour éviter ces sauts de mise en page.

La documentation de Next.js vous permettra d’aller plus loin pour comprendre tous les cas particuliers.

Approches alternatives pour optimiser les images

Bien que le composant Image de Next.js soit très efficace, vous pouvez avoir besoin de plus de contrôle sur le processus d’optimisation.

Voici quelques approches alternatives :

• Optimisation manuelle avec des outils comme Sharp (utilisé dans Gatsby par exemple)
• Implémentation de loaders personnalisés pour affiner les paramètres d’optimisation (compresser l’image soi-même)
• Utilisation d’un CDN tiers spécialisé dans les images ou d’un service d’optimisation

Vous connaissez maitenant les grandes lignes, mais le mieux pour vraiment comprendre le composant Image, c’est de l’essayer !