web-dev-qa-db-fra.com

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 de Google. Mes images sont toutes de la même taille (500 pixels horizontaux sur 300 pixels verticaux). J'ai donc 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 correspond déjà à la taille correcte.

Sous Utilisation du réseau, Spécifier 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. Devrais-je vraiment ajouter des attributs de largeur et de hauteur à mes images, même si elles ont déjà la bonne taille? Cela semble superflu.

htmlimagesperformancepage-speed
10
FastElephant

Les navigateurs téléchargent des données en parallèle et tentent de commencer à rendre la page le plus rapidement possible.

Si vous ne spécifiez pas la taille, le navigateur n'a aucune idée de la taille de l'image avant la fin du téléchargement.

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 en 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 si cela est à jour, mais cela donne un aperçu du fonctionnement des navigateurs et vous explique pourquoi vous souhaitez peut-être faire des choses telles que ne pas utiliser de CSS en ligne pour remplacer les feuilles de style.

10
jeffatrackaid

Responsive Design n'utilise normalement aucun attribut width ou height

Les outils de développement Google sont un guide et vous ne devriez pas avoir à appliquer tout ce que vous lisez sur leur site. En fait, certains éléments sont obsolètes. La majorité des sites Web sensibles n'utilisent pas width ni height car ils souhaitent que les images s'adaptent à la taille de l'écran et utilisent une largeur et une hauteur fixes avec <img>, ce qui nuirait à l'expérience utilisateur et à Google. a déclaré qu'il s'agissait de l'un des facteurs les plus importants.

Contournement CSS

Vous pouvez choisir d'utiliser un élément de niveau bloc ayant la largeur et la hauteur. Personnellement, je n'en utiliserais pas, mais voici ce que Google dit à propos du niveau de bloc.

Veillez à spécifier les dimensions sur l'élément d'image ou le parent de niveau bloc. Veillez à définir les dimensions sur l'élément lui-même ou sur un parent de niveau 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 sensible:

@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 une fois moins que pratique. Donc, si vous utilisez un design réactif, je ne voudrais surtout pas ajouter de la largeur et de la hauteur pour que votre site Web soit fluide, quel que soit l'écran visualisé.

5
Simon Hayter

Je viens de répondre ne question similaire sur Wordpress Stack Exchange. Republiez-le ici (administrateurs/modérateurs: si ceci n'est pas autorisé, dites-moi comment vous pouvez aider).

ne signifie pas vraiment que vous devez spécifier la largeur et la hauteur dans le code HTML. Cela signifie que vous devez réserver l'espace approprié et que, lorsque l'image est chargée, le navigateur ne doit pas rediffuser et repeindre la page.

En outre, si vous codez en dur les dimensions, cela annule le comportement réactif. 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 le CSS pour obtenir les résultats.

La plupart du temps, utiliser à la fois largeur et max-width:100 fera le travail, mais cet article de Smashing Magazine utilise une technique intéressante: au lieu d'utiliser max-width: 100%, vous pouvez utiliser Le hack de fond de rembourrage :

"Avec cette technique, nous définissons la hauteur comme une mesure relative à la largeur. Le rembourrage et la marge ont de telles propriétés intrinsèques, et nous pouvons les utiliser pour créer des rapports de format pour des éléments qui ne contiennent aucun contenu. Parce que le remplissage a cette capacité , nous pouvons définir padding-bottom pour qu'il soit relatif à la largeur d'un élément. Si nous définissons également la hauteur sur 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 absolument positionner l'image à l'intérieur du conteneur, comme suit: "

.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%;
}
2
Celso Bessa

Le processus ressemble à ceci:

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

Ainsi, les étiquettes d'image sont lues "en retard". Cependant, pour calculer la mise en forme de votre page, il est bon d'avoir la taille de l'image (sinon, les navigateurs utilisent une taille "aléatoire" telle que 1x1, 25x25, ... quel que soit le programme programmé par le navigateur.)

Donc, pour éviter d'avoir une page qui a l'air brisée jusqu'à ce que les images soient lues, les attributs largeur et hauteur permettent 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 s'ils ont la même taille.

1
Alexis Wilke