L'importance de définir la hauteur et la largeur pour vos balises img src

Tout d'abord, question simple et réponse simple :

Dois-je ajouter la hauteur et la largeur à la balise img src? Oui ! Même si le but n'est pas de redimensionner. En effet, L'ajout des attributs de hauteur et de largeur à votre balise HTML IMG SRC permet au navigateur de savoir combien d'espace il reste pour une image. Sans ces valeurs, le navigateur ne crée pas initialement d'espace pour l'image, ce qui signifie que les éléments entourant l'image sont ajustés après son chargement.

 

En une image, cela donnerai cette comparaison :

 

Comme vu dans l'exemple ci-dessus, les trois premières pages montrent un chargement de page qui ne spécifie pas les dimensions de l'image. Au fur et à mesure que les pages se chargent, le texte entourant les images est ajusté pour s'adapter à l'image. Cependant, avec les dimensions de l'image spécifiées, comme indiqué dans les trois pages suivantes, le navigateur sait combien d'espace allouer. Par conséquent, le texte reste au même endroit que le chargement des images.

 

Si vous disposez d'une connexion Internet rapide, vous ne remarquerez peut-être pas ce processus de chargement. Cependant, pour les personnes ayant des connexions lentes, naviguant sur un téléphone ou si votre site se charge lentement, le fait de ne pas spécifier les tailles d'image rend la tâche encore plus difficile pour les visiteurs du site.

 

Vous trouverez ci-dessous un exemple de l'apparence d'une balise IMG dans votre code HTML avec la hauteur et la largeur spécifiées.

<img src="images/votre-image.png" width="250" height="250" alt="Mot clé SEO">

 

Vous êtes peut-être ici car suite à une recommandation GTmetrix, Web.dev ou encore LightHouse du type :

 

The following image(s) are missing width and/or height attributes.

 

En effet, vous pouvez être confus car il s'agit d'une recommandation récente même si celle-ci est logique. Vous n'aviez jamais pensé à détailler propriétés de vos images, sauf pour celles que vous vouliez redimentionner (et une autre recommendation vous déconseille de le faire !) 

 

Toutefois, pensez à vos visiteurs sur format mobile chez qui des mouvements de pages peuvent clairement rendre infernal la visite de votre site web. Surtout si leur mobile n'est pas très puissant ou peu couvert par le réseau, ce qui engendrera une "reconstruction" de page à chaque chargement d'image.

  • 0 Utilisateurs l'ont trouvée utile
Cette réponse était-elle pertinente?

Articles connexes

Affichage mobile et SEO - Balise meta viewport

La balise viewport ressemble à ceci : <meta name="viewport" content="width=device-width,...

GTMetrix - Use Cookie-Free Domains

Lorsque vous diffusez du contenu statique tel qu'une image, un script JS ou encore du CSS, il n’y...

Google Tag Manager - Centralisez vos tiers

Vous êtes gérant d'un site web ? Voici une astuce pour vous !Nous vous présentons donc "Google...

Defer offscreen images - Booster votre site avec le lazy loading

Dans tout projet web, les images occupent une place importante. Si elles se doivent d'être d’une...

WebPerf - Améliorer la gestion de ses scripts via les atributs async et defer

Petite astuce pour accélérer le chargement de vos sites web !   Comme tout...

Powered by WHMCompleteSolution