Tailles d’images explicites

Silktide vérifie que les images de votre page déclarent leurs dimensions, afin que le navigateur puisse réserver la bonne quantité d’espace pour chacune avant leur téléchargement. Les images sans dimensions déclarées font « sauter » la page à leur arrivée.

<!-- Problème : aucune taille, le navigateur ne réserve aucun espace -->
<img src="hero.jpg" alt="Collection de printemps">

<!-- Corrigé : le navigateur réserve immédiatement un emplacement 1200×600 -->
<img src="hero.jpg" alt="Collection de printemps" width="1200" height="600">

Pourquoi c’est important

Tant que le fichier image n’est pas arrivé, le navigateur ne peut pas savoir quelle sera sa taille, sauf si la page l’indique. Faute de cette information, il affiche la page sans réserver d’espace, puis repousse tout vers le bas à chaque chargement d’image : le texte saute en plein milieu d’une phrase et les visiteurs appuient au mauvais endroit, car les cibles se déplacent au dernier moment.

Ces sauts sont mesurés par le décalage de mise en page (Cumulative Layout Shift, CLS), qui fait partie des de Google et influence aussi le classement dans les résultats de recherche. Les images sans dimensions en sont la cause la plus fréquente.

Comment corriger

Ajoutez les attributs width et height à chaque image et vidéo, en respectant les proportions réelles du fichier. Le navigateur s’en sert pour réserver l’espace au bon ratio d’aspect, même lorsque le met l’image à l’échelle de façon responsive.
Pour les images responsives, conservez ces attributs et laissez le CSS tel que max-width: 100%; height: auto; gérer la mise à l’échelle — l’espace réservé s’adapte avec elle.
Si vous ne pouvez pas ajouter d’attributs, réservez l’espace en CSS avec la propriété aspect-ratio sur l’image ou son conteneur.
Vérifiez votre : la plupart ajoutent automatiquement les dimensions quand les images sont insérées via l’éditeur ; les tailles manquantes proviennent donc souvent de écrit à la main, de modèles ou de contenu intégré.

Comment Silktide teste ceci

Silktide charge la page dans un vrai navigateur, en utilisant le type d’appareil, la vitesse de connexion et l’emplacement de test configurés pour vos tests de vitesse.
Trouve chaque image rendue sans taille explicite — pas d’attributs width/height exploitables et aucun CSS qui fixe ses dimensions.
Signale chaque image sans dimensions, avec son emplacement sur la page.

Dépannage

La page a l’air correcte quand je la charge

Avec des images en cache ou une connexion rapide, elles peuvent arriver si vite que rien ne semble bouger. Les visiteurs sur des réseaux plus lents voient la même page se construire petit à petit. L’espace réservé ne coûte rien quand l’image se charge vite, et empêche le saut quand ce n’est pas le cas.

Des tailles fixes ne vont-elles pas casser mon design responsive ?

Non. Les navigateurs modernes interprètent les attributs width et height comme le ratio d’aspect de l’image, pas comme une taille figée, donc le CSS peut toujours adapter l’image à n’importe quel écran. Les attributs et le fonctionnent de concert.