Image

Le composant Image de Next.js étend l'élément HTML <img> pour une optimisation automatique des images.

import Image from 'next/image'

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

Bon à savoir : Si vous utilisez une version de Next.js antérieure à la 13, vous devrez consulter la documentation next/legacy/image car le composant a été renommé.

Référence

Props

Les props suivantes sont disponibles :

src

La source de l'image. Peut être l'une des options suivantes :

Une chaîne de caractères représentant un chemin interne.

<Image src="/profile.png" />

Une URL externe absolue (doit être configurée avec remotePatterns).

<Image src="https://example.com/profile.png" />

Une importation statique.

import profile from './profile.png'

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

alt

La propriété alt est utilisée pour décrire l'image pour les lecteurs d'écran et les moteurs de recherche. C'est aussi le texte de remplacement si les images sont désactivées ou si une erreur survient lors du chargement.

Elle doit contenir un texte qui pourrait remplacer l'image sans changer le sens de la page. Elle n'est pas destinée à compléter l'image et ne doit pas répéter des informations déjà fournies dans les légendes au-dessus ou en dessous de l'image.

Si l'image est purement décorative ou non destinée à l'utilisateur, la propriété alt doit être une chaîne vide (alt="").

En savoir plus sur les directives d'accessibilité des images.

width et height

Les propriétés width et height représentent la taille intrinsèque de l'image en pixels. Cette propriété est utilisée pour déduire le ratio d'aspect correct utilisé par les navigateurs pour réserver de l'espace pour l'image et éviter les décalages de mise en page pendant le chargement. Elle ne détermine pas la taille affichée de l'image, qui est contrôlée par CSS.

<Image src="/profile.png" width={500} height={500} />

Vous devez définir les deux propriétés width et height sauf si :

• L'image est importée statiquement
• L'image a la propriété fill

Si la hauteur et la largeur sont inconnues, nous recommandons d'utiliser la propriété fill.

fill

Un booléen qui fait que l'image s'étend à la taille de l'élément parent.

<Image src="/profile.png" fill={true} />

Positionnement :

• L'élément parent doit avoir position: "relative", "fixed", "absolute".
• Par défaut, l'élément <img> utilise position: "absolute".

Object Fit :

Si aucun style n'est appliqué à l'image, celle-ci s'étirera pour remplir le conteneur. Vous pouvez utiliser objectFit pour contrôler le recadrage et la mise à l'échelle.

• "contain" : L'image sera réduite pour s'adapter au conteneur tout en préservant le ratio d'aspect.
• "cover" : L'image remplira le conteneur et sera recadrée.

En savoir plus sur position et object-fit.

loader

Une fonction personnalisée utilisée pour générer l'URL de l'image. La fonction reçoit les paramètres suivants et retourne une URL sous forme de chaîne pour l'image :

• src
• width
• quality

import Image from 'next/image'

const imageLoader = ({ src, width, quality }) => {
  return `https://example.com/${src}?w=${width}&q=${quality || 75}`
}

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

Alternativement, vous pouvez utiliser la configuration loaderFile dans next.config.js pour configurer chaque instance de next/image dans votre application, sans passer de prop.

sizes

Définit les tailles de l'image à différents points de rupture. Utilisé par le navigateur pour choisir la taille la plus appropriée parmi les srcset générés.

import Image from 'next/image'

export default function Page() {
  return (
    <div className="grid-element">
      <Image
        fill
        src="/example.png"
        sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
      />
    </div>
  )
}

sizes doit être utilisé lorsque :

• L'image utilise la prop fill
• CSS est utilisé pour rendre l'image responsive

Si sizes est manquant, le navigateur suppose que l'image sera aussi large que la fenêtre d'affichage (100vw). Cela peut entraîner le téléchargement d'images inutilement grandes.

De plus, sizes affecte la génération de srcset :

• Sans sizes : Next.js génère un srcset limité (par ex. 1x, 2x), adapté aux images de taille fixe.
• Avec sizes : Next.js génère un srcset complet (par ex. 640w, 750w, etc.), optimisé pour les mises en page responsives.

En savoir plus sur srcset et sizes sur web.dev et mdn.

quality

Un entier entre 1 et 100 qui définit la qualité de l'image optimisée. Des valeurs plus élevées augmentent la taille du fichier et la fidélité visuelle. Des valeurs plus basses réduisent la taille du fichier mais peuvent affecter la netteté.

// La qualité par défaut est 75
<Image quality={75} />

Si vous avez configuré qualities dans next.config.js, la valeur doit correspondre à l'une des entrées autorisées.

Bon à savoir : Si l'image originale est déjà de faible qualité, définir une valeur de qualité élevée augmentera la taille du fichier sans améliorer l'apparence.

style

Permet de passer des styles CSS à l'élément image sous-jacent.

const imageStyle = {
  borderRadius: '50%',
  border: '1px solid #fff',
  width: '100px',
  height: 'auto',
}

export default function ProfileImage() {
  return <Image src="..." style={imageStyle} />
}

Bon à savoir : Si vous utilisez la prop style pour définir une largeur personnalisée, assurez-vous de définir également height: 'auto' pour préserver le ratio d'aspect de l'image.

priority

Un booléen qui indique si l'image doit être préchargée.

// La priorité par défaut est false
<Image priority={false} />

• true : Précharge l'image. Désactive le chargement différé.
• false : Charge l'image de manière différée.

Quand l'utiliser :

• L'image est au-dessus de la ligne de flottaison.
• L'image est l'élément Largest Contentful Paint (LCP).
• Vous souhaitez améliorer les performances de chargement initial de votre page.

Quand ne pas l'utiliser :

• Lorsque la prop loading est utilisée (déclenchera des avertissements).

loading

Contrôle quand l'image doit commencer à se charger.

// Par défaut à lazy
<Image loading="lazy" />

• lazy : Retarde le chargement de l'image jusqu'à ce qu'elle atteigne une distance calculée de la fenêtre d'affichage.
• eager : Charge l'image immédiatement, quelle que soit sa position dans la page.

Utilisez eager uniquement lorsque vous voulez vous assurer que l'image est chargée immédiatement.

En savoir plus sur l'attribut loading.

placeholder

Spécifie un placeholder à utiliser pendant le chargement de l'image, améliorant ainsi la perception des performances de chargement.

// Par défaut à empty
<Image placeholder="empty" />

• empty : Aucun placeholder pendant le chargement de l'image.
• blur : Utilise une version floue de l'image comme placeholder. Doit être utilisé avec la propriété blurDataURL.
• data:image/... : Utilise une Data URL comme placeholder.

Exemples :

• Placeholder blur
• Effet de scintillement avec la prop placeholder en Data URL
• Effet de couleur avec la prop blurDataURL

En savoir plus sur l'attribut placeholder.

blurDataURL

Une Data URL à utiliser comme image de placeholder avant que l'image ne soit chargée avec succès. Peut être définie automatiquement ou utilisée avec la propriété placeholder="blur".

<Image placeholder="blur" blurDataURL="..." />

L'image est automatiquement agrandie et floutée, donc une très petite image (10px ou moins) est recommandée.

Automatique

Si src est une importation statique d'un fichier jpg, png, webp ou avif, blurDataURL est ajoutée automatiquement — sauf si l'image est animée.

Définition manuelle

Si l'image est dynamique ou distante, vous devez fournir blurDataURL vous-même. Pour en générer une, vous pouvez utiliser :

• Un outil en ligne comme png-pixel.com
• Une bibliothèque comme Plaiceholder

Une grande blurDataURL peut nuire aux performances. Gardez-la petite et simple.

Exemples :

• Prop blurDataURL par défaut
• Effet de couleur avec la prop blurDataURL

onLoad

Une fonction de rappel qui est appelée une fois que l'image est complètement chargée et que le placeholder a été supprimé.

<Image onLoad={(e) => console.log(e.target.naturalWidth)} />

La fonction de rappel sera appelée avec un argument, l'événement qui a une target référençant l'élément <img> sous-jacent.

onError

Une fonction de rappel qui est appelée si l'image ne parvient pas à se charger.

<Image onError={(e) => console.error(e.target.id)} />

unoptimized

Un booléen qui indique si l'image doit être optimisée. Utile pour les images qui ne bénéficient pas de l'optimisation comme les petites images (moins de 1 Ko), les images vectorielles (SVG) ou les images animées (GIF).

import Image from 'next/image'

const UnoptimizedImage = (props) => {
  // Par défaut à false
  return <Image {...props} unoptimized />
}

• true : L'image source sera servie telle quelle depuis src sans modification de qualité, taille ou format.
• false : L'image source sera optimisée.

Depuis Next.js 12.3.0, cette prop peut être assignée à toutes les images en mettant à jour next.config.js avec la configuration suivante :

module.exports = {
  images: {
    unoptimized: true,
  },
}

overrideSrc

Lorsque vous fournissez la prop src au composant <Image>, les attributs srcset et src sont générés automatiquement pour l'élément <img> résultant.

<Image src="/profile.jpg" />

<img
  srcset="
    /_next/image?url=%2Fme.jpg&w=640&q=75 1x,
    /_next/image?url=%2Fme.jpg&w=828&q=75 2x
  "
  src="/_next/image?url=%2Fme.jpg&w=828&q=75"
/>

Dans certains cas, il n'est pas souhaitable d'avoir l'attribut src généré et vous pouvez souhaiter le remplacer en utilisant la prop overrideSrc.

Par exemple, lors de la mise à niveau d'un site web existant de <img> vers <Image>, vous pouvez souhaiter conserver le même attribut src pour des raisons de référencement comme le classement des images ou éviter un nouveau crawl.

<Image src="/profile.jpg" overrideSrc="/override.jpg" />

<img
  srcset="
    /_next/image?url=%2Fme.jpg&w=640&q=75 1x,
    /_next/image?url=%2Fme.jpg&w=828&q=75 2x
  "
  src="/override.jpg"
/>

decoding

Un indice pour le navigateur indiquant s'il doit attendre que l'image soit décodée avant de présenter d'autres mises à jour de contenu ou non.

// Par défaut à async
<Image decoding="async" />

• async : Décode l'image de manière asynchrone et permet à d'autres contenus d'être rendus avant que cela ne soit terminé.
• sync : Décode l'image de manière synchrone pour une présentation atomique avec d'autres contenus.
• auto : Aucune préférence. Le navigateur choisit la meilleure approche.

En savoir plus sur l'attribut decoding.

Autres Props

D'autres propriétés sur le composant <Image /> seront transmises à l'élément img sous-jacent à l'exception des suivantes :

• srcSet : Utilisez plutôt Device Sizes.

Props obsolètes

onLoadingComplete

Avertissement : Déprécié dans Next.js 14, utilisez plutôt onLoad.

Une fonction de rappel qui est appelée une fois que l'image est complètement chargée et que l'espace réservé (placeholder) a été supprimé.

La fonction de rappel sera appelée avec un argument, une référence à l'élément <img> sous-jacent.

<Image onLoadingComplete={(img) => console.log(img.naturalWidth)} />

Options de configuration

Vous pouvez configurer le Composant Image dans next.config.js. Les options suivantes sont disponibles :

localPatterns

Utilisez localPatterns dans votre fichier next.config.js pour autoriser l'optimisation des images provenant de chemins locaux spécifiques et bloquer toutes les autres.

module.exports = {
  images: {
    localPatterns: [
      {
        pathname: '/assets/images/**',
        search: '',
      },
    ],
  },
}

L'exemple ci-dessus garantira que la propriété src de next/image doit commencer par /assets/images/ et ne doit pas avoir de chaîne de requête. Toute tentative d'optimisation d'un autre chemin renverra une erreur 400 Bad Request.

remotePatterns

Utilisez remotePatterns dans votre fichier next.config.js pour autoriser les images provenant de chemins externes spécifiques et bloquer toutes les autres. Cela garantit que seules les images externes de votre compte peuvent être servies.

module.exports = {
  images: {
    remotePatterns: [new URL('https://example.com/account123/**')],
  },
}

Si vous utilisez une version antérieure à 15.3.0, vous pouvez configurer remotePatterns en utilisant l'objet :

module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'example.com',
        port: '',
        pathname: '/account123/**',
        search: '',
      },
    ],
  },
}

L'exemple ci-dessus garantira que la propriété src de next/image doit commencer par https://example.com/account123/ et ne doit pas avoir de chaîne de requête. Tout autre protocole, nom d'hôte, port ou chemin non correspondant renverra une erreur 400 Bad Request.

Modèles avec caractères génériques :

Les modèles avec caractères génériques peuvent être utilisés pour pathname et hostname et ont la syntaxe suivante :

• * correspond à un seul segment de chemin ou sous-domaine
• ** correspond à n'importe quel nombre de segments de chemin à la fin ou de sous-domaines au début. Cette syntaxe ne fonctionne pas au milieu du modèle.

module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: '**.example.com',
        port: '',
        search: '',
      },
    ],
  },
}

Cela permet des sous-domaines comme image.example.com. Les chaînes de requête et les ports personnalisés sont toujours bloqués.

Bon à savoir : Lorsque vous omettez protocol, port, pathname ou search, alors le caractère générique ** est implicite. Ce n'est pas recommandé car cela peut permettre à des acteurs malveillants d'optimiser des URL que vous ne souhaitiez pas.

Chaînes de requête :

Vous pouvez également restreindre les chaînes de requête en utilisant la propriété search :

module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'assets.example.com',
        search: '?v=1727111025337',
      },
    ],
  },
}

L'exemple ci-dessus garantira que la propriété src de next/image doit commencer par https://assets.example.com et doit avoir exactement la chaîne de requête ?v=1727111025337. Tout autre protocole ou chaîne de requête renverra une erreur 400 Bad Request.

loaderFile

loaderFiles vous permet d'utiliser un service d'optimisation d'images personnalisé au lieu de Next.js.

module.exports = {
  images: {
    loader: 'custom',
    loaderFile: './my/image/loader.js',
  },
}

Le chemin doit être relatif à la racine du projet. Le fichier doit exporter une fonction par défaut qui renvoie une chaîne d'URL :

export default function myImageLoader({ src, width, quality }) {
  return `https://example.com/${src}?w=${width}&q=${quality || 75}`
}

Exemple :

• Configuration personnalisée du chargeur d'images

Alternativement, vous pouvez utiliser la prop loader pour configurer chaque instance de next/image.

deviceSizes

deviceSizes vous permet de spécifier une liste de points de rupture de largeur d'appareil. Ces largeurs sont utilisées lorsque le composant next/image utilise la prop sizes pour s'assurer que la bonne image est servie pour l'appareil de l'utilisateur.

Si aucune configuration n'est fournie, la valeur par défaut ci-dessous est utilisée :

module.exports = {
  images: {
    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
  },
}

imageSizes

imageSizes vous permet de spécifier une liste de largeurs d'images. Ces largeurs sont concaténées avec le tableau des tailles d'appareil (device sizes) pour former le tableau complet des tailles utilisées pour générer le srcset de l'image.

Si aucune configuration n'est fournie, la valeur par défaut ci-dessous est utilisée :

module.exports = {
  images: {
    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
  },
}

imageSizes n'est utilisé que pour les images qui fournissent une prop sizes, ce qui indique que l'image est plus petite que la largeur totale de l'écran. Par conséquent, les tailles dans imageSizes doivent toutes être plus petites que la plus petite taille dans deviceSizes.

qualities

qualities vous permet de spécifier une liste de valeurs de qualité d'image.

module.exports = {
  images: {
    qualities: [25, 50, 75],
  },
}

Dans l'exemple ci-dessus, seules trois qualités sont autorisées : 25, 50 et 75. Si la prop quality ne correspond pas à une valeur de ce tableau, l'image échouera avec une erreur 400 Bad Request.

formats

formats vous permet de spécifier une liste de formats d'image à utiliser.

module.exports = {
  images: {
    // Par défaut
    formats: ['image/webp'],
  },
}

Next.js détecte automatiquement les formats d'image pris en charge par le navigateur via l'en-tête Accept de la requête afin de déterminer le meilleur format de sortie.

Si l'en-tête Accept correspond à plus d'un des formats configurés, la première correspondance dans le tableau est utilisée. Par conséquent, l'ordre du tableau est important. S'il n'y a pas de correspondance (ou si l'image source est animée), il utilisera le format original de l'image.

Vous pouvez activer la prise en charge AVIF, qui reviendra au format original de l'image src si le navigateur ne prend pas en charge AVIF :

module.exports = {
  images: {
    formats: ['image/avif'],
  },
}

Bon à savoir :

• Nous recommandons toujours d'utiliser WebP pour la plupart des cas d'utilisation.
• AVIF prend généralement 50 % plus de temps à encoder mais il compresse 20 % plus petit que WebP. Cela signifie que la première fois qu'une image est demandée, elle sera généralement plus lente, mais les requêtes suivantes qui sont mises en cache seront plus rapides.
• Si vous auto-hébergez avec un Proxy/CDN devant Next.js, vous devez configurer le Proxy pour transmettre l'en-tête Accept.

minimumCacheTTL

minimumCacheTTL vous permet de configurer le Time to Live (TTL) en secondes pour les images optimisées en cache. Dans de nombreux cas, il est préférable d'utiliser une Importation d'image statique (Static Image Import) qui hachera automatiquement le contenu du fichier et mettra l'image en cache indéfiniment avec un en-tête Cache-Control de immutable.

Si aucune configuration n'est fournie, la valeur par défaut ci-dessous est utilisée.

module.exports = {
  images: {
    minimumCacheTTL: 60, // 1 minute
  },
}

Vous pouvez augmenter le TTL pour réduire le nombre de revalidations et potentiellement réduire les coûts :

module.exports = {
  images: {
    minimumCacheTTL: 2678400, // 31 jours
  },
}

L'expiration (ou plutôt Max Age) de l'image optimisée est définie par minimumCacheTTL ou l'en-tête Cache-Control de l'image en amont, selon la valeur la plus grande.

Si vous devez modifier le comportement de mise en cache par image, vous pouvez configurer headers pour définir l'en-tête Cache-Control sur l'image en amont (par exemple /some-asset.jpg, et non /_next/image elle-même).

Il n'y a pas de mécanisme pour invalider le cache à ce stade, il est donc préférable de garder minimumCacheTTL bas. Sinon, vous devrez peut-être modifier manuellement la prop src ou supprimer le fichier en cache <distDir>/cache/images.

disableStaticImages

disableStaticImages vous permet de désactiver les importations d'images statiques.

Le comportement par défaut vous permet d'importer des fichiers statiques tels que import icon from './icon.png' et de les passer ensuite à la propriété src. Dans certains cas, vous pouvez souhaiter désactiver cette fonctionnalité si elle entre en conflit avec d'autres plugins qui s'attendent à ce que l'importation se comporte différemment.

Vous pouvez désactiver les importations d'images statiques dans votre next.config.js :

module.exports = {
  images: {
    disableStaticImages: true,
  },
}

dangerouslyAllowSVG

dangerouslyAllowSVG vous permet de servir des images SVG.

module.exports = {
  images: {
    dangerouslyAllowSVG: true,
  },
}

Par défaut, Next.js n'optimise pas les images SVG pour plusieurs raisons :

• SVG est un format vectoriel, ce qui signifie qu'il peut être redimensionné sans perte.
• SVG a de nombreuses fonctionnalités similaires à HTML/CSS, ce qui peut entraîner des vulnérabilités sans les bons en-têtes Content Security Policy (CSP).

Nous recommandons d'utiliser la prop unoptimized lorsque la prop src est connue pour être SVG. Cela se fait automatiquement lorsque src se termine par ".svg".

<Image src="/my-image.svg" unoptimized />

De plus, il est fortement recommandé de définir également contentDispositionType pour forcer le navigateur à télécharger l'image, ainsi que contentSecurityPolicy pour empêcher l'exécution des scripts intégrés dans l'image.

module.exports = {
  images: {
    dangerouslyAllowSVG: true,
    contentDispositionType: 'attachment',
    contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;",
  },
}

contentDispositionType

contentDispositionType vous permet de configurer l'en-tête Content-Disposition.

module.exports = {
  images: {
    contentDispositionType: 'inline',
  },
}

Par défaut, le chargeur (loader) définit l'en-tête Content-Disposition à attachment pour une protection supplémentaire puisque l'API peut servir des images distantes arbitraires.

La valeur par défaut est attachment, ce qui force le navigateur à télécharger l'image lors d'une visite directe. Ceci est particulièrement important lorsque dangerouslyAllowSVG est vrai.

Vous pouvez optionnellement configurer inline pour permettre au navigateur d'afficher l'image lors d'une visite directe, sans la télécharger.

Options de configuration dépréciées

domains

Avertissement : Déprécié depuis Next.js 14 en faveur des remotePatterns stricts afin de protéger votre application contre les utilisateurs malveillants. Utilisez domains uniquement si vous possédez tout le contenu servi depuis le domaine.

Similaire à remotePatterns, la configuration domains peut être utilisée pour fournir une liste de noms d'hôte autorisés pour les images externes. Cependant, la configuration domains ne prend pas en charge la correspondance avec des caractères génériques et ne peut pas restreindre le protocole, le port ou le chemin.

Voici un exemple de la propriété domains dans le fichier next.config.js :

module.exports = {
  images: {
    domains: ['assets.acme.com'],
  },
}

Fonctions

getImageProps

La fonction getImageProps peut être utilisée pour obtenir les props qui seraient passés à l'élément <img> sous-jacent, et les passer à un autre composant, style, canvas, etc.

import { getImageProps } from 'next/image'

const props = getImageProps({
  src: 'https://example.com/image.jpg',
  alt: 'Une vue panoramique de montagne',
  width: 1200,
  height: 800,
})

function ImageWithCaption() {
  return (
    <figure>
      <img {...props} />
      <figcaption>Une vue panoramique de montagne</figcaption>
    </figure>
  )
}

Cela évite également d'appeler React useState(), ce qui peut améliorer les performances, mais cela ne peut pas être utilisé avec la prop placeholder car l'espace réservé ne sera jamais supprimé.

Bogues connus des navigateurs

Ce composant next/image utilise le chargement différé natif du navigateur (lazy loading), qui peut revenir à un chargement immédiat pour les navigateurs plus anciens avant Safari 15.4. Lors de l'utilisation de l'espace réservé flou (blur-up placeholder), les navigateurs plus anciens avant Safari 12 reviendront à un espace réservé vide. Lors de l'utilisation de styles avec width/height en auto, il est possible de provoquer un Layout Shift sur les navigateurs plus anciens avant Safari 15 qui ne préservent pas le ratio d'aspect. Pour plus de détails, voir cette vidéo MDN.

• Safari 15 - 16.3 affiche une bordure grise pendant le chargement. Safari 16.4 a corrigé ce problème. Solutions possibles :

  • Utilisez CSS @supports (font: -apple-system-body) and (-webkit-appearance: none) { img[loading="lazy"] { clip-path: inset(0.6px) } }
  • Utilisez priority si l'image est au-dessus de la ligne de flottaison (above the fold)

• Firefox 67+ affiche un fond blanc pendant le chargement. Solutions possibles :

  • Activez les formats formats AVIF
  • Utilisez placeholder

Exemples

Styliser les images

Styliser le composant Image est similaire au stylage d'un élément <img> normal, mais il y a quelques directives à garder à l'esprit :

Utilisez className ou style, pas styled-jsx. Dans la plupart des cas, nous recommandons d'utiliser la prop className. Cela peut être un Module CSS importé, une feuille de style globale, etc.

import styles from './styles.module.css'

export default function MyImage() {
  return <Image className={styles.image} src="/my-image.png" alt="Mon image" />
}

Vous pouvez également utiliser la prop style pour attribuer des styles en ligne.

export default function MyImage() {
  return (
    <Image style={{ borderRadius: '8px' }} src="/my-image.png" alt="Mon image" />
  )
}

Lors de l'utilisation de fill, l'élément parent doit avoir position: relative ou display: block. Ceci est nécessaire pour le rendu correct de l'élément image dans ce mode de mise en page.

<div style={{ position: 'relative' }}>
  <Image fill src="/my-image.png" alt="Mon image" />
</div>

Vous ne pouvez pas utiliser styled-jsx car il est limité au composant actuel (sauf si vous marquez le style comme global).

Images réactives avec une exportation statique

Lorsque vous importez une image statique, Next.js définit automatiquement sa largeur et sa hauteur en fonction du fichier. Vous pouvez rendre l'image réactive en définissant le style :

import Image from 'next/image'
import mountains from '../public/mountains.jpg'

export default function Responsive() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column' }}>
      <Image
        alt="Mountains"
        // L'importation d'une image définira
        // automatiquement la largeur et la hauteur
        src={mountains}
        sizes="100vw"
        // Faire en sorte que l'image s'affiche en pleine largeur
        // et préserver son ratio d'aspect
        style={{
          width: '100%',
          height: 'auto',
        }}
      />
    </div>
  )
}

Images réactives avec une URL distante

Si l'image source est une URL dynamique ou distante, vous devez fournir les propriétés width et height pour que Next.js puisse calculer le ratio d'aspect :

import Image from 'next/image'

export default function Page({ photoUrl }) {
  return (
    <Image
      src={photoUrl}
      alt="Photo de l'auteur"
      sizes="100vw"
      style={{
        width: '100%',
        height: 'auto',
      }}
      width={500}
      height={300}
    />
  )
}

Essayez-le :

• Démo de l'image réactive à la fenêtre d'affichage

Image réactive avec fill

Si vous ne connaissez pas le ratio d'aspect de l'image, vous pouvez ajouter la propriété fill avec la propriété objectFit définie sur cover. Cela fera en sorte que l'image remplisse toute la largeur de son conteneur parent.

import Image from 'next/image'
import mountains from '../public/mountains.jpg'

export default function Fill() {
  return (
    <div
      style={{
        display: 'grid',
        gridGap: '8px',
        gridTemplateColumns: 'repeat(auto-fit, minmax(400px, auto))',
      }}
    >
      <div style={{ position: 'relative', width: '400px' }}>
        <Image
          alt="Mountains"
          src={mountains}
          fill
          sizes="(min-width: 808px) 50vw, 100vw"
          style={{
            objectFit: 'cover', // cover, contain, none
          }}
        />
      </div>
      {/* Et d'autres images dans la grille... */}
    </div>
  )
}

Image d'arrière-plan

Utilisez la propriété fill pour que l'image couvre toute la zone de l'écran :

import Image from 'next/image'
import mountains from '../public/mountains.jpg'

export default function Background() {
  return (
    <Image
      alt="Mountains"
      src={mountains}
      placeholder="blur"
      quality={100}
      fill
      sizes="100vw"
      style={{
        objectFit: 'cover',
      }}
    />
  )
}

Pour des exemples d'utilisation du composant Image avec différents styles, consultez la Démo du composant Image.

Images distantes

Pour utiliser une image distante, la propriété src doit être une URL sous forme de chaîne de caractères.

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 construction, vous devrez fournir manuellement les propriétés width, height et éventuellement blurDataURL.

Les attributs width et height sont utilisés pour déduire le bon ratio d'aspect de l'image et éviter les décalages de mise en page lors du chargement de l'image. Les valeurs width et height ne déterminent pas la taille affichée du fichier image.

Pour autoriser en toute sécurité l'optimisation des images, définissez une liste de modèles d'URL pris en charge dans next.config.js. Soyez aussi précis que possible pour éviter les utilisations malveillantes. Par exemple, la configuration suivante n'autorisera que les images provenant d'un compartiment AWS S3 spécifique :

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

Détection du thème

Si vous souhaitez afficher une image différente pour les modes clair et sombre, vous pouvez créer un nouveau composant qui encapsule deux composants <Image> et affiche le bon en fonction d'une requête média CSS.

.imgDark {
  display: none;
}

@media (prefers-color-scheme: dark) {
  .imgLight {
    display: none;
  }
  .imgDark {
    display: unset;
  }
}

import styles from './theme-image.module.css'
import Image, { ImageProps } from 'next/image'

type Props = Omit<ImageProps, 'src' | 'priority' | 'loading'> & {
  srcLight: string
  srcDark: string
}

const ThemeImage = (props: Props) => {
  const { srcLight, srcDark, ...rest } = props

  return (
    <>
      <Image {...rest} src={srcLight} className={styles.imgLight} />
      <Image {...rest} src={srcDark} className={styles.imgDark} />
    </>
  )
}

Bon à savoir : Le comportement par défaut de loading="lazy" garantit que seule la bonne image est chargée. Vous ne pouvez pas utiliser priority ou loading="eager" car cela entraînerait le chargement des deux images. À la place, vous pouvez utiliser fetchPriority="high".

Essayez-le :

• Démo de détection de thème clair/sombre

Direction artistique

Si vous souhaitez afficher une image différente pour mobile et bureau, parfois appelée Direction artistique, vous pouvez fournir différentes propriétés src, width, height et quality à getImageProps().

import { getImageProps } from 'next/image'

export default function Home() {
  const common = { alt: 'Exemple de direction artistique', sizes: '100vw' }
  const {
    props: { srcSet: desktop },
  } = getImageProps({
    ...common,
    width: 1440,
    height: 875,
    quality: 80,
    src: '/desktop.jpg',
  })
  const {
    props: { srcSet: mobile, ...rest },
  } = getImageProps({
    ...common,
    width: 750,
    height: 1334,
    quality: 70,
    src: '/mobile.jpg',
  })

  return (
    <picture>
      <source media="(min-width: 1000px)" srcSet={desktop} />
      <source media="(min-width: 500px)" srcSet={mobile} />
      <img {...rest} style={{ width: '100%', height: 'auto' }} />
    </picture>
  )
}

CSS d'arrière-plan

Vous pouvez même convertir la chaîne srcSet en fonction CSS image-set() pour optimiser une image d'arrière-plan.

import { getImageProps } from 'next/image'

function getBackgroundImage(srcSet = '') {
  const imageSet = srcSet
    .split(', ')
    .map((str) => {
      const [url, dpi] = str.split(' ')
      return `url("${url}") ${dpi}`
    })
    .join(', ')
  return `image-set(${imageSet})`
}

export default function Home() {
  const {
    props: { srcSet },
  } = getImageProps({ alt: '', width: 128, height: 128, src: '/img.png' })
  const backgroundImage = getBackgroundImage(srcSet)
  const style = { height: '100vh', width: '100vw', backgroundImage }

  return (
    <main style={style}>
      <h1>Bonjour le monde</h1>
    </main>
  )
}

Historique des versions