ArtDirection
À quoi il sert
ArtDirection sert un recadrage resserré aux écrans étroits, au lieu de réduire l’image large.
Quand l’utiliser
- Garder le sujet lisible sur mobile, quand une image large perd son détail en se réduisant.
- Fournir un recadrage par point de rupture : narrow sous la mesure, medium sous la page.
Quand ne pas l’utiliser
- Pour une image lisible à toute taille : Photo suffit, sans recadrage supplémentaire.
- Pour une image sans sujet à recentrer : un recadrage par point de rupture n’apporte rien.
Exemples
Recadrage étroit sous la mesure
---
import ArtDirection from '@paulperigault/astro/ArtDirection.astro';
import large from './large.jpg';
import largeEtroit from './large-etroit.jpg';
---
<ArtDirection
src={large}
sources={[{ at: 'narrow', src: largeEtroit }]}
alt="Disque bleu et colonne grise"
/>Accessibilité
Clavier
- Aucun élément interactif : rien à atteindre au clavier.
Lecteur d’écran
- Une seule alt s’applique à toutes les sources : elle décrit le sujet commun.
- Le repli img porte le même alt que les recadrages.
Garanti par le composant
- Chaque source porte width et height de son recadrage : la place est réservée.
- Sources ordonnées narrow, medium, puis image par défaut.
- alt obligatoire, ou decorative : sinon erreur au build.
- priority : loading="eager" et fetchpriority="high" sur le img de repli.
À la charge de l’intégrateur
- Décrire dans alt le sujet commun aux recadrages, pas le détail d’un seul.
- Garder le même sujet dans chaque recadrage : le composant ne le vérifie pas.
- Réserver priority à l’image principale de la page.
Propriétés
| Propriété | Type | Défaut | Description |
|---|---|---|---|
| alt | string | — | Texte alternatif : ce que l'image apporte au contenu. Vide : erreur au build. |
| decorative | true | — | Image purement décorative, rendue avec `alt=""`. Exclusif de `alt`. |
| src (obligatoire) | ImageMetadata | — | Image par défaut, importée localement. |
| sources (obligatoire) | ArtSource[] | — | Recadrages : un par point de rupture (`narrow`, `medium`). |
| priority | boolean | false | Image principale de la page (LCP) : chargée tout de suite, en priorité. |
| layout | "page" | "measure" | "half" | "third" | "avatar" | 'page' | Emplacement dans la page ; règle `sizes` et les largeurs générées. |
| kind | "photo" | "capture" | "illustration" | 'photo' | Nature de l'image ; règle la qualité et le format de repli. |
| class | string | — | Réservé au placement du composant dans son parent. |
Jetons utilisés
--pp-color-line--pp-color-media-placeholder--pp-media-radius--pp-media-rule--pp-ratio-landscape--pp-ratio-portrait--pp-ratio-square--pp-ratio-wide--pp-size-measure--pp-size-page--pp-space-3xl--pp-space-xl
Preuves et décisions
- WCAG 1.1.1 Contenu non textuel
- LCP et CLS sur la page art-direction : apps/docs/e2e/media.spec.ts
- Tests : packages/astro/test/ArtDirection.test.ts