Taille des images spécifiée et temps de chargement

Bonjour,

j'aimerais savoir si en mettant width="xx" et height="xx" dans les attributs de ma balise image sur ma page html, je réduis le temps de chargement de la page.

(Il est clair que je ne peux plus être valide strict w3c)

Bonjour,

Les attributs width et height ne sont absolument pas dépréciés (et donc pas invalides) en (x)HTML strict.

Pour ce qui est du temps de chargement, je ne vois pas trop quelle rapport il pourrait y avoir entre celui-ci et la présence des dimensions des images dans le code HTML (au contraire avec les attributs le fichier HTML pèsera quelques octets de plus et donc sera (dans l'absolu) plus long à charger que sans).

La présence de ces attributs est surtout intéressante si l'on souhaite qu'avant que tous les éléments ne soit chargés (ou si les images venaient à ne pas être charger) réserver l'espace nécessaire évitant alors des modifications du design lors du chargement dues à l'apparition des images.

En complément de la dernière remarque de Laurie-Anne, la taille des image peut servir à certain navigateurs pour mobile lorsque ces derniers doivent déterminer si oui ou non il peuvent afficher l'image (il ne l'afficheront pas au delà d'une certaine taille).
Ensuite ces infos de taille peuvent servir par exemple à Google Image (quand les paramètres de taille sont précisés dans les préférences).

Ces attributs ne réduiront absolument pas le temps de chargement de la page, puisque tu charges l'image de toute façon, telle qu'elle est sur le serveur. Tu te contentes de l'afficher à une taille différente de sa taille réelle. Il ne faut pas confondre la taille telle qu'affichée (en pixels), et le poids du fichier (en Kb).

merci pour ces infos,
donc indiquer la taille ferait gagner du temps en réservant la place au cadre de l'image dans la mise en page si j'ai bien compris.

Non, ça ne fait pas gagner de temps.

Laurie-Anne a écrit :
Non, ça ne fait pas gagner de temps.

En fait si, ça peut faire gagner un peu de temps en évitant un reflow (calcul de l'affichage d'une partie de page ou de la page entière). Mais là on est dans la recherche de la milliseconde gagnée, c'est un peu extrême (et sans doute inapproprié) d'utiliser width et height pour cette raison. Surtout que les reflow, c'est un sujet complexe, difficile d'affirmer qu'on va réellement éviter des reflow et gagner quoi que ce soit.

Il y a une bonne centaine de critères d'optimisation à prendre en compte avant celui-ci (si jamais on s'en préoccupe).

Enfin, comme déjà dit, préciser hauteur et largeur des images ne réduira pas le temps de chargement du fichier image lui-même. Sauf si le navigateur décide d'utiliser ces informations pour ne pas charger l'image (théoriquement certains navigateurs mobiles font ça, mais je n'en ai pas croisé...).
Modifié par Florent V. (03 Dec 2009 - 22:38)