Dois-je spécifier des attributs de hauteur et de largeur pour mes IMG en HTML?
Si je connais la hauteur et la largeur d'une image que je vais afficher avec une balise d'image, dois-je inclure les attributs de hauteur et de largeur, ou simplement mettre les informations en CSS? Ou les deux?
Ex.
<img src="profilepic.jpg" height="64" width="64" />
ou
<img src="profilepic.jpg" height="64" width="64" style="height: 64px; width: 64px;" />
ou
<img src="profilepic.jpg" style="height: 64px; width: 64px;" />
Selon Google Page Speed , vous devez toujours définir la largeur et la hauteur dans la balise d'image. Mais, pour valider, vous ne pouvez pas utiliser la balise de style.
En outre, vous devez toujours spécifier la même hauteur et la même largeur que l'image réelle afin que le navigateur ne doive pas y apporter de modifications comme le redimensionnement.
Je suggère de le faire
<img src="..." height="20" width="50">
Modifier: Quelqu'un a suggéré dans les commentaires qu'il serait plus rapide de ne pas ajouter d'attributs. Selon Google (pas qu'ils soient la fin de toutes les connaissances du navigateur):
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 repeindre une fois les images téléchargées. Pour éviter les reflows, spécifiez la largeur et la hauteur de toutes les images, soit dans la balise HTML, soit en CSS. - En savoir plus
Étant donné que, vous pouvez faire les dimensions img en CSS, mais pour valider, vous devrez le faire dans un fichier CSS, pas en ligne.
BTW, Google Page Speed est une série de conseils visant à rendre la page plus rapide.
Vous devez toujours spécifier le height et le width d'une image ne serait-ce que pour aider le navigateur à disposer la page avant même que l'image ne soit téléchargée.
Voir 13.7 Présentation visuelle des images, objets et applets dans la spécification HTML 4.01:
Les attributs de hauteur et de largeur donnent aux agents utilisateurs une idée de la taille d'une image ou d'un objet afin qu'ils puissent y réserver de l'espace et continuer à rendre le document en attendant les données d'image.
Ils sont recommandés et non requis mais vous devez vraiment, vraiment les spécifier ;-)
Assurez-vous également que les dimensions que vous spécifiez correspondent réellement aux dimensions de l'image.
Il n'y a rien de pire que d'attendre le téléchargement d'une page simplement parce que ces 400x300 (!) les images ressemblent en réalité à 4000x3000 à 95% de qualité.
Oui, vous devez spécifier les dimensions, afin que les agents utilisateurs sachent à l'avance la taille avant le chargement complet de l'image, de sorte qu'une mise en page ne pourrait pas sembler cassée si elle repose sur les dimensions de l'image chargée. De plus, si vous comptez sur la propriété de filtre d'IE6 pour insérer des png, vous aurez besoin de ces dimensions.
Cette réponse est maintenant datée et je ne ferais pas la même recommandation que je l'ai fait en 2009 avec les navigateurs modernes.
Peu importe celui que vous utilisez, mais je recommanderais d'en utiliser un seul.
Je recommanderais l'attribut à la solution CSS car il est plus compatible avec les anciens navigateurs et les personnes dont les styles sont désactivés.
En fait, vous n'avez pas besoin de les spécifier. Par conséquent, pour spécification w3c n, vous ne les utilisez que pour remplacer les valeurs par défaut incorporées dans le fichier image et lues par le navigateur. Lorsqu'il est utilisé, l'image originale sera mise à l'échelle aux tailles données, donc les mettre fait un calcul supplémentaire pour le navigateur.
Les attributs de hauteur et de largeur donnent aux agents utilisateurs une idée de la taille d'une image ou d'un objet afin qu'ils puissent y réserver de l'espace et continuer à rendre le document en attendant les données d'image.
<img src="profilepic.jpg" alt="image" />