Pourquoi préciser la largeur et la hauteur dans la balise <img>

Pourquoi préciser la largeur et la hauteur dans la balise

Lors de la création d’une page web, la balise est l’une des plus couramment utilisées. Cependant, il est encore fréquent de voir des images insérées uniquement avec l’attribut src, sans préciser leurs dimensions.

Cette omission peut provoquer des décalages de mise en page pendant le chargement, nuisant ainsi à l’expérience utilisateur et aux indicateurs de performance. Dans cet article, nous examinerons, d’un point de vue technique, pourquoi il est crucial de déclarer width et height dans la balise et quels avantages concrets cela apporte.

1. Performance de rendu et vitesse de chargement

1-1. Assurer la stabilité de la mise en page (Stable Layout)

Les navigateurs parsèment le HTML et tentent de rendre l’affichage le plus rapidement possible. Si la taille de l’image est inconnue, le navigateur ne peut pas calculer l’espace que l’élément occupera.

En conséquence, dès que l’image se charge, elle pousse le contenu existant, provoquant un décalage de mise en page (Layout Shift) inattendu.

<img src="photo.jpg">

Dans ce cas, l’élément est considéré comme ayant une hauteur nulle avant le chargement, puis la hauteur réelle est appliquée une fois l’image chargée, ce qui réarrange la page.

1-2. Réduction du Cumulative Layout Shift (CLS)

Le CLS est l’un des indicateurs des Google Core Web Vitals, mesurant les déplacements inattendus de mise en page pendant le chargement.

En définissant width et height, le navigateur calcule le rapport hauteur/largeur (aspect ratio) avant le chargement, prévoyant ainsi l’espace nécessaire.

Références CLS

CLS ≤ 0.1 : bon

CLS ≥ 0.25 : amélioration nécessaire

Préciser les dimensions est l’une des méthodes les plus simples et les plus efficaces pour réduire le CLS.

1-3. Compréhension précise de la bande passante réseau

Il existe un malentendu fréquent :

La déclaration de width et height ne réduit pas la taille du fichier image téléchargé.

Le navigateur télécharge toujours l’image originale.
Les attributs width / height servent uniquement à l’estimation de la mise en page.

La réduction réelle de la bande passante se fait via :

srcset / sizes
Redimensionnement côté serveur
Utilisation de l’élément <picture>

Néanmoins, préciser les dimensions stabilise le rendu, améliorant ainsi la perception de la vitesse de chargement et la qualité visuelle.

2. Avantages en matière d’accessibilité

2-1. Flux de lecture prévisible

L’accessibilité repose surtout sur l’attribut alt, mais la stabilité de la mise en page joue un rôle complémentaire.

Lorsque les dimensions sont claires, la structure de la page devient prévisible, et les lecteurs d’écran ne subissent pas de changements brusques de flux.

width et height ne sont pas des éléments obligatoires pour l’accessibilité, mais la stabilité de la mise en page l’améliore indirectement.

2-2. Prédictibilité de la mise en page sur mobile

Sur mobile, l’écran est limité ; même de petits changements de mise en page sont très perceptibles.

Sans dimensions, on peut observer :

Le contenu se déplace pendant le chargement
Les espacements entre éléments changent brusquement lors du zoom.

Définir la proportion de base de l’image réduit ces instabilités.

3. Point de vue SEO

Relation entre CLS et optimisation SEO

Les moteurs de recherche évaluent la performance de chargement et l’expérience utilisateur.

Pages à faible CLS
Rendu initial stable

Ces caractéristiques sont perçues comme des indicateurs de qualité, favorisant un meilleur classement.

De plus, une structure d’image claire aide les moteurs à comprendre la page et peut améliorer les résultats de recherche d’images.

4. Exemples de code

4-1. Sans dimensions (cas problématique)

<img src="https://example.com/photo.jpg" alt="Beautiful scenery">

4-2. Avec dimensions (cas recommandé)

<img
  src="https://example.com/photo.jpg"
  alt="Beautiful scenery"
  width="800"
  height="600">

Remarques

width et height sont des valeurs en pixels selon la norme HTML.

Dans un design réactif, il est courant d’ajouter le CSS suivant.

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

5. Résumé des bonnes pratiques

Situation	Méthode recommandée
Images statiques	Préciser `width` et `height`
Images réactives	`width`/`height` + `max-width: 100%; height: auto;`
Images dynamiques	Insérer les dimensions via métadonnées côté serveur
SVG	Définir le ratio avec `viewBox`, ajouter `width`/`height` si nécessaire

6. Conclusion

Stabilité de la mise en page → réduction du CLS → amélioration de l’expérience utilisateur
Prévisibilité du rendu → meilleure perception de la performance
Signal positif pour le SEO

Préciser width et height n’est pas simplement une question de style de code, mais un principe fondamental pour améliorer simultanément la performance web et l’expérience utilisateur.

En ajoutant ces deux attributs de façon habituelle, la qualité de vos pages web s’améliore de façon notable.

Pour les ingénieurs front‑end, consultez également ces articles utiles !