Comment optimiser les images dans Next.js pour améliorer les performances

Les images représentent souvent 50 à 70 % de la taille totale d’une page web, impactant directement les métriques Core Web Vitals comme le Largest Contentful Paint (LCP) et le Cumulative Layout Shift (CLS). Une mauvaise gestion des images peut faire chuter vos scores Lighthouse, augmenter les taux de rebond et nuire à votre référencement SEO—même si votre JavaScript est parfaitement optimisé.

Ce guide couvre l’optimisation des images dans Next.js en utilisant le composant intégré next/image, de l’implémentation de base à l’intégration avancée de CDN et aux stratégies de mise en cache. Vous apprendrez comment diffuser des images responsives et à chargement rapide qui améliorent à la fois les métriques de performance et l’expérience utilisateur.

Pourquoi le composant next/image est essentiel pour les performances

Le composant next/image n’est pas simplement un wrapper autour de la balise HTML <img>—c’est un pipeline d’optimisation automatisé qui gère la complexité de la diffusion d’images moderne.

Fonctionnalités de performance principales

Conversion automatique de format : Next.js sert les formats WebP et AVIF lorsque les navigateurs les supportent, réduisant la taille des fichiers de 25 à 35 % par rapport aux formats JPEG/PNG sans perte de qualité.

Génération d’images responsives : Le composant crée plusieurs tailles d’images au moment du build ou à la demande, garantissant que les utilisateurs mobiles ne téléchargent pas des images dimensionnées pour desktop.

Lazy loading intégré : Les images en dessous de la ligne de flottaison se chargent uniquement lorsque les utilisateurs défilent à proximité, réduisant le poids initial de la page et améliorant le First Contentful Paint (FCP).

Prévention des décalages de mise en page : En exigeant les props width et height (ou en utilisant la prop fill), le composant réserve l’espace avant le chargement des images, éliminant les problèmes de CLS.

Implémentation de base et props essentielles

Commencez par une implémentation simple qui couvre 80 % des cas d’usage :

import Image from 'next/image'

export default function Hero() {
  return (
    <Image
      src="/hero-banner.jpg"
      alt="Présentation du produit"
      width={1200}
      height={600}
      priority // Charge immédiatement pour l'optimisation du LCP
    />
  )
}

Quand utiliser les props clés

priority : Ajoutez cette prop aux images au-dessus de la ligne de flottaison qui affectent le LCP. Elle désactive le lazy loading et ajoute un lien de préchargement. À utiliser avec parcimonie—seulement pour 1 à 2 images critiques par page.

sizes : Essentielle pour les images responsives. Indique au navigateur quelle taille d’image télécharger en fonction de la largeur du viewport :

<Image
  src="/product.jpg"
  alt="Produit"
  width={800}
  height={600}
  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 800px"
/>

placeholder=“blur” : Affiche un placeholder de faible qualité pendant le chargement de l’image principale. Pour les imports statiques, Next.js génère automatiquement le blurDataURL :

import heroImage from '@/public/hero.jpg'

<Image
  src={heroImage}
  alt="Hero"
  placeholder="blur"
  // blurDataURL généré automatiquement pour les imports statiques
/>

Configuration des images distantes avec remotePatterns

Pour les images provenant de sources externes, configurez remotePatterns dans next.config.js (l’ancien paramètre domains est déprécié) :

// next.config.js
module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'cdn.example.com',
        pathname: '/images/**',
      },
    ],
  },
}

Cette fonctionnalité de sécurité empêche les requêtes d’images malveillantes tout en autorisant des sources externes spécifiques.

Optimisation avancée avec CDN et loaders personnalisés

Pour les applications à fort trafic, intégrez des CDN d’images spécialisés comme Cloudinary ou Imgix en utilisant des loaders personnalisés :

// lib/imageLoader.js
export default function cloudinaryLoader({ src, width, quality }) {
  const params = ['f_auto', 'c_limit', `w_${width}`, `q_${quality || 'auto'}`]
  return `https://res.cloudinary.com/demo/image/upload/${params.join(',')}/${src}`
}

// Utilisation dans le composant
<Image
  loader={cloudinaryLoader}
  src="product.jpg"
  alt="Produit"
  width={400}
  height={300}
/>

Stratégie de mise en cache pour des performances optimales

Next.js définit des en-têtes de cache agressifs par défaut :

Cache-Control: public, max-age=31536000, immutable

Pour du contenu dynamique, remplacez-les dans next.config.js :

module.exports = {
  async headers() {
    return [
      {
        source: '/_next/image(.*)',
        headers: [
          {
            key: 'Cache-Control',
            value: 'public, max-age=86400, stale-while-revalidate=604800',
          },
        ],
      },
    ]
  },
}

Bonnes pratiques pour la production

Mesurez l’impact avec des données réelles : Utilisez Lighthouse et WebPageTest pour suivre les améliorations du LCP. Une image hero correctement optimisée peut réduire le LCP de 1 à 2 secondes.

Équilibrez qualité et taille de fichier : Définissez quality={75} comme point de départ. Testez la qualité visuelle par rapport aux économies de taille de fichier—passer de 100 à 75 permet souvent d’économiser 40 % avec un impact visuel minimal.

Gérez différents types d’images de manière appropriée : Utilisez unoptimized pour les SVG et les ressources déjà optimisées :

<Image
  src="/logo.svg"
  alt="Logo"
  width={200}
  height={50}
  unoptimized
/>

TypeScript pour la sécurité des types : Importez les images pour la détection automatique des dimensions et la vérification des types :

import type { StaticImageData } from 'next/image'
import productImage from '@/public/product.jpg'

interface ProductCardProps {
  image: StaticImageData
  alt: string
}

Problèmes courants et dépannage

Erreur “Invalid src prop” : Assurez-vous que les domaines distants sont configurés dans remotePatterns ou utilisez un loader personnalisé.

Images floues sur les écrans haute résolution : Vérifiez que les images sources font au moins 2x la taille d’affichage et évitez les paramètres de qualité trop agressifs en dessous de 70.

Augmentation du temps de build : Pour les sites avec des centaines d’images, envisagez d’utiliser l’optimisation à la demande plutôt que le traitement au moment du build, ou implémentez un loader personnalisé avec un service externe.

Conclusion

L’optimisation des images dans Next.js via le composant next/image offre des gains de performance immédiats avec une configuration minimale. Commencez par les bases—dimensionnement approprié, lazy loading et conversion de format—puis ajoutez des techniques avancées comme l’intégration CDN et les loaders personnalisés à mesure que votre trafic augmente.

L’essentiel est de mesurer l’impact réel : des images correctement optimisées peuvent améliorer le LCP de 50 %, réduire les coûts de bande passante de 60 % et améliorer significativement vos scores Core Web Vitals. Concentrez-vous d’abord sur vos images au-dessus de la ligne de flottaison, puis optimisez systématiquement le reste de votre pipeline d’images.

FAQ

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.