Tailles d’image explicites

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

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

<!-- Corrigé : le navigateur réserve immédiatement un emplacement 1200x600 -->
<img src="hero.jpg" alt="Collection du 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, à moins que la page ne l’indique. Sans cette information, il rend la page sans espace, puis repousse tout vers le bas au chargement de chaque image — le texte saute en plein milieu d’une phrase et les visiteurs touchent le mauvais élément, car les cibles se déplacent au dernier moment.

Ces sauts sont mesurés comme un décalage de mise en page, qui fait partie des de Google et influe aussi sur le classement dans les résultats de recherche. Les images sans taille en sont la cause la plus courante.

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 de l’espace au bon rapport d’aspect, même lorsque le met l’image à l’échelle de façon réactive.
Pour les images réactives, conservez les attributs et laissez le CSS (p. ex. max-width: 100%; height: auto;) faire la mise à l’échelle — l’espace réservé s’adapte en même temps.
Si vous ne pouvez pas ajouter d’attributs, réservez l’espace dans le CSS à la place avec la propriété aspect-ratio sur l’image ou son conteneur.
Vérifiez votre : la plupart insèrent automatiquement les dimensions lorsque les images sont ajoutées via l’éditeur; les tailles manquantes proviennent donc souvent de écrit à la main, de gabarits ou de contenu intégré.

Comment Silktide teste ceci

Charger la page dans un vrai navigateur, en utilisant le type d’appareil, la vitesse de connexion et l’emplacement du test configurés pour vos tests de vitesse.
Repérer chaque image rendue sans taille explicite — aucun attribut width/height exploitable et aucun CSS qui fixe ses dimensions.
Signaler chaque image sans taille, avec son emplacement dans la page.

Dépannage

Tout semble correct quand je charge la page

Avec des images en cache ou une connexion rapide, les images peuvent arriver si vite que rien ne saute visiblement. Les visiteurs sur des réseaux plus lents voient la même page se construire morceau par morceau. Réserver l’espace 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 briser ma conception réactive ?

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