Si je connais la hauteur et la largeur d'une image que je vais afficher avec une balise image, dois-je inclure les attributs de hauteur et de largeur, ou simplement mettre l'information dans le CSS ? Ou les deux ?
Ex.
<img src="profilepic.jpg" height="64" width="64" />o
<img src="profilepic.jpg" height="64" width="64" style="height: 64px; width: 64px;" />o
<img src="profilepic.jpg" style="height: 64px; width: 64px;" />Según Google Page Speed vous devez toujours définir la largeur et la hauteur dans la balise de l'image. Mais, pour valider, vous ne pouvez pas utiliser la balise style.
En outre, vous devez toujours indiquer la même hauteur et la même largeur que l'image réelle afin que le navigateur n'ait pas à la modifier, par exemple en la redimensionnant.
Je suggère de le faire
<img src="..." height="20" width="50">Editar: Quelqu'un a suggéré dans les commentaires qu'il serait plus rapide de ne pas ajouter d'attributs. Selon Google (qui n'est pas le seul à connaître les navigateurs) :
Si aucune dimension n'est spécifiée dans le document contenant l'image, ou si les dimensions spécifiées ne correspondent pas à celles des images réelles, le navigateur exigera un reflux et un repeint une fois les images téléchargées. Pour éviter les reflux, spécifiez la largeur et la hauteur de toutes les images, soit dans la balise HTML, soit dans le CSS. - Lire la suite
Dans ces conditions, vous pourriez définir les dimensions des images en CSS, mais pour les valider, vous devriez le faire dans un fichier CSS, et non en ligne.
En fait, Google Page Speed est une série de conseils visant à accélérer le rendu de la page.
Vous devez toujours spécifier le height y el width d'une image, ne serait-ce que pour aider le navigateur à mettre la page en page avant même le téléchargement de l'image.
Voir 13.7 Présentation visuelle d'images, d'objets et d'applets dans la spécification HTML 4.01 :
Les attributs hauteur et largeur donnent aux agents utilisateurs une idée de la taille d'une image ou d'un objet afin qu'ils puissent réserver de l'espace pour lui et continuer le document en attendant les données les données de l'image.
Ils sont recommandé y pas nécessaire mais vous devriez vraiment, vraiment les préciser ;-)
Veuillez également vous assurer que les dimensions que vous indiquez correspondent effectivement aux dimensions de l'image.
Il n'y a rien de pire que d'attendre qu'une page soit téléchargée juste parce que ces 400x300 ( !) sont en réalité plutôt des images 4000x3000 à une qualité de 95%.
Oui, vous devez spécifier les dimensions, afin que les agents utilisateurs connaissent à l'avance la taille avant le chargement complet de l'image. Ainsi, une mise en page ne pourrait pas avoir l'air cassée si elle s'appuie sur les dimensions de l'image chargée. En outre, si vous comptez sur la propriété de filtre d'IE6 pour insérer des png, vous devez spécifier les dimensions. sera ont besoin de ces dimensions.
En fait, il n'est pas nécessaire de les préciser. En conséquence spécification w3c n vous les utilisez uniquement pour remplacer les valeurs par défaut qui sont intégrées dans le fichier image et sont lues par le navigateur. Lorsqu'elles sont utilisées, elles mettent à l'échelle l'image originale à des tailles données, de sorte que les mettre en place revient à faire un calcul supplémentaire pour le navigateur.
Les attributs hauteur et largeur donnent aux agents utilisateurs une idée de la taille d'une image ou d'un objet afin qu'ils puissent lui réserver de l'espace et continuer à rendre le document en attendant les données de l'image.
<img src="profilepic.jpg" alt="image" /> Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
