Réserver l’espace des images
Objectif : Déclarer les dimensions intrinsèques des images afin de réserver leur espace et limiter les déplacements de contenu au chargement.
Quand une image se charge après le texte qui l’entoure, elle peut repousser ce texte et décaler les commandes de la page. Ces mouvements gênent la lecture et peuvent faire perdre à l’utilisateur la position qu’il était en train de consulter. Vous allez déclarer les dimensions de l’affiche de la Soirée des cultures pour que le navigateur connaisse son emplacement avant d’avoir téléchargé le fichier.
Les attributs width et height donnent à l’image ses dimensions intrinsèques, exprimées ici en pixels. À partir de ces valeurs, le navigateur peut calculer son ratio et réserver la hauteur correspondante pendant le chargement. Le texte qui suit l’image n’a donc pas besoin d’attendre son affichage pour trouver sa place dans la page.
Sans dimensions connues, le navigateur peut d’abord disposer le contenu comme si l’image n’occupait pas de place. Lorsque le fichier arrive, l’image apparaît et repousse les éléments suivants : c’est un déplacement de mise en page. Déclarer les dimensions réduit ce risque, à condition que les valeurs correspondent bien au fichier utilisé.
Dans le projet, l’affiche est un fichier de 1200 pixels de large sur 800 pixels de haut. La balise de la page contient déjà ces dimensions : gardez-les et vérifiez qu’elles décrivent le fichier réellement livré dans assets/affiche-evenement.jpg. Voici l’état complet de index.html à cette étape, avec la description JSON-LD conservée et l’image munie de ses dimensions.
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Association culturelle — événements</title>
<meta name="description" content="Découvrez les événements et les activités de notre association culturelle.">
<link rel="canonical" href="https://exemple.fr/evenements">
<meta property="og:type" content="website">
<meta property="og:locale" content="fr_FR">
<meta property="og:title" content="Association culturelle — événements">
<meta property="og:description" content="Découvrez les événements et les activités de notre association culturelle.">
<meta property="og:url" content="https://exemple.fr/evenements">
<meta property="og:image" content="https://exemple.fr/assets/affiche-evenement.jpg">
<meta name="twitter:card" content="summary_large_image">
<link rel="preload" as="image" href="assets/affiche-evenement.jpg">
<link rel="stylesheet" href="style.css">
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Event",
"name": "Soirée des cultures",
"startDate": "2026-06-20T18:00:00+02:00",
"endDate": "2026-06-20T22:00:00+02:00",
"eventStatus": "https://schema.org/EventScheduled",
"eventAttendanceMode": "https://schema.org/OfflineEventAttendanceMode",
"location": {
"@type": "Place",
"name": "Maison des associations",
"address": {
"@type": "PostalAddress",
"streetAddress": "10 rue des Arts",
"addressLocality": "Lyon",
"postalCode": "69001",
"addressCountry": "FR"
}
},
"organizer": {
"@type": "Organization",
"name": "Association culturelle",
"url": "https://exemple.fr/"
},
"image": "https://exemple.fr/assets/affiche-evenement.jpg",
"description": "Une soirée de rencontres, de musique et de découvertes culturelles.",
"url": "https://exemple.fr/evenements#evenements"
}
</script>
</head>
<body class="culture-page">
<a class="culture-lien-evitement" href="#contenu">Aller au contenu principal</a>
<header class="culture-entete">
<a href="/" aria-label="Association culturelle, accueil">Association culturelle</a>
<nav class="culture-navigation" aria-label="Navigation principale">
<ul>
<li><a href="#evenements">Événements</a></li>
<li><a href="#association">L’association</a></li>
</ul>
</nav>
<button class="culture-bouton" type="button" command="show-modal" commandfor="newsletter">S’inscrire à la newsletter</button>
</header>
<main class="culture-contenu" id="contenu">
<h1>Nos événements</h1>
<section class="culture-evenements" id="evenements" aria-labelledby="titre-evenements">
<h2 id="titre-evenements">À venir</h2>
<article class="culture-evenement">
<h3>Soirée des cultures</h3>
<img class="culture-image" src="assets/affiche-evenement.jpg" alt="Affiche illustrée de la soirée des cultures" width="1200" height="800" fetchpriority="high">
<p><time datetime="2026-06-20T18:00:00+02:00">20 juin 2026, à 18 h</time></p>
<p>Une soirée de rencontres, de musique et de découvertes culturelles.</p>
<details class="culture-details">
<summary>Informations pratiques</summary>
<p>Rendez-vous à la Maison des associations, 10 rue des Arts, Lyon.</p>
</details>
</article>
</section>
<section id="association" aria-labelledby="titre-association">
<h2 id="titre-association">Notre association</h2>
<p>Nous créons des occasions de partager et de découvrir les cultures.</p>
</section>
</main>
<dialog class="culture-dialogue" id="newsletter" aria-labelledby="titre-newsletter">
<h2 id="titre-newsletter">Recevoir la newsletter</h2>
<form action="/inscription" method="post">
<label for="courriel">Adresse courriel</label>
<input id="courriel" name="courriel" type="email" autocomplete="email" required>
<button class="culture-bouton" type="submit">S’inscrire</button>
<button class="culture-bouton" type="button" command="close" commandfor="newsletter">Fermer</button>
</form>
</dialog>
<footer class="culture-pied">
<p>Association culturelle — <a href="/mentions-legales">Mentions légales</a></p>
</footer>
</body>
</html>Les valeurs de la balise sont les dimensions du fichier, et non une consigne imposant que l’image occupe toujours 1200 pixels à l’écran. Si la feuille style.css adapte sa largeur à l’espace disponible, conservez les attributs : ils donnent au navigateur le ratio nécessaire pour prévoir la hauteur proportionnelle. Vous n’avez pas besoin de dupliquer cette information dans un attribut style ou dans une nouvelle règle CSS.
Rechargez la page et observez la zone de l’affiche avant puis pendant son chargement. L’espace prévu doit conserver le ratio de 1200 sur 800, de sorte que le texte et les informations pratiques restent en place au moment où l’image apparaît. Si le fichier est remplacé par une image de proportions différentes, mettez à jour les attributs : des dimensions erronées peuvent elles aussi provoquer un affichage incorrect ou un déplacement.
- Renseignez
widthetheightavec les dimensions intrinsèques de chaque image. - Les dimensions permettent au navigateur de réserver l’espace de l’image avant son téléchargement.
- Un espace réservé au bon ratio limite les déplacements de contenu à l’affichage de l’image.
- Vérifiez les attributs lorsque vous remplacez un fichier et ne différez pas l’image prioritaire de l’événement.
Dans la prochaine leçon, vous choisirez quelles images situées hors écran peuvent être chargées de façon différée.