Comment obtenir les chargements d'images de navigateur les plus rapides

L'utilisation de l' élément Picture permet au navigateur de sélectionner une seule image optimale à télécharger et à afficher parmi une liste qui peut être composée de différents types et tailles de fichiers. La large prise en charge disponible pour l'élément d'image nous permet de construire facilement des pages d'affichage d'images réactives indépendantes du navigateur

L'exemple spécifique présenté ici est une bande dessinée Web qui est assez gourmande en images. L'exemple utilise l'élément image pour fournir une sélection parmi trois types de fichiers courants, à savoir les formats d'image AVIF , WEBP et JPG . Chacun de ces types de fichiers est présenté dans une gamme de cinq dimensions, offrant ainsi au navigateur le choix parmi quinze images distinctes. Le navigateur sélectionnera la première entrée dans la liste d'images qui satisfait ses déterminations d'acceptabilité.

Cet écran affiche le code de l'élément d'image <image> pour l'un des exemples d'images de démonstration. Dans notre démo, chaque élément d'image est suivi d'un séparateur de ligne vierge, comme illustré ici.

À l'intérieur de l'élément image se trouve une liste d'éléments source dont chacun reflète un choix possible d'une image à sélectionner par le navigateur. L'élément source est un élément vide , c'est-à-dire qu'il n'a pas de balise fermante, il n'y a pas de balise </source>. Au lieu de cela, l'élément source agit davantage pour fournir un lien vers une ressource identifiée par le contenu de l'attribut srcset , un nom de fichier image.

Dans notre exemple, chaque élément source possède également deux attributs supplémentaires. Un attribut est étiqueté média et son contenu représente une requête média pour les dimensions de la fenêtre d'affichage les plus adaptées à l'image spécifiée par srcset . Le deuxième attribut est étiqueté type et son contenu représente le type MIME de l'image srcset . Si un navigateur ne prend pas en charge un type MIME particulier, cet élément source sera ignoré. Par exemple, à l'heure actuelle, le navigateur Microsoft Edge ne prend pas en charge le type MIME AVIF et ce navigateur ignore simplement les choix de fichiers AVIF.

La dernière entrée dans le contenu de l'élément image est un élément img désigné nominalement comme élément de secours si aucune des images source répertoriées n'est acceptable. Outre le pointeur d'attribut src vers le fichier image, cet élément img possède un attribut alt pour le texte alternatif de l'image et un attribut tabindex qui permet à un utilisateur de naviguer facilement entre les images à l'aide de la touche TAB .

En ce qui concerne les nombres magiques qui ont été choisis pour les tailles, j'ai initialement créé 3 tailles d'image pour les points d'arrêt de largeur. Cela a assez bien fonctionné pour inciter l'ajout de deux autres tailles de srcset et un réajustement des points d'arrêt et des tailles pour obtenir plus de granularité. Ces valeurs sont basées sur les choix de point d'arrêt Bootstrap.

• noms des points d'arrêt X- Petit Petit Moyen Grand X- Grand XX- Grand
• points d'arrêt <576px ≥576px ≥768px ≥992px ≥1200px ≥1400px
• conteneur 100% 540px 720px 960px 1140px 1320px
• tailles d'image 576px 768px 992px 1200px 1400px

Mais l'écran de débogage de Chrome du code HTML chargé montre certaines différences entre le code source de l'élément img illustré ci-dessus et ce que le navigateur obtient, comme indiqué ici.

Lorsque le navigateur analyse la liste des sources et en sélectionne une qu'il juge préférable, il attribue cette valeur srcset à la variable this.currentSrc , comme indiqué dans cette capture de débogage.

Notez que cette image est celle que le navigateur a choisie parmi la liste proposée, c'est celle que le navigateur pense le mieux. Étant donné que l'image a une dimension fixe pour couvrir une gamme de tailles de fenêtres, il est probable que l'image ne soit pas parfaitement ajustée et certains ajustements pourraient être bénéfiques. L'exemple de démonstration utilise JavaScript pour mettre à l'échelle l'image choisie par le navigateur aux dimensions de la fenêtre d'affichage et ces valeurs, c'est-à-dire les dimensions de l'image mises à l'échelle aux dimensions de la fenêtre d'affichage, sont enregistrées comme indiqué ici. Il y a d'autres utilisations que nous obtenons du JavaScript

Sur cet ordinateur de bureau, le débogueur Chrome indique que la bande dessinée de démonstration, 42 images, consomme 2,5 Mo de ressources avec 56 requêtes et 2,1 Mo transférés, et se termine en 1,22 s. Vous pouvez voir la bande dessinée de démonstration sur Hyenas2 . Gardez un œil sur mes dépôts GitHub pour une goutte de la base de code de l'application qui a généré la bande dessinée. Et vous pouvez trouver plus de bandes dessinées sur ma page de bandes dessinées.

Comme toujours, les commentaires, critiques et suggestions sont les bienvenus