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 de produit contenue
L’ajustement contenu préserve toute la silhouette du produit tandis que les rendus adaptatifs assurent une livraison efficace du PNG transparent.
Image avant
La composition divisée ne devient horizontale que lorsque son propre conteneur offre assez d’espace.
Image après
Le texte reste premier dans l’ordre de lecture et l’image le suit visuellement comme dans le document.
Portrait éditorial
Le profil portrait sélectionne une politique d’image plus étroite et un recadrage vertical délibéré.
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
La carte mise en avant occupe la grille disponible tout en gardant les mêmes emplacements média et contenu.
Tell the business story with people and place
Use these layouts for an about page, a service story, a venue introduction, a case study, or a campaign feature. Content keeps meaningful source order while the framework owns balanced spacing, edges, overlap, and responsive reflow.
A real image-backed section
The photograph is discoverable in initial HTML, the scrim resolves through a known dark surface, and the content remains readable without JavaScript.
Editorial split
Media and copy share a balanced two-column composition when the section container is wide enough, then return to a single readable flow.
Full-bleed image, contained story
The image reaches the section edges while the supporting story returns to the site measure and page gutters.
Edge-to-edge split
The storefront meets the viewport edge while the copy retains comfortable, design-owned padding.
Controlled overlap
The content panel overlaps the photograph only at spacious container widths and returns to normal flow when room is limited.
Editorial offset
An asymmetrical portrait and start-aligned caption create editorial rhythm without authored grid coordinates.
Un mouvement qui sait s'effacer
Chaque traitement est facultatif, limité aux propriétés de composition et complet avant toute amélioration. Les navigateurs sans prise en charge et les préférences de mouvement réduit conservent le même contenu statique.
Apparition mesurée
Une chronologie de vue introduit la carte complète. La mise en page et l'ordre de lecture n'attendent jamais l'animation.
Zoom adapté au survol
L'image s'agrandit dans son cadre découpé uniquement sur les appareils qui signalent un survol précis.
Zoom adapté au survol
Parallaxe discrète
Seule la couche média se déplace de quelques pourcents avec une chronologie CSS; le texte reste immobile.
L'affiche d'abord, la lecture ensuite
Le même clip local silencieux illustre un fond décoratif et une vidéo informative native sans placer la lecture dans le chemin de rendu initial.
Four ambiant et contrôlable
L'affiche JPEG apparaît immédiatement. JavaScript attache le MP4 silencieux uniquement lorsque le mouvement est permis, et un vrai bouton permet de l'arrêter.
Contrôles natifs et contexte complet
La vidéo informative ne démarre pas seule. Contrôles natifs, dimensions, descriptions temporelles localisées, affiche et texte équivalent restent disponibles.
La vidéo est indisponible. Utilisez la transcription visuelle ci-dessous.
Transcription visuelle
De zéro à quatre secondes, des pains plats reposent près des braises d'un four à bois. De quatre à huit secondes, la main gantée d'un boulanger tourne un pain rond près de la chaleur.
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
Balayez, faites glisser, utilisez le pavé tactile ou la barre de défilement horizontale pour parcourir une rangée qui reste défilable à toutes les largeurs. La capacité déclarée détermine combien de figures sont visibles à la fois. 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.
Mixed-size mosaic
A wide lead photograph opens into varied portraits, details, people, and process images that keep meaningful source order without exposing grid coordinates.
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.
Need the complete implementation matrix?
The technical appendix isolates every public media variant, resolved decision, fallback, and actionable invalid state from this business-oriented showcase.