Images réactives (expérimental)

Type : boolean
Par défaut : false

Ajouté à la version : astro@5.0.0

Active la prise en charge des images réactives automatiques dans votre projet.

{
  experimental: {
    responsiveImages: true,
  },
}

Avec cette option activée, vous avez accès à des paramètres de configuration supplémentaires dans image pour contrôler le comportement par défaut de toutes les images traitées et optimisées par Astro :

Les images locales et distantes utilisant la syntaxe Markdown ![]().
Les composants <Image /> et <Picture />.

De plus, les composants d’image d’Astro peuvent recevoir des props d’image réactives pour remplacer ces valeurs par défaut pour chaque image.

Les images dans votre dossier public/ ne sont jamais optimisées et les images réactives ne sont pas prises en charge.

Paramètres de configuration des images réactives

Définissez image.experimentalLayout avec une valeur par défaut (responsive, fixed ou full-width) pour activer les images réactives dans tout votre projet.

Si cette valeur n’est pas configurée, vous pouvez toujours transmettre une propriété layout à n’importe quel composant <Image /> ou <Picture /> pour créer une image réactive. Cependant, les images Markdown ne seront pas réactives.

En option, vous pouvez configurer image.experimentalObjectFit et image.experimentalObjectPosition qui s’appliqueront à toutes les images traitées par défaut.

Chacun de ces paramètres peut être remplacé sur n’importe quel composant individuel <Image /> ou <Picture /> avec une propriété, mais toutes les images Markdown utiliseront toujours les paramètres par défaut.

{
  image: {
    // Utilisé pour toutes les images Markdown ; non configurable par image
    // Utilisé pour tous les composants `<Image />` et `<Picture />` sauf s'ils sont remplacés par une propriété
    experimentalLayout: 'responsive',
  },
  experimental: {
    responsiveImages: true,
  },
}

Propriétés des images réactives

Voici les propriétés supplémentaires disponibles pour les composants <Image /> et <Picture /> lorsque les images réactives sont activées :

layout : Le type de mise en page de l’image. Il peut s’agir de responsive, fixed, full-width ou none. La valeur par défaut est image.experimentalLayout.
fit : Définit comment l’image doit être recadrée si le ratio d’aspect est modifié. Les valeurs correspondent à celles de CSS object-fit. La valeur par défaut est cover, ou la valeur de image.experimentalObjectFit si elle est définie.
position : Définit la position du recadrage de l’image si le rapport hauteur/largeur est modifié. Les valeurs correspondent à celles de CSS object-position. La valeur par défaut est center, ou la valeur de image.experimentalObjectPosition si elle est définie.
priority : Si elle est définie, l’image est chargée avec empressement. Sinon, les images seront chargées paresseusement. Utilisez cette option pour votre plus grande image. La valeur par défaut est false.

Les attributs widths et sizes sont automatiquement générés en fonction des dimensions de l’image et du type de mise en page, et dans la plupart des cas, ils ne doivent pas être définis manuellement. L’attribut sizes généré pour les images responsive et full-width (pleine largeur) est basé sur l’hypothèse que l’image est affichée à peu près sur toute la largeur de l’écran lorsque la fenêtre de visualisation est plus petite que la largeur de l’image. Si c’est significativement différent (par exemple, s’il s’agit d’une mise en page en plusieurs colonnes sur de petits écrans), vous devrez peut-être ajuster l’attribut sizes manuellement pour obtenir les meilleurs résultats.

L’attribut densities n’est pas compatible avec les images réactives et sera ignoré s’il est défini.

Par exemple, avec responsive défini comme mise en page par défaut, vous pouvez remplacer la propriété layout de n’importe quelle image individuelle :

---
import { Image } from 'astro:assets';
import myImage from '../assets/my_image.png';
---
<Image src={myImage} alt="Une mise en page réactive sera utilisée" width={800} height={600} />
<Image src={myImage} alt="Une mise en page pleine largeur sera utilisée" layout="full-width" />
<Image src={myImage} alt="Les images réactives seront désactivées" layout="none" />

Sortie HTML générée pour les images réactives

Lorsqu’une mise en page est définie, soit par défaut, soit sur un composant individuel, les images possèdent des attributs srcset et sizes automatiquement générés en fonction des dimensions de l’image et du type de mise en page. Les images avec des mises en page responsive et full-width auront des styles appliqués pour garantir qu’elles se redimensionnent en fonction de leur conteneur.

---
import { Image, Picture } from 'astro:assets';
import myImage from '../assets/my_image.png';
---
<Image src={myImage} alt="Une description de mon image." layout='responsive' width={800} height={600} />
<Picture src={myImage} alt="Une description de mon image." layout='full-width' formats={['avif', 'webp', 'jpeg']} />

Ce composant <Image /> générera le code HTML suivant :

<img
  src="/_astro/my_image.hash3.webp"
  srcset="/_astro/my_image.hash1.webp 640w,
      /_astro/my_image.hash2.webp 750w,
      /_astro/my_image.hash3.webp 800w,
      /_astro/my_image.hash4.webp 828w,
      /_astro/my_image.hash5.webp 1080w,
      /_astro/my_image.hash6.webp 1280w,
      /_astro/my_image.hash7.webp 1600w"
  alt="Une description de mon image."
  sizes="(min-width: 800px) 800px, 100vw"
  loading="lazy"
  decoding="async"
  fetchpriority="auto"
  width="800"
  height="600"
  style="--w: 800; --h: 600; --fit: cover; --pos: center;"
  data-astro-image="responsive"
>

Les styles suivants sont appliqués pour garantir que les images sont redimensionnées correctement :

[data-astro-image] {
  width: 100%;
  height: auto;
  object-fit: var(--fit);
  object-position: var(--pos);
  aspect-ratio: var(--w) / var(--h)
}

[data-astro-image=responsive] {
  max-width: calc(var(--w) * 1px);
  max-height: calc(var(--h) * 1px)
}

[data-astro-image=fixed] {
  width: calc(var(--w) * 1px);
  height: calc(var(--h) * 1px)
}

Pour une présentation complète et pour donner votre avis sur cette API expérimentale, consultez la RFC Responsive Images.

Contribuer Communauté Parrainer