Spécification des dimensions de l'image pour améliorer les performances du navigateur

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.

Les navigateurs téléchargent les données en parallèle et tentent de commencer le rendu de la page dès que possible.

Si vous ne spécifiez pas la taille, le navigateur n'a aucune idée de la taille de l'image jusqu'à ce que le téléchargement de l'image soit complètement terminé.

Ce délai oblige le navigateur à repeindre ou redistribuer la mise en page, ce qui retarde le temps de chargement de la page.

Plus il y a d'images avec ce problème - plus la page se chargera lentement.

Si vous spécifiez les tailles d'image, en HTML ou CSS, le navigateur peut éviter les repeints et les redistributions de contenu.

Pour cette raison, vous devez toujours spécifier les tailles d'image. Google a quelques conseils à ce sujet.

https://developers.google.com/speed/docs/best-practices/rendering#SpecifyImageDimensions

Pour plus d'informations sur le processus de rendu du navigateur, voir: http://taligarsiel.com/Projects/howbrowserswork1.htm

Je ne sais pas à quel point cela est à jour, mais donne un aperçu du fonctionnement des navigateurs et pourquoi vous voudrez peut-être faire des choses comme ne pas utiliser le CSS en ligne pour remplacer les feuilles de style.

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 widthou heightparce 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.

Assurez-vous de spécifier les dimensions sur l'élément image ou le parent au niveau du bloc Assurez-vous de définir les dimensions sur l'élément lui-même ou sur un parent au niveau du bloc. Si le parent n'est pas au niveau du bloc, les dimensions seront ignorées. Ne définissez pas de dimensions sur un ancêtre qui n'est pas un parent immédiat.

J'imagine que cela ressemblerait à quelque chose comme:

Conception statique .ic {width:500px;height:500px;}

Conception réactive:

@media only screen and (max-width: 40em){.ic{width:1px;height:1px;}} Mobiles
@media only screen and (min-width: 40.063em){.ic{width:1px;height:1px;}} Tablets
@media only screen and (min-width: 40.063em) and (max-width: 64em){.ic{width:1px;height:1px;}} Small Screens
@media only screen and (min-width: 64.063em){.ic{width:1px;height:1px;}} Large Screens

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.

Je 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).

ne signifie pas vraiment que vous devez spécifier la largeur et la hauteur dans le html. Cela signifie que vous devez réserver l'espace approprié et lorsque l'image est chargée, le navigateur n'a pas besoin de redistribuer et de repeindre la page.

En outre, si vous codez en dur les dimensions, cela défait les comportements réactifs. Si votre mise en page n'est pas réactive, c'est correct, mais si vous souhaitez conserver une certaine réactivité, vous pouvez utiliser uniquement CSS pour obtenir les résultats.

La plupart du temps, en utilisant les deux largeurs et max-width:100fera le travail, mais cet article de Smashing Magazine a une technique intéressante: au lieu d'utiliser la largeur maximale: 100%, vous pouvez utiliser The Padding-Bottom Hack :

"Avec la technique, nous définissons la hauteur comme une mesure par rapport à la largeur. Le rembourrage et la marge ont de telles propriétés intrinsèques, et nous pouvons les utiliser pour créer des proportions pour les éléments qui n'ont pas de contenu. Parce que le rembourrage a cette capacité , nous pouvons définir padding-bottom par rapport à la largeur d'un élément. Si nous définissons également la hauteur à 0, nous obtiendrons ce que nous voulons. [...]

L'étape suivante consiste à placer une image à l'intérieur du conteneur et à vous assurer qu'elle remplit le conteneur. Pour ce faire, nous devons positionner l'image absolument à l'intérieur du conteneur, comme ceci: "

.img-container {
    padding-bottom: 56.25%; /* 16:9 ratio */
    height: 0;
    background-color: black;
}

.img-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Le processus se déroule comme ceci:

1. lire le fichier .html
2. à partir de l'en-tête de fichier .html, lisez les fichiers .css, .js (.js doit être APRÈS .css ...)
3. lire img et script depuis la page

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.