Comment optimiser les images

Le composant <Image> de Next.js étend l'élément HTML <img> pour fournir :

• Optimisation de taille : Servir automatiquement des images de la bonne taille pour chaque appareil, en utilisant des formats modernes comme WebP.
• Stabilité visuelle : Empêcher automatiquement le décalage de mise en page (layout shift) lors du chargement des images.
• Chargement plus rapide des pages : Ne charger les images que lorsqu'elles entrent dans la zone visible grâce au chargement différé natif du navigateur, avec des placeholders de flou optionnels.
• Flexibilité des assets : Redimensionner les images à la demande, même celles stockées sur des serveurs distants.

Pour commencer à utiliser <Image>, importez-le depuis next/image et utilisez-le dans votre composant.

import Image from 'next/image'

export default function Page() {
  return <Image src="" alt="" />
}

La propriété src peut être une image locale ou distante.

🎥 Regardez : En savoir plus sur l'utilisation de next/image → YouTube (9 minutes).

Images locales

Vous pouvez stocker des fichiers statiques, comme des images et des polices, dans un dossier appelé public à la racine du projet. Les fichiers dans public peuvent ensuite être référencés dans votre code à partir de l'URL de base (/).

import Image from 'next/image'

export default function Page() {
  return (
    <Image
      src="/profile.png"
      alt="Photo de l'auteur"
      width={500}
      height={500}
    />
  )
}

Images importées statiquement

Vous pouvez aussi importer et utiliser des fichiers image locaux. Next.js déterminera automatiquement la width et la height intrinsèques de votre image en fonction du fichier importé. Ces valeurs sont utilisées pour déterminer le ratio de l'image et éviter un décalage de mise en page cumulatif (Cumulative Layout Shift) pendant le chargement de votre image.

import Image from 'next/image'
import ProfileImage from './profile.png'

export default function Page() {
  return (
    <Image
      src={ProfileImage}
      alt="Photo de l'auteur"
      // width={500} fourni automatiquement
      // height={500} fourni automatiquement
      // blurDataURL="data:..." fourni automatiquement
      // placeholder="blur" // Flou optionnel pendant le chargement
    />
  )
}

Dans ce cas, Next.js s'attend à ce que le fichier app/profile.png soit disponible.

Images distantes

Pour utiliser une image distante, vous pouvez fournir une URL sous forme de chaîne pour la propriété src.

import Image from 'next/image'

export default function Page() {
  return (
    <Image
      src="https://s3.amazonaws.com/my-bucket/profile.png"
      alt="Photo de l'auteur"
      width={500}
      height={500}
    />
  )
}

Comme Next.js n'a pas accès aux fichiers distants pendant la phase de build, vous devez fournir manuellement les propriétés width, height et optionnellement blurDataURL. width et height sont utilisés pour déduire le bon ratio d'aspect de l'image et éviter un décalage de mise en page lors du chargement.

Pour autoriser en toute sécurité les images provenant de serveurs distants, vous devez définir une liste de modèles d'URL pris en charge dans next.config.js. Soyez aussi spécifique que possible pour éviter les utilisations malveillantes. Par exemple, la configuration suivante n'autorise que les images provenant d'un bucket AWS S3 spécifique :

import type { NextConfig } from 'next'

const config: NextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 's3.amazonaws.com',
        port: '',
        pathname: '/my-bucket/**',
        search: '',
      },
    ],
  },
}

export default config