Images à la une & médias : héros, cartes, et mise en page essai photo

Choisir le bon type de source d'image, contrôler où elle apparaît, écrire un bon alt, et désactiver la TOC pour un essai photo léger en texte.

20 avril 2026 Rédaction 4 min de lecture

Une longue exposition de vagues sur une côte rocheuse au crépuscule

Cet article est un petit essai photo qui illustre les fonctionnalités d’image du thème de bout en bout. Notez ce que cette page fait que les autres ne font pas :

Le hero est un asset local situé dans src/assets/images/posts/featured-images-and-media/coastline.jpg, passé par le pipeline d’image d’Astro (srcset responsive, WebP).
toc: false — aucune table des matières à droite. Les essais photo se lisent mieux sans.
showFeaturedImage: true est défini explicitement, même si c’est le défaut du site. Les auteurs peuvent désactiver par article.

Vous avez trois options de stockage. Les images hero et les vignettes de carte passent par un petit composant SmartImage qui choisit automatiquement la bonne stratégie :

Déposez le fichier dans src/assets/images/posts/<post-identifier>/ et référencez-le depuis le frontmatter par un chemin relatif au fichier markdown :

# src/content/posts/fr/balade-cotiere.md → src/assets/images/posts/balade-cotiere/coastline.jpg
heroImage: ../../../assets/images/posts/balade-cotiere/coastline.jpg
heroImageAlt: Vagues sur une côte rocheuse en longue exposition

Le schéma de la collection utilise le helper image() d’Astro : le fichier est validé, ses dimensions sont déduites au build, et l’image traverse l’optimiseur (formats modernes + srcset responsive). C’est l’option à privilégier par défaut.

En MDX vous pouvez aussi importer des assets explicitement et les passer à <Image> pour un usage en ligne :

import { Image } from 'astro:assets';
import coastline from '../../../assets/images/posts/featured-images-and-media/coastline.jpg';

<Image src={coastline} alt="Une côte au crépuscule" widths={[400, 800, 1600]} />

Déposez le fichier dans public/ et référencez-le par chemin absolu :

heroImage: /images/coastline.jpg
heroImageAlt: Vagues sur une côte rocheuse en longue exposition

Pour : zéro cérémonial. Contre : pas d’optimisation automatique — Astro ne traite délibérément rien dans public/. Le navigateur reçoit le fichier tel quel. À utiliser pour des assets dont l’URL doit rester stable (favicons, OG par défaut, manifeste web).

Les URL distantes sont des citoyennes de première classe. Le hero et les composants de carte les passent au service d’image d’Astro qui télécharge la source au build, la convertit en WebP, et émet un srcset responsive :

heroImage: ../../../assets/images/posts/typography-and-markdown/light-through-window.png
heroImageAlt: Lumière douce du jour sur un bureau en bois

L’hôte doit être autorisé dans image.remotePatterns de astro.config.mjs. Les valeurs par défaut couvrent Unsplash, GitHub user content, jsDelivr, Cloudinary et Cloudflare Images ; ajoutez votre propre CDN si vous en utilisez un. Tout hôte hors liste fait échouer le build avec un message clair.

Le hero apparaît à deux endroits :

Comme vignette de carte (page d’accueil, listings, archives, pages de tag et de catégorie).
Comme grand hero sur la page de l’article.

Les deux sont contrôlés par :

SITE.showFeaturedImages dans src/config.ts — défaut global.
SITE.dynamicPostCardHeight dans src/config.ts — contrôle si les cartes de listing avec vignette gardent une hauteur desktop fixe (false) ou peuvent s’étendre pour des extraits plus longs (true).
showFeaturedImage par article — override le défaut global.
heroImage par article — fournit la source réelle.

Si heroImage est absent, aucun hero n’est rendu, drapeaux ou non. Si heroImage est présent mais showFeaturedImage: false, la page de l’article est sans image — mais la carte sur les listings peut toujours utiliser le hero, selon votre personnalisation de mise en page.

Si vos listings paraissent trop rigides (ou trop irréguliers), c’est le réglage global à ajuster sans modifier le markup des composants.

Les images Markdown en ligne occupent toute la largeur de la prose :

Roches de côte photographiées sous un ciel couvert

Une figure légendée avec <figcaption> :

Le soleil perçant les nuages au-dessus de l'océan — Soleil sur l’horizon. Photo de Sean O. sur Unsplash.

Images côte à côte ? Mettez-les dans un <div> HTML avec des classes Tailwind (c’est du MDX, après tout) :

Le thème inclut un composant <VideoEmbed> pour des intégrations vidéo responsives et respectueuses de la vie privée. Il affiche une iframe en 16:9 avec des coins arrondis et une légende optionnelle — cohérent avec la mise en forme des images.

Utilisez les props raccourcies platform + id — le composant construit l’URL d’intégration automatiquement (en utilisant youtube-nocookie.com pour la confidentialité) :

Intégration YouTube via les props platform + id.

Même principe :

Intégration Vimeo.

Pour tout autre fournisseur, passez l’URL complète via src :

<VideoEmbed
  src="https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ"
  title="URL d'intégration personnalisée"
  caption="Texte de légende optionnel"
/>

heroImageAlt est techniquement optionnel. Ne le traitez pas ainsi.

Images décoratives (un bandeau coloré en haut d’un article) : alt vide — heroImageAlt: "".
Images de contenu (capture d’écran, photo, graphique) : décrivez ce que l’image transmet, pas le fichier.
Ne commencez pas par « Image de… » — les lecteurs d’écran l’annoncent déjà comme image.

Le thème utilise heroImageAlt pour le hero et la vignette de carte, donc un alt bien écrit sert les deux contextes.

Les images hero et de carte passent par SmartImage et reçoivent automatiquement un srcset responsive en WebP — aucun travail supplémentaire requis.
Les images en ligne en <img> brut ne reçoivent loading="lazy" que si vous le précisez ; la syntaxe Markdown ![]() non plus. Préférez <img loading="lazy"> (ou <Image> d’Astro) pour les images en bas de page.
Pour les images en ligne que vous contrôlez, utilisez <Image> de astro:assets avec un fichier importé depuis src/assets/images/posts/<post-identifier>/... afin d’obtenir la même sortie multi-formats et responsive que le hero.
Pour les hero locaux, préférez src/assets/images/posts/<post-identifier>/ à public/ quand c’est possible — seul le premier passe par l’optimiseur.

Les essais photo se lisent mieux sans distraction. C’est pourquoi cet article :

Masque la TOC (toc: false).
Utilise un grand hero plus quelques figures en ligne.
Reste en MDX pour pouvoir glisser des grilles côte à côte sans quitter Markdown.

Bonnes photos.