Composant Image de Next.js : sizes, preload et images distantes
Guide du composant Image de Next.js
Next.js Image : sizes, preload, remotePatterns et LCP | We.Inc
Comment fonctionne next/image dans Next.js 16 : width, height et fill, un calculateur de sizes, preload qui remplace priority, remotePatterns, qualities et les largeurs srcset par défaut.
Importez Image depuis next/image et donnez-lui src, alt, puis soit width et height, soit fill. Ajoutez une chaîne sizes dès que la largeur affichée varie selon l'écran, pour que le navigateur télécharge un fichier plus petit. Pour l'image d'en-tête qui constitue votre LCP, définissez preload (il a remplacé priority dans Next.js 16). Autorisez les hôtes externes avec images.remotePatterns.
Les props qui déterminent la vitesse
Prop
Par défaut
À utiliser quand
width / height
L'image a une taille fixe, ou vous voulez réserver son ratio
C'est le conteneur parent qui fixe la taille (cartes, en-têtes, couvertures)
le navigateur suppose 100vw
L'image est responsive ou utilise fill
L'image est l'élément LCP au-dessus de la ligne de flottaison
Choisissez eager uniquement pour les images qui doivent se charger immédiatement
Seules les valeurs listées dans images.qualities sont servies
Deux erreurs d'image sont faciles à commettre dans Next.js : une image fill sans sizes, si bien que les téléphones téléchargent les fichiers prévus pour ordinateur, et une image d'en-tête qui attend le chargement différé. Cette page explique chaque prop en termes simples, vous fournit un calculateur qui écrit la chaîne sizes adaptée à votre mise en page et liste les valeurs de configuration par défaut qu'utilise Next.js aujourd'hui.
Choisissez la mise en page dans laquelle se trouve votre image, par exemple pleine largeur, deux colonnes ou une grille de trois cartes.
Indiquez les points de rupture utilisés par votre CSS. Le calculateur écrit la valeur sizes correspondante.
Choisissez une largeur de téléphone et une densité de pixels pour voir quelle largeur srcset par défaut le navigateur récupérerait le plus probablement.
Copiez l'élément Image terminé et collez-le dans votre composant.
Les imports statiques (import hero from './hero.jpg') renseignent width, height et blurDataURL pour vous : privilégiez-les pour les images présentes dans le dépôt.
Donnez à une image fill un parent avec position: relative et une vraie hauteur, sinon elle se réduit à rien.
Une seule image par viewport devrait recevoir preload. En marquer plusieurs n'a plus de sens et les met en concurrence pour la bande passante.
Restreignez remotePatterns : précisez le protocole, le nom d'hôte exact et un préfixe de chemin plutôt que d'autoriser tout un domaine.
Quand une qualité que vous passez ne figure pas dans images.qualities, Next.js sert la valeur autorisée la plus proche et affiche un avertissement en développement.
Questions fréquentes
La prop priority est-elle dépréciée ?
Oui. Depuis Next.js 16, la documentation marque priority comme dépréciée au profit de preload, qui insère un lien de préchargement dans le head. La documentation précise aussi que dans la plupart des cas, loading="eager" ou fetchPriority="high" est le meilleur choix, et que preload ne doit être combiné avec aucune de ces deux props.
Pourquoi next/image indique-t-il que le nom d'hôte n'est pas configuré ?
Les images externes doivent correspondre à une entrée de images.remotePatterns dans next.config. Ajoutez un objet avec protocol, hostname et un pathname comme /photos/**, puis redémarrez le serveur de développement. Les requêtes qui ne correspondent à aucun motif reçoivent une réponse 400 de l'optimiseur d'images.
Que change réellement la prop sizes ?
Elle indique au navigateur la largeur de l'image à chaque point de rupture avant le chargement du CSS. Avec sizes, Next.js génère aussi un srcset complet basé sur les largeurs (640w, 750w, etc.) au lieu de seulement 1x et 2x, si bien qu'un téléphone peut choisir un fichier bien plus petit.
Faut-il width et height avec fill ?
Non. fill et width/height sont des alternatives. Avec fill, l'image s'étire jusqu'à son parent positionné, et vous contrôlez le recadrage avec object-fit via la prop style ou className.
Combien de temps les images optimisées sont-elles mises en cache ?
La valeur par défaut de minimumCacheTTL est de 14400 secondes, soit quatre heures. La durée maximale réelle est la plus grande des deux : cette valeur ou l'en-tête Cache-Control envoyé par l'image d'origine. Les images importées statiquement bénéficient d'une mise en cache immuable de longue durée, car leurs noms de fichiers sont hachés.
Pourquoi ce composant existe
Une simple balise img envoie le même fichier à tous les appareils. next/image redimensionne la source à la demande, la convertit dans un format moderne accepté par le navigateur, la charge en différé par défaut et réserve l'espace pour que la mise en page ne saute pas pendant son arrivée.
Le piège, c'est qu'il ne peut choisir un fichier adapté que s'il connaît la largeur de l'image. C'est le rôle de width, height et sizes, et c'est là que se produisent la plupart des erreurs en conditions réelles.
Bien gérer le LCP
Le Largest Contentful Paint est souvent une photo d'en-tête. La charger en différé retarde la métrique : marquez-la donc avec preload, ou avec loading="eager" plus fetchPriority="high", et laissez toutes les images sous la ligne de flottaison sur le chargement différé par défaut.
Associez cela à une valeur sizes honnête. Une image d'en-tête qui occupe toute la largeur sur téléphone mais seulement la moitié de la page sur ordinateur doit l'indiquer, sinon grands et petits écrans reçoivent tous deux le mauvais fichier.
La configuration que vous modifierez
remotePatterns liste les hôtes externes auxquels vous faites confiance. qualities est une liste autorisée de valeurs de qualité, obligatoire depuis Next.js 16, que la documentation fixe par défaut à 75. formats vous permet d'ajouter AVIF avant WebP, au prix du stockage des deux versions dans le cache.
deviceSizes et imageSizes forment ensemble les largeurs candidates de chaque srcset. Vous aurez rarement besoin de les changer, mais connaître les valeurs par défaut aide à lire ce que le navigateur a téléchargé dans le panneau réseau.
Toutes les props que vous utiliserez probablement
Props de next/image (référence Next.js 16)
Prop
Type
Rôle
chaîne ou import statique
Chemin local dans public, fichier importé ou URL externe autorisée par remotePatterns
Texte alternatif obligatoire ; n'utilisez une chaîne vide que pour les images décoratives
width, height
entier (px)
Taille intrinsèque utilisée pour le ratio ; inutile pour les imports statiques ou fill
S'étire jusqu'au parent positionné au lieu d'utiliser width et height
Conditions média et largeurs d'emplacement qui pilotent le choix dans srcset
entier de 1 à 100
Qualité de sortie, 75 par défaut, alignée sur la liste images.qualities
Ajoute un lien de préchargement dans le head pour l'image LCP
lazy ou eager
lazy par défaut
empty, blur ou URL data
Ce qui s'affiche pendant le chargement ; blur nécessite blurDataURL sauf pour un import statique
Sert le fichier source tel quel, sans redimensionnement ni changement de format
Dépréciée dans Next.js 16 ; utilisez preload à la place
Valeurs par défaut de la configuration des images
Réglages images dans next.config et leurs valeurs par défaut
Réglage
Par défaut
Remarques
deviceSizes
Largeurs pour les images pleine largeur et fill
imageSizes
Petites largeurs supplémentaires, utilisées seulement quand l'image a une prop sizes
Liste autorisée obligatoire depuis Next.js 16
minimumCacheTTL
14400 (4 heures)
La plus grande valeur entre celle-ci et le Cache-Control d'origine l'emporte
remotePatterns
Chaque hôte externe doit être listé
Exemples à copier
Image d'en-tête depuis un import statique
L'import fournit à Next.js les vraies dimensions et un espace réservé flouté. preload lance le téléchargement depuis le head.
Grille de cartes avec fill et sizes
Chaque carte occupe un tiers de la page sur ordinateur, la moitié sur tablette et toute la largeur sur téléphone, et la valeur sizes le dit précisément.
next.config.ts pour un hôte d'images distant
Seuls les fichiers HTTPS sous /uploads/ sur un seul hôte sont autorisés. Deux valeurs de qualité sont permises.
Pleine largeur
Moitié sur ordinateur
Grille de 2 colonnes
Grille de 3 cartes
Grille de 4 cartes
Calculateur de sizes
Choisissez une mise en page et des points de rupture pour générer l'attribut sizes, puis voyez quelle largeur srcset par défaut un écran donné téléchargera probablement.
Mise en page
Point de rupture téléphone (px)
Point de rupture tablette (px)
Largeur d'écran : {n}px
Densité de pixels
À {screen}px, l'emplacement de l'image mesure environ {slot}px de large ({vw}vw). À une densité de {dpr}x, il faut {need} pixels physiques, donc le navigateur récupérera très probablement la variante {pick}w.
Copier
Largeurs candidates par défaut : {list}. Les navigateurs peuvent choisir autrement, par exemple quand un fichier plus grand est déjà en cache.