Attributs width et height sur les images

Attributs width et height sur les images

Les images sont souvent considérées comme des éléments de présentations. La nouvelle doctrine du Web voulant une séparation stricte entre les 3 composantes d’une page Web : les données (HTML), la présentation (CSS) et le comportement (Javascript) ne sait pas fait sans erreurs. En première ligne, les attributs width et height des images qui n’ont malheureusement plus la cote et pourtant. Il est important de les renseigner.

Les attributs width et height sur la balise img sont des attributs qui permettent de renseigner la taille de l’image. Ce ne sont pas à proprement parler des données de présentation mais plutôt une information sur l’objet lui même au même titre que la source de l’image. C’est dans cet esprit que le W3C à maintenu ces attributs dans les variantes strictes du XHTML, à la seule condition de renseigner la taille réelle de l’image en pixel.

Les avantages de renseigner ces attributs sont simples, elles permettent d’accélérer l’affichage d’une page Web. En effet, sans ses attributs, n’importe quel navigateur devra déduire du fichier image la taille de l’image pour assurer son rendu. En effet lorsque votre navigateur connaît la taille de l’image il peut réserver son emplacement et continuer à charger le reste de la page Web pendant le téléchargement de l’image. Par contre s’il ne connaît pas la taille, il lui faut attendre de charger l’image entièrement pour réserver le bon espace.

Vu le nombre d’image que l’on trouve actuellement sur les pages Web, le gain est appréciable. Les moteurs de recherche prennent de plus en plus en compte la vitesse d’affichage des pages dans leurs algorithmes. Bien sûr, dans le cas où l’on ne donne pas la taille exacte de l’image, mais une autre taille uniquement pour des raisons de mise en page. Il est alors souhaitable de mettre ces dimensions dans une feuille de style CSS. (Ce genre de manipulation est en générale à éviter, générer des images à la bonne taille coté serveur doit être la règle dans un site de Web de qualité, mais bon ceci est un autre sujet).

Renseigner ces attributs ne changera pas fondamentalement la qualité de votre site mais c’est l’une des nombreuses petites améliorations qui peuvent faire la différence en termes de rapidité d’affichage et donc de confort utilisateur.

comments powered by Disqus
A la une
  • Rencontre du numérique 2019 - Nîmes
  • référencement naturel d'un hôtel
  • Développeur eZ Platform
  • Tech lead Symfony
  • Expert Qualité Web

Copyright - Sylvain FIX

2009 - 2019