📏 Pourquoi déclarer les dimensions width et height sur vos images

Beaucoup de développeurs insèrent des images dans leurs pages web sans spécifier leurs dimensions. Pourtant, indiquer les attributs width et height sur une balise <img> est une pratique essentielle pour garantir un chargement fluide et éviter les sauts de mise en page.

🧠 Qu’est-ce que ça change ?

Lorsqu’un navigateur rencontre une image sans dimensions définies, il ne peut pas réserver d’espace à l’avance. Il doit attendre que l’image soit chargée pour connaître sa taille réelle. Cela provoque :

• 📉 des sauts de contenu (layout shift), nuisibles à l’expérience utilisateur
• ⚠️ une dégradation du score Core Web Vitals, mesuré par Google pour le référencement

Définir les dimensions permet au navigateur de réserver l’espace exact de l’image dans la page, même si elle n’est pas encore chargée.

✅ Comment bien déclarer ses dimensions

Voici une bonne pratique à appliquer :

<img src="exemple.webp"
     alt="Description de l'image"
     width="800"
     height="600"
     loading="lazy">
  

Les attributs width et height définissent les dimensions *intrinsèques* de l’image. Le navigateur ajuste automatiquement l’affichage si des styles CSS (max-width, responsive) sont appliqués.

🧪 Astuce : combiner avec le responsive

Pour les rendre adaptables aux petits écrans, ajoute une règle CSS :

img {
  max-width: 100%;
  height: auto;
}

Cela garantit que l’image ne déborde jamais du conteneur, tout en conservant ses proportions.

🚀 En résumé

• ✅ Définir width et height réduit les CLS (cumulative layout shift)
• 📱 Cela ne gêne pas le responsive si max-width est bien utilisé
• 🔍 C’est un critère de performance et d’UX pris en compte par Google

🔗 Aller plus loin

• 💾 Compresser un PNG en WebP
• 🖼️ Structure d’image responsive avec picture et srcset