Image (Legacy)

À partir de Next.js 13, le composant next/image a été réécrit pour améliorer à la fois les performances et l'expérience développeur. Afin de fournir une solution de mise à niveau rétrocompatible, l'ancien next/image a été renommé en next/legacy/image.

Consultez la nouvelle Référence API de next/image

Comparaison

Comparé à next/legacy/image, le nouveau composant next/image présente les changements suivants :

• Supprime le wrapper <span> autour de <img> en faveur du ratio d'aspect natif calculé
• Ajoute la prise en charge de la prop style canonique
  • Supprime la prop layout en faveur de style ou className
  • Supprime la prop objectFit en faveur de style ou className
  • Supprime la prop objectPosition en faveur de style ou className
• Supprime l'implémentation IntersectionObserver en faveur du chargement différé natif
  • Supprime la prop lazyBoundary puisqu'il n'y a pas d'équivalent natif
  • Supprime la prop lazyRoot puisqu'il n'y a pas d'équivalent natif
• Supprime la configuration loader en faveur de la prop loader
• Change la prop alt d'optionnelle à obligatoire
• Change le callback onLoadingComplete pour recevoir une référence à l'élément <img>

Props obligatoires

Le composant <Image /> nécessite les propriétés suivantes.

src

Doit être l'un des suivants :

• Un fichier image importé statiquement
• Une chaîne de chemin. Cela peut être soit une URL externe absolue, soit un chemin interne selon la prop loader ou la configuration du loader.

Lorsque vous utilisez le loader par défaut, tenez également compte des éléments suivants pour les images sources :

• Lorsque src est une URL externe, vous devez également configurer remotePatterns
• Lorsque src est animé ou d'un format non reconnu (JPEG, PNG, WebP, AVIF, GIF, TIFF), l'image sera servie telle quelle
• Lorsque src est au format SVG, il sera bloqué sauf si unoptimized ou dangerouslyAllowSVG est activé

width

La propriété width peut représenter soit la largeur affichée, soit la largeur originale en pixels, selon les propriétés layout et sizes.

Lorsque vous utilisez layout="intrinsic" ou layout="fixed", la propriété width représente la largeur affichée en pixels, elle affectera donc la taille apparente de l'image.

Lorsque vous utilisez layout="responsive" ou layout="fill", la propriété width représente la largeur originale en pixels, elle n'affectera donc que le ratio d'aspect.

La propriété width est obligatoire, sauf pour les images importées statiquement ou celles avec layout="fill".

height

La propriété height peut représenter soit la hauteur affichée, soit la hauteur originale en pixels, selon les propriétés layout et sizes.

Lorsque vous utilisez layout="intrinsic" ou layout="fixed", la propriété height représente la hauteur affichée en pixels, elle affectera donc la taille apparente de l'image.

Lorsque vous utilisez layout="responsive" ou layout="fill", la propriété height représente la hauteur originale en pixels, elle n'affectera donc que le ratio d'aspect.

La propriété height est obligatoire, sauf pour les images importées statiquement ou celles avec layout="fill".

Props optionnelles

Le composant <Image /> accepte un certain nombre de propriétés supplémentaires au-delà de celles qui sont obligatoires. Cette section décrit les propriétés les plus couramment utilisées du composant Image. Vous trouverez des détails sur les propriétés moins fréquemment utilisées dans la section Props avancées.

layout

Le comportement de mise en page de l'image lorsque la taille de la fenêtre change.

• Démo du layout intrinsic (par défaut)
  • Avec intrinsic, l'image réduira ses dimensions pour les petites fenêtres, mais conservera ses dimensions originales pour les grandes fenêtres.
• Démo du layout fixed
  • Avec fixed, les dimensions de l'image ne changeront pas avec la fenêtre (pas de réactivité), comme avec l'élément natif img.
• Démo du layout responsive
  • Avec responsive, l'image réduira ses dimensions pour les petites fenêtres et les augmentera pour les grandes fenêtres.
  • Assurez-vous que l'élément parent utilise display: block dans sa feuille de style.
• Démo du layout fill
  • Avec fill, l'image s'étendra en largeur et en hauteur pour remplir les dimensions de l'élément parent, à condition que celui-ci soit relatif.
  • Ceci est généralement associé à la propriété objectFit.
  • Assurez-vous que l'élément parent a position: relative dans sa feuille de style.
• Démo d'image de fond

loader

Une fonction personnalisée utilisée pour résoudre les URLs. Définir le loader comme prop sur le composant Image remplace le loader par défaut défini dans la section images de next.config.js.

Un loader est une fonction qui retourne une URL sous forme de chaîne pour l'image, en fonction des paramètres suivants :

• src
• width
• quality

Voici un exemple d'utilisation d'un loader personnalisé :

import Image from 'next/legacy/image'

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

const MyImage = (props) => {
  return (
    <Image
      loader={myLoader}
      src="me.png"
      alt="Picture of the author"
      width={500}
      height={500}
    />
  )
}

sizes

Une chaîne qui fournit des informations sur la largeur de l'image à différents points de rupture. La valeur de sizes affectera grandement les performances pour les images utilisant layout="responsive" ou layout="fill". Elle sera ignorée pour les images utilisant layout="intrinsic" ou layout="fixed".

La propriété sizes sert deux objectifs importants liés aux performances des images :

Premièrement, la valeur de sizes est utilisée par le navigateur pour déterminer quelle taille d'image télécharger, à partir de l'ensemble de sources généré automatiquement par next/legacy/image. Lorsque le navigateur choisit, il ne connaît pas encore la taille de l'image sur la page, il sélectionne donc une image de la même taille ou plus grande que la fenêtre. La propriété sizes vous permet d'indiquer au navigateur que l'image sera en réalité plus petite que la pleine largeur de l'écran. Si vous ne spécifiez pas de valeur sizes, une valeur par défaut de 100vw (pleine largeur de l'écran) est utilisée.

Deuxièmement, la valeur sizes est analysée et utilisée pour élaguer les valeurs dans l'ensemble de sources créé automatiquement. Si la propriété sizes inclut des valeurs comme 50vw, qui représentent un pourcentage de la largeur de la fenêtre, alors l'ensemble de sources est élagué pour exclure les valeurs trop petites pour être jamais nécessaires.

Par exemple, si vous savez que votre style fera qu'une image occupera toute la largeur sur les appareils mobiles, une disposition à 2 colonnes sur les tablettes et une disposition à 3 colonnes sur les écrans de bureau, vous devriez inclure une propriété sizes comme suit :

import Image from 'next/legacy/image'
const Example = () => (
  <div className="grid-element">
    <Image
      src="/example.png"
      layout="fill"
      sizes="(max-width: 768px) 100vw,
              (max-width: 1200px) 50vw,
              33vw"
    />
  </div>
)

Cet exemple sizes pourrait avoir un impact dramatique sur les métriques de performance. Sans le 33vw dans sizes, l'image sélectionnée depuis le serveur serait 3 fois plus large que nécessaire. Comme la taille du fichier est proportionnelle au carré de la largeur, sans sizes, l'utilisateur téléchargerait une image 9 fois plus grande que nécessaire.

En savoir plus sur srcset et sizes :

• web.dev
• mdn

quality

La qualité de l'image optimisée, un entier entre 1 et 100 où 100 est la meilleure qualité. Par défaut à 75.

priority

Lorsque true, l'image sera considérée comme haute priorité et préchargée. Le chargement différé est automatiquement désactivé pour les images utilisant priority.

Vous devriez utiliser la propriété priority sur toute image détectée comme élément Largest Contentful Paint (LCP). Il peut être approprié d'avoir plusieurs images prioritaires, car différentes images peuvent être l'élément LCP pour différentes tailles de fenêtre.

Ne doit être utilisé que lorsque l'image est visible au-dessus de la ligne de flottaison. Par défaut à false.

placeholder

Un espace réservé à utiliser pendant le chargement de l'image. Les valeurs possibles sont blur ou empty. Par défaut à empty.

Lorsque blur, la propriété blurDataURL sera utilisée comme espace réservé. Si src est un objet provenant d'une importation statique et que l'image importée est .jpg, .png, .webp ou .avif, alors blurDataURL sera automatiquement rempli.

Pour les images dynamiques, vous devez fournir la propriété blurDataURL. Des solutions comme Plaiceholder peuvent aider à générer le base64.

Lorsque empty, il n'y aura pas d'espace réservé pendant le chargement de l'image, seulement un espace vide.

Essayez-le :

• Démo de l'espace réservé blur
• Démo de l'effet de scintillement avec la prop blurDataURL
• Démo de l'effet de couleur avec la prop blurDataURL

Props avancées

Dans certains cas, vous pourriez avoir besoin d'une utilisation plus avancée. Le composant <Image /> accepte optionnellement les propriétés avancées suivantes.

style

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

Notez que tous les modes layout appliquent leurs propres styles à l'élément image, et ces styles automatiques prennent le pas sur la prop style.

Gardez également à l'esprit que les props obligatoires width et height peuvent interagir avec votre style. Si vous utilisez le style pour modifier la width d'une image, vous devez également définir le style height="auto", sinon votre image sera déformée.

objectFit

Définit comment l'image s'adaptera à son conteneur parent lorsqu'elle utilise layout="fill".

Cette valeur est passée à la propriété CSS object-fit pour l'image src.

objectPosition

Définit comment l'image est positionnée dans son élément parent lorsqu'elle utilise layout="fill".

Cette valeur est passée à la propriété CSS object-position appliquée à l'image.

onLoadingComplete

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

La fonction onLoadingComplete accepte un paramètre, un objet avec les propriétés suivantes :

• naturalWidth
• naturalHeight

loading

Le comportement de chargement de l'image. Par défaut à lazy.

Lorsque lazy, diffère le chargement de l'image jusqu'à ce qu'elle atteigne une distance calculée de la fenêtre.

Lorsque eager, charge l'image immédiatement.

En savoir plus

blurDataURL

Une URL Data à utiliser comme image d'espace réservé avant que l'image src ne soit chargée avec succès. Ne prend effet que lorsqu'elle est combinée avec placeholder="blur".

Doit être une image encodée en base64. Elle sera agrandie et floutée, donc une très petite image (10px ou moins) est recommandée. Inclure des images plus grandes comme espaces réservés peut nuire aux performances de votre application.

Essayez-le :

• Démo de la prop blurDataURL par défaut
• Démo de l'effet de scintillement avec la prop blurDataURL
• Démo de l'effet de couleur avec la prop blurDataURL

Vous pouvez également générer une URL Data de couleur unie pour correspondre à l'image.

lazyBoundary

Une chaîne (avec une syntaxe similaire à la propriété margin) qui agit comme la boîte englobante utilisée pour détecter l'intersection de la fenêtre avec l'image et déclencher le chargement différé. Par défaut à "200px".

Si l'image est imbriquée dans un élément parent scrollable autre que le document racine, vous devrez également assigner la prop lazyRoot.

En savoir plus

lazyRoot

Une Ref React pointant vers l'élément parent scrollable. Par défaut à null (la fenêtre du document).

La Ref doit pointer vers un élément DOM ou un composant React qui transmet la Ref à l'élément DOM sous-jacent.

Exemple pointant vers un élément DOM

import Image from 'next/legacy/image'
import React from 'react'

const Example = () => {
  const lazyRoot = React.useRef(null)

  return (
    <div ref={lazyRoot} style={{ overflowX: 'scroll', width: '500px' }}>
      <Image lazyRoot={lazyRoot} src="/one.jpg" width="500" height="500" />
      <Image lazyRoot={lazyRoot} src="/two.jpg" width="500" height="500" />
    </div>
  )
}

Exemple pointant vers un composant React

import Image from 'next/legacy/image'
import React from 'react'

const Container = React.forwardRef((props, ref) => {
  return (
    <div ref={ref} style={{ overflowX: 'scroll', width: '500px' }}>
      {props.children}
    </div>
  )
})

const Example = () => {
  const lazyRoot = React.useRef(null)

  return (
    <Container ref={lazyRoot}>
      <Image lazyRoot={lazyRoot} src="/one.jpg" width="500" height="500" />
      <Image lazyRoot={lazyRoot} src="/two.jpg" width="500" height="500" />
    </Container>
  )
}

En savoir plus

unoptimized

Lorsque défini sur true, l'image source sera servie telle quelle depuis src sans modification de qualité, taille ou format. Par défaut false.

Ceci est utile pour les images qui ne bénéficient pas d'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) => {
  return <Image {...props} unoptimized />
}

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

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

Autres Propriétés

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

• srcSet. Utilisez plutôt les Tailles d'appareil.
• ref. Utilisez plutôt onLoadingComplete.
• decoding. Il est toujours défini sur "async".

Options de Configuration

Modèles distants (Remote Patterns)

Pour protéger votre application contre les utilisateurs malveillants, une configuration est nécessaire pour utiliser des images externes. Cela garantit que seules les images externes de votre compte peuvent être servies par l'API d'optimisation d'images de Next.js. Ces images externes peuvent être configurées avec la propriété remotePatterns dans votre fichier next.config.js, comme indiqué ci-dessous :

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

Bon à savoir : L'exemple ci-dessus garantira que la propriété src de next/legacy/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.

Voici un exemple de la propriété remotePatterns dans le fichier next.config.js utilisant un modèle générique (wildcard) dans hostname :

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

Bon à savoir : L'exemple ci-dessus garantira que la propriété src de next/legacy/image doit commencer par https://img1.example.com ou https://me.avatar.example.com ou tout nombre de sous-domaines. Elle ne peut pas avoir de port ou de chaîne de requête. Tout autre protocole ou nom d'hôte non correspondant renverra une erreur 400 Bad Request.

Les modèles 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

La syntaxe ** ne fonctionne pas au milieu du modèle.

Bon à savoir : Lorsque vous omettez protocol, port, pathname ou search, le modèle 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.

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

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

Bon à savoir : L'exemple ci-dessus garantira que la propriété src de next/legacy/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.

Domaines

Avertissement : Déprécié depuis Next.js 14 en faveur des remotePatterns stricts afin de protéger votre application contre les utilisateurs malveillants. N'utilisez domains que 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 les modèles 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'],
  },
}

Configuration du chargeur (Loader)

Si vous souhaitez utiliser un fournisseur de cloud pour optimiser les images au lieu de l'API d'optimisation d'images intégrée de Next.js, vous pouvez configurer le loader et le préfixe path dans votre fichier next.config.js. Cela vous permet d'utiliser des URL relatives pour la propriété src de l'Image et de générer automatiquement l'URL absolue correcte pour votre fournisseur.

module.exports = {
  images: {
    loader: 'imgix',
    path: 'https://example.com/myaccount/',
  },
}

Chargeurs intégrés (Built-in Loaders)

Les fournisseurs d'optimisation d'images suivants sont inclus :

• Par défaut : Fonctionne automatiquement avec next dev, next start ou un serveur personnalisé
• Vercel : Fonctionne automatiquement lors d'un déploiement sur Vercel, aucune configuration nécessaire. En savoir plus
• Imgix : loader: 'imgix'
• Cloudinary : loader: 'cloudinary'
• Akamai : loader: 'akamai'
• Personnalisé : loader: 'custom' utilise un fournisseur de cloud personnalisé en implémentant la propriété loader sur le composant next/legacy/image

Si vous avez besoin d'un autre fournisseur, vous pouvez utiliser la propriété loader avec next/legacy/image.

Les images ne peuvent pas être optimisées au moment de la construction en utilisant output: 'export', seulement à la demande. Pour utiliser next/legacy/image avec output: 'export', vous devrez utiliser un chargeur différent de celui par défaut. Lire la discussion.

Avancé

La configuration suivante est destinée aux cas d'utilisation avancés et n'est généralement pas nécessaire. Si vous choisissez de configurer les propriétés ci-dessous, vous remplacerez toute modification des valeurs par défaut de Next.js dans les futures mises à jour.

Tailles d'appareil (Device Sizes)

Si vous connaissez les largeurs d'appareil attendues de vos utilisateurs, vous pouvez spécifier une liste de points de rupture de largeur d'appareil en utilisant la propriété deviceSizes dans next.config.js. Ces largeurs sont utilisées lorsque le composant next/legacy/image utilise layout="responsive" ou layout="fill" pour garantir 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],
  },
}

Tailles d'image (Image Sizes)

Vous pouvez spécifier une liste de largeurs d'image en utilisant la propriété images.imageSizes dans votre fichier next.config.js. Ces largeurs sont concaténées avec le tableau des tailles d'appareil pour former le tableau complet des tailles utilisées pour générer les srcset d'images.

La raison pour laquelle il y a deux listes distinctes est que imageSizes est uniquement utilisé pour les images qui fournissent une propriété 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.

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],
  },
}

Formats acceptables (Acceptable Formats)

L'API d'optimisation d'images par défaut détectera 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), l'API d'optimisation d'images reviendra au format d'origine de l'image.

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

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

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

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

Bon à savoir :

• Nous recommandons toujours d'utiliser WebP pour la plupart des cas d'utilisation.
• L'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, puis 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.

Comportement de mise en cache (Caching Behavior)

Ce qui suit décrit l'algorithme de mise en cache pour le chargeur par défaut. Pour tous les autres chargeurs, veuillez vous référer à la documentation de votre fournisseur de cloud.

Les images sont optimisées dynamiquement à la demande et stockées dans le répertoire <distDir>/cache/images. Le fichier d'image optimisé sera servi pour les requêtes suivantes jusqu'à ce que l'expiration soit atteinte. Lorsqu'une requête correspond à un fichier mis en cache mais expiré, l'image expirée est servie immédiatement. Ensuite, l'image est optimisée à nouveau en arrière-plan (également appelée revalidation) et enregistrée dans le cache avec la nouvelle date d'expiration.

Le statut de mise en cache d'une image peut être déterminé en lisant la valeur de l'en-tête de réponse x-nextjs-cache (x-vercel-cache lors d'un déploiement sur Vercel). Les valeurs possibles sont les suivantes :

• MISS - le chemin n'est pas dans le cache (se produit au maximum une fois, lors de la première visite)
• STALE - le chemin est dans le cache mais a dépassé le temps de revalidation, donc il sera mis à jour en arrière-plan
• HIT - le chemin est dans le cache et n'a pas dépassé le temps de revalidation

L'expiration (ou plutôt la durée de vie maximale - Max Age) est définie soit par la configuration minimumCacheTTL, soit par l'en-tête Cache-Control de l'image en amont, selon la valeur la plus grande. Plus précisément, la valeur max-age de l'en-tête Cache-Control est utilisée. Si s-maxage et max-age sont trouvés, s-maxage est préféré. La valeur max-age est également transmise à tous les clients en aval, y compris les CDN et les navigateurs.

• Vous pouvez configurer minimumCacheTTL pour augmenter la durée de mise en cache lorsque l'image en amont n'inclut pas d'en-tête Cache-Control ou que la valeur est très faible.
• Vous pouvez configurer deviceSizes et imageSizes pour réduire le nombre total d'images générées possibles.
• Vous pouvez configurer formats pour désactiver plusieurs formats en faveur d'un seul format d'image.

Durée de vie minimale du cache (Minimum Cache TTL)

Vous pouvez configurer la durée de vie (TTL) en secondes pour les images optimisées mises en cache. Dans de nombreux cas, il est préférable d'utiliser une importation d'image statique 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 la 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 la durée de vie maximale - Max Age) de l'image optimisée est définie soit par minimumCacheTTL, soit par 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 lui-même).

Il n'y a actuellement aucun mécanisme pour invalider le cache, il est donc préférable de garder minimumCacheTTL faible. Sinon, vous devrez peut-être modifier manuellement la propriété src ou supprimer <distDir>/cache/images.

Désactiver les importations statiques (Disable Static Imports)

Le comportement par défaut vous permet d'importer des fichiers statiques tels que import icon from './icon.png' et de les transmettre à 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,
  },
}

Autoriser dangereusement SVG (Dangerously Allow SVG)

Le chargeur par défaut n'optimise pas les images SVG pour plusieurs raisons. Premièrement, SVG est un format vectoriel, ce qui signifie qu'il peut être redimensionné sans perte. Deuxièmement, SVG a de nombreuses fonctionnalités similaires à HTML/CSS, ce qui peut entraîner des vulnérabilités sans les en-têtes Content Security Policy (CSP) appropriés.

Par conséquent, nous recommandons d'utiliser la propriété unoptimized lorsque la propriété src est connue pour être SVG. Cela se produit automatiquement lorsque src se termine par ".svg".

Cependant, si vous devez servir des images SVG avec l'API d'optimisation d'images par défaut, vous pouvez définir dangerouslyAllowSVG dans votre next.config.js :

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

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.

contentDispositionType

Le chargeur par défaut définit l'en-tête Content-Disposition sur attachment pour une protection supplémentaire, car 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 éventuellement configurer inline pour permettre au navigateur d'afficher l'image lors d'une visite directe, sans la télécharger.

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

Images animées (Animated Images)

Le chargeur par défaut contournera automatiquement l'optimisation d'images pour les images animées et servira l'image telle quelle.

La détection automatique des fichiers animés est basée sur les meilleures intentions et prend en charge GIF, APNG et WebP. Si vous souhaitez contourner explicitement l'optimisation d'images pour une image animée donnée, utilisez la propriété unoptimized.

Historique des versions