Des images correctement dimensionnées (ville-limay.fr)

Date de publication : 2007-04-10, par Patrice Bourlon - lien permanent

Aujourd'hui, nous évoquerons le dimensionnement des images intégrées dans les pages Web et plus particulièrement, la taille réelle des images versus la taille affichée.

Ce point ne constitue pas à proprement parler un critère d'accessibilité, en ce sens qu'il ne fait pas partie des 65 points de contrôle des WCAG 1.0, mais il devra cependant être pris en compte comme une cause primaire possible de ralentissement du chargement des pages.

Mauvaise pratique

Certains sites injectent des images de grande largeur et les redimensionnent par les attributs width et height du HTML : c'est le cas de la page d'accueil du site de la Ville de Limay.

Cette page comporte plusieurs images dimensionnées avec ce procédé (exemple : une image affichée dans une taille 225 x 300 pixels est en fait une image de 596x797 pixels qui "pèse" plus de 1,5 Mo !).

Au total, le jour de notre analyse, la page d'accueil du site de Limay pesait plus de 3,8 Mo - une sorte de record du monde... -, et son temps de chargement, avec une connexion téléphonique classique (56 kbps), était évalué à plus de 13 minutes par l'outil Web Page Speed Report ; et, à plus de 30 secondes avec une connexion haut débit de 1,5 Mbps (Copie d'écran extraits du rapport).

Bonne pratique

Le poids d'une image dépendant essentiellement de sa taille, la bonne pratique consiste à créer des images aux dimensions voulues. Ainsi, si on veut d'une part, une image de petite dimension, souvent appelée "vignette", et d'autre part, une image en grande dimension, il faudra créer 2 images distinctes - la création de ces images/fichiers distincts pouvant être réalisée manuellement ou par un procédé de redimensionnement automatique, coté serveur.

Haut de page