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 !
