J'ai récemment effectué un audit sur mon site Web à l'aide des outils de développement Google. Mes images sont toutes de la même taille (500 pixels horizontaux par 300 pixels verticaux), donc j'ai pensé qu'il serait préférable de laisser de côté les attributs de taille d'image car il ne serait pas nécessaire de calculer une taille d'image alors qu'elle est déjà à la bonne taille.
Sous Utilisation du réseau, spécifiez les dimensions de l'image. Je vois ce qui suit
A width and height should be specified for all images in order to speed up
page display. The following image(s) are missing a width and/or height:
Maintenant, je suis confus. Dois-je vraiment ajouter des attributs de largeur et de hauteur à mes images, même si elles sont déjà à la bonne taille? Cela semble redondant.
la source
Le Responsive Design n'utilise normalement aucun attribut de largeur ou de hauteur
Google Development Tools est un guide et vous ne devriez pas avoir besoin d'appliquer tout ce que vous lisez sur leur site, en fait, certains éléments sont obsolètes. La majorité des sites Web réactifs n'utilisent pas
width
ouheight
parce qu'ils souhaitent que les images s'adaptent à la taille de l'écran et en utilisant une largeur et une hauteur fixes<img>
qui atténueraient l'expérience utilisateur et Google a déclaré que c'était l'un des facteurs les plus importants.Solution de contournement CSS
Vous pouvez choisir d'utiliser un élément de niveau bloc qui a la largeur et la hauteur, personnellement je n'en utiliserais pas mais voici ce que Google dit sur le niveau de bloc.
J'imagine que cela ressemblerait à quelque chose comme:
Conception statique
.ic {width:500px;height:500px;}
Conception réactive:
Ensuite, vous devrez utiliser JavaScript ou une autre solution pour détecter le point de vue et servir 4 versions différentes de l'image, ce qui est encore moins pratique. Donc, si vous utilisez un design réactif, j'irais en toute sécurité et je ne prendrais pas la peine d'ajouter de la largeur et de la hauteur pour que votre site Web soit fluide, quel que soit l'écran qui le visualise.
la source
max-width:100%;
dans le CSS lorsque vous utilisez une conception réactive. L'utilisation de la hauteur et de la largeur désactiverait la mise à l'échelle et la réduction à l'échelle du fluideJe viens de répondre à une question similaire sur Wordpress Stack Exchange. Republiez-le ici (administrateurs / modérateurs: si cela n'est pas autorisé, faites-moi savoir la bonne façon d'aider).
la source
Le processus se déroule comme ceci:
Ainsi, les balises d'image sont lues "en retard". Cependant pour calculer la mise en forme de votre page, avoir la taille de l'image est une bonne chose (sinon les navigateurs utilisent une taille "aléatoire" comme 1x1, 25x25, ... tout ce que le navigateur a programmé.)
Donc, pour éviter d'avoir une page qui semble cassée jusqu'à ce que les images soient lues, mettre les attributs largeur et hauteur permet au navigateur de calculer immédiatement la mise en page appropriée. C'est pourquoi c'est une bonne idée de les avoir là-bas, même si ce sont les mêmes tailles.
la source