Sans espace réservé
Ni dimensions HTML ni équivalent CSS
Grille d’audit des images web · IMG22 & IMG23
Images et stabilité visuelle.
Observer avant de corriger.
Que se passe-t-il quand l’image arrive après le texte ? Comparez la même page, avec et sans espace réservé pour l’image.
01 · Exploration visuelle
Regardez le repère de lecture.
Apparition de l’image différée pour la démonstration : 1,5 seconde.
Ce délai pédagogique n’est pas une lenteur réseau mesurée.
Avec width et height
1 200 × 800 · le ratio réel de l’image
Avant / après, sans lancer le mouvement
A · Sans dimensions
Avant : le navigateur ne connaît pas encore la hauteur de l’image. Après : l’image décodée prend sa place ; le contenu situé dessous peut se déplacer.
B · Avec dimensions intrinsèques
Avant : width et height déclarent le ratio 3:2. Après : l’image remplit l’espace réservé. C’est le mécanisme attendu ; les mesures effectuées sont présentées plus bas.
02 · L’intervention
Deux attributs. La même image.
Le fichier image, le texte et le CSS commun sont identiques dans les deux documents expérimentaux. La seule différence HTML est l’ajout de width et height. Aucun placeholder, hauteur fixe du conteneur ou aspect-ratio commun ne réserve l’espace de A.
A · Sans dimensions
<img id="image" src="../assets/edikka-image.jpg" alt="[même texte alternatif]">
B · Ajout : dimensions intrinsèques
<img id="image"
src="../assets/edikka-image.jpg"
width="1200" height="800"
alt="[même texte alternatif]">Règle responsive commune : width: 100%; height: auto; · CSS partagé complet. Image : 1 200 × 800, JPEG, 152 231 octets. Aucun test de format ou de compression ici.
03 · Observations archivées
Un scénario de laboratoire, avec ses limites.
Ces mesures viennent de navigations principales distinctes sur un serveur local. L’image est présente dans le HTML initial ; sa réponse est retardée de 2 secondes. Le CLS est observé pendant les 6 premières secondes. Ces valeurs ne mesurent ni votre rejeu ci-dessus ni une visite sur GitHub Pages.
Viewport mobile · A
0,051149CLS observé · 0–6 s
3 essais valides · 233,33 px CSS
Viewport mobile · B
0CLS observé · 0–6 s
3 essais valides · 0 px CSS
Ordinateur · A
0,014321CLS observé · 0–6 s
3 essais valides · 320 px CSS
Ordinateur · B
0CLS observé · 0–6 s
3 essais valides · 0 px CSS
Les valeurs ci-dessus sont générées depuis les relevés ci-dessous. Des répétitions identiques sont affichées une fois ; des valeurs différentes formeraient une plage. Tous les échecs restent dans le tableau.
| Essai / viewport | Variante / répétition | CLS · 0–6 s | Repère · px CSS | Statut | Preuves |
|---|---|---|---|---|---|
| 1 · Viewport mobile | A · essai 1 | 0,051149 | 233,33 px | Valide | JSON #1 · Avant #1 · Après #1 |
| 2 · Viewport mobile | B · essai 1 | 0 | 0 px | Valide | JSON #2 · Avant #2 · Après #2 |
| 3 · Viewport mobile | B · essai 2 | 0 | 0 px | Valide | JSON #3 · Avant #3 · Après #3 |
| 4 · Viewport mobile | A · essai 2 | 0,051149 | 233,33 px | Valide | JSON #4 · Avant #4 · Après #4 |
| 5 · Viewport mobile | A · essai 3 | 0,051149 | 233,33 px | Valide | JSON #5 · Avant #5 · Après #5 |
| 6 · Viewport mobile | B · essai 3 | 0 | 0 px | Valide | JSON #6 · Avant #6 · Après #6 |
| 7 · Ordinateur | A · essai 1 | 0,014321 | 320 px | Valide | JSON #7 · Avant #7 · Après #7 |
| 8 · Ordinateur | B · essai 1 | 0 | 0 px | Valide | JSON #8 · Avant #8 · Après #8 |
| 9 · Ordinateur | B · essai 2 | 0 | 0 px | Valide | JSON #9 · Avant #9 · Après #9 |
| 10 · Ordinateur | A · essai 2 | 0,014321 | 320 px | Valide | JSON #10 · Avant #10 · Après #10 |
| 11 · Ordinateur | A · essai 3 | 0,014321 | 320 px | Valide | JSON #11 · Avant #11 · Après #11 |
| 12 · Ordinateur | B · essai 3 | 0 | 0 px | Valide | JSON #12 · Avant #12 · Après #12 |
La scène expérimentale reste française dans tous les essais de laboratoire. Les deux viewports sont 390 × 844 et 1 440 × 900 px CSS. Le repère reste visible avant et après chargement. Il s’agit de viewports de navigateur sur ordinateur, pas d’essais sur des téléphones réels.
Dates, navigateur et révisions expérimentales
Les dates de mesure ci-dessous sont distinctes des dates de build ou de publication. Chaque relevé conserve le navigateur, les outils, le système, le DPR, le cache, les octets de l’image et sa chronologie.
Browser 154.0.8037.59 · Playwright 1.63.0 · web-vitals 6.2.2 · darwin 25.3.0
- Série 2026-10-01T08-01-22-336Z · 2026-10-01T08:01:22.347Z → 2026-10-01T08:02:36.949Z · Archive des sources expérimentales
SHA-256 dd024d945e42b7bd0cadc5321e88104f3d1ea10c3d6eb82cefe1325c51bcf548
Quatre observations différentes
- Observation visuelle : ce que vous voyez se déplacer.
- Déplacement du repère : sa différence de position en pixels CSS.
- CLS du scénario : la plus grande fenêtre de session sur une période de laboratoire bornée.
- Données terrain : non collectées par cette expérience.
Ce que l’essai n’établit pas
Douze essais décrivent cette image, ce code, ce navigateur et ce protocole. Ils n’établissent ni score global d’un site, ni effet statistique général, ni gain SEO ou conversion, ni conformité d’accessibilité. Cette version étudie uniquement la réservation d’espace.
Les sources de décalage identifient les éléments déplacés, pas automatiquement la cause. Une API absente reste indisponible, jamais égale à zéro. Rejouer ne réinitialise pas le CLS de la page parente.
Comment le CLS est calculé ici
web-vitals 6.2.2 regroupe les décalages inattendus en fenêtres de session séparées par moins de 1 seconde et durant moins de 5 secondes. Les entrées hadRecentInput sont exclues. Nous retenons la plus grande valeur dans l’observation déclarée de 0 à 6 secondes. Ce n’est ni la somme de tous les décalages ni le CLS final d’une visite entière. Chaque JSON conserve les événements bruts, les horaires, la visibilité, les erreurs et les éléments déplacés.
Reproduire dans un laboratoire distinct
Le protocole a été écrit avant la collecte. Le build génère uniquement la présentation statique et ne lance aucune mesure. Une nouvelle collecte crée une série datée ; les observations existantes sont conservées.
npm ci npm run build npm start # présentation publique en local # Terminal distinct, nouvelle série de laboratoire npm run measure npm run results npm run prepare:publish
Rattachement à IMG22 et IMG23
IMG22 · Width et height décrivent-ils le ratio intrinsèque du candidat ou du fallback de référence ?
Comparer attributs, dimensions décodées et ratio rendu.
IMG23 · L’espace est-il réservé avant le téléchargement sur tous les breakpoints ?
Désactiver le cache, ralentir le réseau et observer la boîte avant décodage.
Ces contrôles appartiennent à la grille existante 1.1. Ce complément n’ajoute aucun instrument et ne prétend pas valider tous les breakpoints d’un site réel.