Où spécifier les dimensions de l'image pour un rendu le plus rapide: en HTML ou en CSS?

Question

J'ai appris qu'il est recommandé de spécifier explicitement les dimensions de l'image. Le navigateur peut alors déjà mettre en page la page tout en téléchargeant les images elles-mêmes, améliorant ainsi (perçu) le temps de rendu de la page.

Est-ce vrai? Et si oui, y a-t-il une différence dans la spécification des dimensions en HTML ou CSS?

• HTML: <img src="" width="200" height="100">
• CSS en ligne: <img src="" style="width: 200px; height: 100px">
• CSS externe: #myImage { width: 200px; height: 200px; }

Answer 1

Selon Google Page Speed, il n'a pas vraiment d'importance si vous spécifiez les dimensions via CSS ou HTML, aussi longtemps que votre CSS objectifs de la balise IMG lui-même et pas un parent de l'élément :

Lorsque le navigateur dispose de la page, il doit être capable de s'écouler autour d'éléments remplaçables tels que des images. Il peut commencer à effectuer le rendu d'une page, même avant les images sont téléchargées, à condition qu'il connaît les dimensions pour envelopper non remplaçable éléments qui nous entourent. Si non les dimensions sont spécifiées dans le document contenant, ou si les dimensions indiquées ne correspondent pas à ceux de l'image, le navigateur va nécessiter une redistribution et repeindre une fois les images téléchargées. Pour éviter les remboursements, spécifiez la largeur et la hauteur de toutes les images, que ce soit dans la balise HTML ou en CSS.

Notez, cependant, qu'ils conseillent de ne pas redimensionner l'image à l'aide de ces dimensions, c'est à dire de toujours utiliser les dimensions réelles :

Ne pas utiliser la largeur et la hauteur des spécifications à l'échelle des images à la volée. Si un fichier d'image est fait de 60 x 60 pixels, ne définissez pas les dimensions de 30 x 30 dans le code HTML ou CSS. Si l'image doit être plus petit, mise à l'échelle dans un éditeur d'image et de définir ses dimensions de match (voir Optimiser les images pour plus de détails.)

Answer 2

J'ai tendance à le faire dans le CSS. C'est certainement une victoire quand il y a plusieurs images avec les mêmes dimensions (vous pouvez donc faire des choses comme .comment img.usergroup { width: 16px; height: 16px; } ), et avoir les mêmes images soumises à une mise à l'échelle dans différentes feuilles de style comme des thèmes sélectionnables par l'utilisateur.

Lorsque vous avez des images complètement indépendantes qui ne sont utilisées qu'une seule fois sur le site, il n'est pas vraiment logique de résumer leur taille en CSS, donc la version HTML serait probablement plus appropriée là-bas.

Answer 3

Je pense que CSS vous donne plus de flexibilité: vous pouvez définir spécifiquement la largeur ou la hauteur tout en définissant l'autre dimension sur auto . Mais lors du réglage des deux dimensions, je ne pense pas qu'il y ait de différence.

Answer 4

Si vous placez une grande image dans une page HTML sans dimensions, vous devriez certainement remarquer que la mise en page change pendant que l'image est téléchargée (via une connexion Internet, sinon localement).

Selon les autres réponses, cela ne fait pas beaucoup de différence que vous le fassiez dans le HTML ou le CSS.

Answer 5

Cela ne répond pas directement à votre question, mais je ne compterais pas sur les dimensions de votre image pour la mise en page. Au lieu de cela, incluez l'image dans un élément de niveau bloc. Cela évite à la fois au HTML et au CSS d'avoir à conserver des informations qui ne devraient vraiment pas l'être car l'image peut changer de temps en temps.