Les images représentent souvent plus de la moitié du poids d'une page web. Mal gérées, elles plombent votre LCP, font fuir vos visiteurs et pénalisent votre référencement. Bonne nouvelle : le composant next/image règle l'essentiel du problème pour vous, à condition de savoir l'utiliser correctement.
Dans cet article, je vais détailler comment tirer le maximum de next/image dans Next.js 16 : du redimensionnement automatique aux formats modernes, en passant par les pièges qui annulent tous les bénéfices si on ne fait pas attention.
Pourquoi ne pas se contenter d'une balise <img>
Une balise <img src="/photo.jpg" /> classique a plusieurs défauts. Elle sert toujours la même image, quelle que soit la taille de l'écran : un mobile en 360px de large télécharge parfois une image pensée pour un écran 4K. Elle ne convertit pas vers des formats modernes comme WebP ou AVIF, qui pèsent 25 à 50 % de moins que le JPEG. Et surtout, elle ne réserve pas l'espace de la mise en page, ce qui provoque des sauts visuels (le fameux Cumulative Layout Shift).
next/image corrige tout ça automatiquement. Il génère plusieurs tailles d'image, choisit le bon format selon le navigateur, applique le lazy loading par défaut, et réserve l'espace pour éviter le décalage. Concrètement, vous écrivez moins de code et obtenez de meilleures performances.
import Image from "next/image";
export default function Hero() {
return (
<Image
src="/hero.jpg"
alt="Vue du produit"
width={1200}
height={630}
/>
);
}
Avec ces quelques lignes, Next.js sert déjà une version WebP redimensionnée, en lazy loading, sans aucune configuration supplémentaire.
Images statiques vs images distantes
Il existe deux grandes manières de fournir une source à next/image, et elles ne se comportent pas de la même façon.
Import statique
Quand l'image est dans votre projet, importez-la directement. Next.js connaît alors ses dimensions réelles à la compilation et génère même un placeholder flou pour vous.
import Image from "next/image";
import hero from "@/public/hero.jpg";
export default function Hero() {
return (
<Image
src={hero}
alt="Vue du produit"
placeholder="blur"
priority
/>
);
}
Notez qu'on ne passe pas width ni height ici : ils sont déduits du fichier importé. C'est l'approche la plus sûre, car elle élimine tout risque de mauvaise dimension.
Image distante
Pour une image hébergée ailleurs (CMS, S3, Cloudinary…), vous devez fournir width et height manuellement, et autoriser le domaine dans la configuration. Next.js refuse par sécurité d'optimiser n'importe quelle URL externe.
// next.config.ts
import type { NextConfig } from "next";
const nextConfig: NextConfig = {
images: {
remotePatterns: [
{
protocol: "https",
hostname: "cdn.mon-site.fr",
pathname: "/uploads/**",
},
],
},
};
export default nextConfig;
Sans cette autorisation, vous obtiendrez une erreur du type « hostname is not configured under images ». C'est volontaire : cela évite que votre serveur d'optimisation soit utilisé comme proxy pour des images arbitraires.
La propriété priority : le levier le plus sous-estimé
Par défaut, next/image charge les images en lazy loading. C'est excellent pour les images sous la ligne de flottaison, mais désastreux pour l'image principale visible dès le chargement — typiquement votre image de hero.
Cette image est presque toujours votre élément LCP (Largest Contentful Paint), l'un des trois Core Web Vitals que Google mesure. Si elle est en lazy loading, le navigateur la découvre tard, et votre LCP s'envole.
<Image
src={hero}
alt="Bannière d'accueil"
priority
/>
La règle est simple : l'image principale au-dessus de la ligne de flottaison reçoit priority, toutes les autres restent en lazy loading. N'en mettez qu'une ou deux par page : si tout est prioritaire, plus rien ne l'est, et vous saturez la bande passante au pire moment.
Maîtriser sizes pour les images responsives
C'est l'erreur la plus fréquente, et celle qui annule le plus de bénéfices. Quand vous utilisez fill ou des images qui changent de largeur selon le viewport, Next.js a besoin de l'attribut sizes pour choisir la bonne résolution. Sans lui, il suppose que l'image fait 100 % de la largeur de l'écran et sert souvent une image bien trop lourde.
<div className="relative aspect-video">
<Image
src={photo}
alt="Galerie"
fill
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
className="object-cover"
/>
</div>
Ici, on indique au navigateur : sur mobile l'image occupe toute la largeur, sur tablette la moitié, sur desktop un tiers. Next.js sélectionne alors la variante la plus adaptée dans son srcset. Sur une grille de produits, cela peut diviser par trois le poids téléchargé sur mobile.
Pensez aussi au conteneur : avec fill, le parent doit avoir position: relative (ou absolute/fixed) et une hauteur définie, sinon l'image s'effondre.
Formats modernes et qualité
Next.js 16 sert AVIF et WebP automatiquement selon le navigateur, en se basant sur l'en-tête Accept. Vous pouvez ajuster l'ordre de préférence et la qualité globalement.
// next.config.ts
const nextConfig: NextConfig = {
images: {
formats: ["image/avif", "image/webp"],
// qualités autorisées (Next.js 16 exige une liste explicite)
qualities: [50, 75, 90],
},
};
AVIF compresse mieux que WebP mais est légèrement plus lent à encoder. Pour un site avec beaucoup d'images et un cache bien configuré, le surcoût d'encodage est négligeable face au gain de poids. Côté qualité, une valeur de 75 est un excellent compromis pour la plupart des photos ; descendre à 50 reste souvent acceptable pour des vignettes.
<Image src={photo} alt="Vignette" width={300} height={200} quality={50} />
Éviter le Cumulative Layout Shift
Le décalage de mise en page survient quand une image apparaît et pousse le contenu déjà affiché. next/image l'empêche dès lors que vous fournissez les bonnes dimensions, car il réserve l'espace via le ratio largeur/hauteur.
Deux approches fiables : soit vous donnez width et height correspondant au ratio réel de l'image, soit vous utilisez fill dans un conteneur dont le ratio est fixé en CSS.
{/* Ratio fixé par width/height */}
<Image src={photo} alt="Article" width={800} height={450} />
{/* Ratio fixé par le conteneur */}
<div className="relative aspect-[4/3]">
<Image src={photo} alt="Article" fill className="object-cover" />
</div>
L'utilitaire Tailwind aspect-[4/3] est parfait ici : il garantit que l'espace est réservé avant même que l'image ne se charge, supprimant tout saut.
Le placeholder flou pour une perception plus fluide
Un écran blanc pendant le chargement donne une impression de lenteur. Le placeholder flou affiche une version minuscule et floutée de l'image en attendant la vraie. Avec un import statique, c'est automatique.
<Image src={hero} alt="Accueil" placeholder="blur" />
Pour une image distante, vous devez fournir vous-même une version base64 réduite via blurDataURL. Beaucoup de CMS et de services comme Cloudinary peuvent la générer pour vous. Ce détail visuel améliore nettement la perception de rapidité, surtout sur connexion lente.
Récapitulatif des bonnes pratiques
Pour résumer ce qui fait vraiment la différence : importez vos images statiquement quand c'est possible pour profiter des dimensions et du blur automatiques ; mettez priority uniquement sur l'image LCP au-dessus de la ligne de flottaison ; renseignez toujours sizes dès que vous utilisez fill ou des largeurs responsives ; fixez le ratio pour éviter le CLS ; et laissez Next.js gérer AVIF/WebP plutôt que de servir des JPEG bruts.
Bien utilisé, next/image transforme la performance d'un site sans effort de votre part au quotidien. Mal utilisé — image hero en lazy, sizes manquant, dimensions absentes — il n'apporte presque rien. La différence tient entièrement à ces quelques réglages.
Si vous voulez aller plus loin sur la performance globale, j'ai déjà détaillé l'optimisation des Core Web Vitals dans Next.js et l'usage du Streaming et de Suspense pour réduire le temps de chargement perçu.
Conclusion
L'optimisation des images n'est pas un détail cosmétique : c'est l'un des leviers les plus rentables pour améliorer à la fois l'expérience utilisateur et le référencement. next/image met cette optimisation à portée de quelques attributs bien choisis. Le composant fait le gros du travail, mais c'est à vous de lui donner les bonnes instructions — priority, sizes, dimensions correctes — pour qu'il déploie tout son potentiel.
Vous avez un projet web et vous voulez un site rapide, bien optimisé et pensé pour le référencement dès le départ ? N'hésitez pas à me contacter pour en discuter, ou écrivez-moi directement à contact@alexis-mouchon.fr.