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.

astro.config.mjs

{
  experimental: {
    responsiveImages: true,
  },
}

Lorsque cette option est activé, vous pouvez passer une propriété layout à n’importe quel composant <Image /> ou <Picture /> pour créer une image réactive.

Lorsqu’une mise en page est définie, les images ont des attributs srcset et sizes générés automatiquement en fonction des dimensions de l’image et du type de mise en page. Les images avec les dispositions responsive et full-width auront des styles appliqués pour s’assurer qu’elles sont redimensionnées en fonction de leur conteneur.

MyComponent.astro

---
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"
>

Le style suivant est appliqué pour garantir que les images se redimensionnent correctement :

Styles des images réactives

[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)
}

Propriétés des images réactives

Titre de la section 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.

Paramètres de configuration des images réactives

Titre de la section Paramètres de configuration des images réactives

Vous pouvez activer les images réactives pour tous les composants <Image /> et <Picture /> en définissant image.experimentalLayout avec une valeur par défaut. Ces paramètres peuvent être remplacés par la propriété layout de chaque composant.

astro.config.mjs

{
  image: {
    // Utilisé pour tous les composants `<Image />` et `<Picture />` à moins qu'il ne soit surchargé.
    experimentalLayout: 'responsive',
     },
  experimental: {
    responsiveImages: true,
  },
}

Avec responsive comme mise en page par défaut, vous pouvez modifier la propriété layout de chaque image :

---
import { Image } from 'astro:assets';
import myImage from '../assets/my_image.png';
---
<Image src={myImage} alt="Ceci utilisera une mise en page réactive" width={800} height={600} />
<Image src={myImage} alt="Ceci utilisera la mise en page pleine largeur" layout="full-width" />
<Image src={myImage} alt="Cela désactivera les images réactives" layout="none" />

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