Image au-dessus
Image au-dessus
Une composition empilée conserve l’image avant le texte quelle que soit la largeur du conteneur.
Des médias composés une seule fois
Chaque exemple de cette page utilise le même moteur sémantique, le même catalogue et la même politique de livraison adaptative. Redimensionnez la page, ouvrez la galerie ou désactivez JavaScript : le contenu reste complet.
Sept résultats, un composant partagé
La disposition, le ratio, l’ajustement et la position logique changent le résultat sans créer de composants séparés.
Image avant
Image avant
La composition divisée ne devient horizontale que lorsque son propre conteneur offre assez d’espace.
Image après
Image après
Le texte reste premier dans l’ordre de lecture et l’image le suit visuellement comme dans le document.
Portrait éditorial
Portrait éditorial
Le profil portrait sélectionne une politique d’image plus étroite et un recadrage vertical délibéré.
Superposition lisible
Superposition lisible
Le texte se place sur l’image grâce à une surface sombre contrôlée et une recette de contraste lisible.
Mise en avant pleine largeur
Mise en avant pleine largeur
La carte mise en avant occupe la grille disponible tout en gardant les mêmes emplacements média et contenu.
Photographie contenue
Photographie contenue
L’ajustement contenu garde la photographie entière visible afin de la comparer directement aux traitements recadrés.
Figure sémantique et crédit du catalogue
Lorsqu’une légende ou un crédit appartient à une image, le moteur produit de vrais éléments figure et figcaption. Le crédit vient du catalogue média plutôt que d’un texte dupliqué.
Des galeries statiques en premier
Tous les éléments restent présents dans l’ordre source. Le défilement avec ancrage et la visionneuse dialog ajoutent du confort sans masquer de contenu derrière JavaScript.
Défilement ancré avec visionneuse
Dans un conteneur étroit, faites défiler la rangée complète. Sur un conteneur plus large, les mêmes figures deviennent une grille. Activez une image pour ouvrir la visionneuse accessible.
Grille statique de portraits
Cette galerie n’utilise aucune visionneuse. Toutes les figures et légendes restent disponibles sans comportement côté client.
Conçu pour la rapidité
La page démontre la politique de livraison autant que les résultats visuels. Lighthouse vérifie le résultat déployé après chaque mise en œuvre.
Sources bien dimensionnées
Les profils nommés génèrent des largeurs bornées et des indications sizes précises au lieu d’envoyer partout une image surdimensionnée.
Chargement intentionnel
Seule la première image est immédiate et prioritaire. Toutes les suivantes sont différées et décodées de façon asynchrone.
Amélioration légère
La galerie livre d’abord un HTML complet. Un script isolé améliore les liens avec dialog natif, clavier et restitution du focus.