Optimisation automatique des images

Images non optimisées

En utilisant du HTML classique, nous avons ajouté notre image Hero comme ceci :

<img src="large-image.jpg" alt="Large Image" />

Cependant, cela signifie que nous devons optimiser manuellement certains aspects comme :

• S'assurer que notre image est réactive sur différentes tailles d'écran.
• Optimiser nos images avec un outil ou une bibliothèque tierce.
• Charger les images de manière différée (lazy-loading) lorsqu'elles entrent dans la zone visible.

Le composant Image

Next fournit un composant Image qui peut gérer ces optimisations directement pour nous.

next/image est une extension de l'élément HTML img, évolué pour le web moderne.

Cela signifie que le redimensionnement, l'optimisation et la diffusion d'images dans des formats modernes comme WebP (lorsque le navigateur le supporte) peuvent être effectués automatiquement avec next/image.

Le composant évite d'envoyer des images volumineuses à des appareils avec une zone d'affichage plus petite et permet à Next.js d'adopter de futurs formats d'image et de les servir aux navigateurs qui les supportent.

L'optimisation automatique des images fonctionne avec n'importe quelle source d'image. Même si l'image est hébergée par une source de données externe, comme un CMS, elle peut toujours être optimisée.

Comment fonctionne l'optimisation automatique des images ?

Optimisation à la demande

Au lieu d'optimiser les images au moment de la construction, Next.js optimise les images à la demande lorsque les utilisateurs les requièrent. Contrairement aux générateurs de sites statiques et aux solutions uniquement statiques, les temps de construction n'augmentent pas, que vous livriez dix images ou dix millions d'images.

Images chargées de manière différée

Les images sont chargées de manière différée par défaut. La vitesse de la page ne sera pas pénalisée pour les images situées en dehors de la zone visible. Les images ne se chargent que lorsqu'elles entrent dans le champ de vision.

Évite le CLS

Les images sont toujours rendues pour éviter le décalage cumulatif de mise en page (CLS - Cumulative Layout Shift).

Utilisation du composant Image

Mettons à jour l'application en utilisant next/image pour afficher notre image Hero. Les propriétés height et width doivent correspondre à la taille de rendu souhaitée, avec un rapport d'aspect identique à celui de l'image source.

Ouvrez le fichier pages/index.js et ajoutez une importation pour Image depuis next/image au début du fichier :

import Image from 'next/image';

Ensuite, remplacez l'image Hero img par le composant Image :

// Avant
<img src="large-image.jpg" alt="Large Image" />
 
// Après
<Image src="/large-image.jpg" alt="Large Image" width={3048} height={2024} />

Il y a aussi une image dans le pied de page. Remplaçons-la également :

// Avant
<img src="/vercel.svg" alt="Vercel Logo" />
 
// Après
<Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />

Enfin, exécutez à nouveau un rapport Lighthouse dans Chrome DevTools et comparez vos résultats.

Pour aller plus loin

• Next.js : Documentation sur l'optimisation automatique des images
• Next.js : Référence API pour next/image