Spécification des dimensions de l'image en HTML par rapport au CSS pour le chargement de la page

Question

J'ai appris il y a longtemps que la spécification de la largeur et de la hauteur pour les éléments <img> dans un document HTML accélère et améliore l'expérience de chargement de la page, et a généralement pratique:

<img src="" width="100" height="100" /> 

Je suis maintenant confronté à une situation où j'ai un très grand nombre d'images sur une seule page, et je préfère définir les dimensions via CSS pour la fois un contrôle plus facile et moins répétitif HTML code:

.whatever img {width: 100px; height: 100px;} 

Bien que ce ne soit pas un problème extrêmement sérieux, je me demande si déclarer les dimensions en CSS aura les mêmes avantages que la déclaration des dimensions en HTML, ou si cela devrait être fait directement en HTML?

Toute idée serait la bienvenue.

Merci

Answer 1

Je suppose que si la feuille de style est disponible immédiatement, les dimensions de l'image s'appliqueront immédiatement à la mise en page, qui est le point de l'ensemble de l'exercice. Cette estimation est supportée par Google's pagespeed rules. Ils semblent être très bien avec les images spécifiant cette façon (mines): l'accent de

Définition d'une largeur et la hauteur pour toutes les images permet de rendre plus rapide en éliminant la nécessité de et repeint inutiles remboursements. Lorsque le navigateur affiche la page, il doit être capable de circuler autour d'éléments remplaçables tels que des images. Il peut commencer à rendre une page avant même que les images ne soient téléchargées, à condition de connaître les dimensions pour entourer les éléments non remplaçables. Si aucune dimension n'est spécifiée dans le document contenant, ou si les dimensions spécifiées ne correspondent pas à celles des images réelles, le navigateur nécessitera une refusion et un repeint une fois les images téléchargées. Pour empêcher les reflows, spécifiez la largeur et la hauteur de toutes les images, soit dans la balise HTML <img>, ou CSS.

Answer 2

La différence essentielle entre la largeur et la hauteur définissant dans un attribut (par opposition au CSS) est qu'il devient alors données, pas un paramètre de présentation. Imaginez simplement gérer une feuille de style suivante

img[src='/images/tree.jpeg'] { 
    width: 100px; 
    height: 100px; 
} 

Cela inutilement enchevêtre CSS avec des images. Il limite également la mise en page adaptative, c'est-à-dire que vous ne pouvez plus avoir des images non encore chargées occupant un espace correct lorsqu'une de leurs dimensions est déduite (par exemple width: 100%).

Considérez également les règles CSS telles que object-fit. La confusion sur ce que signifient alors les propriétés de style width et heigth peut survenir.