Préchargement d'image réactif

À partir de Chrome 73, le lien rel = "preload" et les images réactives peuvent être combinés pour charger les images plus rapidement.

Cet article me donne l'occasion de discuter de deux de mes choses préférées: les images responsives. y précharge. En tant que personne très impliquée dans le développement des deux fonctionnalités, je suis tellement excitée de les voir travailler ensemble!

Présentation de l'imagerie réactive

Supposons que vous naviguez sur le Web sur un écran de 300 pixels de large et que la page demande une image de 1 500 pixels de large. Cette page a gaspillé une grande partie de vos données cellulaires parce que votre écran ne peut rien faire avec toute cette résolution supplémentaire. Idéalement, le navigateur devrait obtenir une version de l'image qui n'est qu'un petit plus large que la taille de votre écran, disons 325 pixels. Cela garantit une image haute résolution sans gaspiller de données. Et le meilleur de tous, l'image se chargera plus rapidement. Les images réactives permettent aux navigateurs de rechercher différentes ressources d'image sur différents appareils. Si vous n'utilisez pas de CDN d'image, vous devez enregistrer plusieurs dimensions pour chaque image et les spécifier dans le srcset attribut. Les w value indique au navigateur la largeur de chaque version. En fonction de l'appareil, le navigateur peut choisir celui qui convient:

 

< img src = " small.jpg " srcset = " small.jpg 500w, medium.jpg 1000w, large.jpg 1500w " alt = " … " >

 

Aperçu de la précharge

Le préchargement vous permet d'informer le navigateur des ressources critiques que vous souhaitez charger dès que possible, avant qu'elles ne soient détectées dans HTML. Ceci est particulièrement utile pour les ressources qui ne peuvent pas être facilement découvertes, telles que les polices incluses dans les feuilles de style, les images d'arrière-plan ou les ressources chargées à partir d'un script.

 

< link rel = " preload " as = " image " href = " important.png " >

 

Images réactives + préchargement = téléchargements d'images plus rapides

Les images responsives et le préchargement étaient disponibles depuis quelques années, mais en même temps quelque chose manquait: il n'y avait aucun moyen de précharger les images responsives. À partir de Chrome 73, le navigateur peut précharger la bonne variante des images responsives spécifiées dans srcset avant de découvrir le img hashtag!

Selon la structure de votre site, cela pourrait signifier une visualisation des images nettement plus rapide! Nous testons un site qui utilise Javascript pour charger des images réactives. Le préchargement a entraîné un chargement des images 1,2 seconde plus rapide.

imagesrcset y taille d'image

Pour précharger les images responsives, de nouveaux attributs ont été récemment ajoutés à la élément: imagesrcset y taille d'image. Ils sont utilisés avec et correspond au srcset y les tailles syntaxe utilisée dans élément.

Par exemple, si vous souhaitez précharger une image responsive spécifiée avec:

 

< img src = " wolf.jpg " srcset = " wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w " tailles = " 50vw " alt = " Un loup rad " >

 

Vous pouvez le faire en ajoutant ce qui suit à votre HTML :

 

< link rel = " preload " as = " image " href = " wolf.jpg " imagesrcset = " wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w " imagesizes = " 50vw " >

 

Cela démarre une demande en utilisant la même logique de sélection de ressources que srcset y les tailles s'appliquera.

Cas d'utilisation

Précharge d'image réactive injectée dynamiquement

Disons que vous chargez dynamiquement des images héroïques dans le cadre d'un diaporama et que vous savez quelle image s'affichera en premier. Dans ce cas, vous voudrez probablement éviter d'attendre le script avant de charger l'image en question, car cela retarderait le moment où les utilisateurs peuvent la voir.

Vous pouvez inspecter ce problème sur un site Web avec une galerie d'images chargée dynamiquement:

1. Ouvert cet exemple de site Web dans un nouvel onglet.
2. presse Ctrl + Maj + J (ou alors Commande + Option + J sur Mac) pour ouvrir DevTools.
3. Clique sur le Rapporter langue.
4. Dans le Constriction liste déroulante, sélectionnez 3G rapide.
5. Éteins le Désactiver le cache boîte.
6. Recharge la page.

Utilisant précharge Cela aide ici car l'image commence à se charger tôt et est probablement déjà là lorsque le navigateur a besoin de l'afficher.

Pour voir la différence que fait le préchargement, vous pouvez inspecter la même galerie d'images chargée dynamiquement mais avec la première image préchargée en suivant les étapes du premier exemple.

Préchargement des images d'arrière-plan avec un jeu d'images

Si vous avez des images d'arrière-plan différentes pour différentes densités d'écran, vous pouvez les spécifier dans votre CSS avec le série d'images syntaxe. Le navigateur peut alors choisir celui à afficher en fonction du DPR.

 

image de fond : ensemble d' images ( "cat.png" 1x , "cat-2x.png" 2x ) ;

 

Le problème avec les images d'arrière-plan CSS est que le navigateur ne les découvre qu'après avoir téléchargé et traité tout le CSS de la page. , qui peut être beaucoup de CSS ...

Vous pouvez inspecter ce problème sur un exemple de site Web avec image de fond réactive.

Le préchargement d'images réactif offre un moyen simple et sans piratage de charger ces images plus rapidement.

 

< link rel = preload href = cat.png as = image imagesrcset = " cat.png 1x, cat-2x.png 2x " >

 

Vous pouvez inspecter le comportement de l'exemple ci-dessus avec Image d'arrière-plan personnalisable préchargée.

Préchargement d'images réactif en action

Le préchargement de vos images responsives peut les accélérer en théorie, mais que faites-vous en pratique?

Pour répondre, j'ai créé deux copies d'un Boutique de démonstration PWA: celui qui ne précharge pas les imagesy celui qui précharge certains d'entre eux. Étant donné que le site charge paresseusement des images avec JavaScript, il bénéficiera probablement du préchargement de celles qui seront dans la fenêtre initiale.

Cela m'a donné les résultats suivants pour pas de précharge et pour précharge d'image. En regardant les nombres bruts, nous voyons que Start Render est resté le même, l'indice de vitesse s'est légèrement amélioré (273 ms, car les images arrivent plus rapidement, mais elles n'occupent pas une grande partie de la zone de pixels), mais la métrique réelle qui capture la différence est la Dernier héros peint métrique, qui s'est améliorée de 1,2 seconde. 🎉🎉

Bien sûr, rien ne capture la différence visuelle comme une comparaison de pellicule:

Précharge et ?

Si vous connaissez les images réceptives, vous vous demandez peut-être ? «.

Le groupe de travail sur les performances Web parle d'ajouter une précharge équivalente à srcset y les tailles, mais pas le élément, qui répond au cas d'utilisation de la "direction artistique".

Pourquoi ce cas d'utilisation est-il "négligé"?

Bien qu'il y ait un intérêt à résoudre ce cas d'utilisation également, il existe encore un certain nombre de problèmes techniques à résoudre ce qui signifie qu'une solution ici aurait une complexité considérable. En plus de cela, il semble que pour la plupart, le cas d'utilisation puisse être traité aujourd'hui, même si de manière piratée (voir ci-dessous).

Compte tenu de cela, Web Performance WG a décidé d'envoyer srcset d'abord et voir si la demande d'équivalent photo le soutien se fait sentir.

Si vous êtes en condition de pré-charge vous pourrez peut-être utiliser la technique suivante comme solution.

Compte tenu du scénario suivant:

 

< image > < source src = " small_cat.jpg " media = " (max-width: 400px) " > < source src = " medium_cat.jpg " media = " (max-width: 800px) " > < img src = " énorme_cat.jpg " >  image >

 

Les La logique de l'élément (ou logique de sélection de la source d'image, pour être précis), serait de passer en revue la moitié attributs de la éléments dans l'ordre, recherchez le premier qui correspond et utilisez la ressource jointe.

Étant donné que le préchargement réceptif n'a pas de notion d '"ordre" ou de "première correspondance", les points d'arrêt doivent être traduits en quelque chose comme:

 

< link rel = " preload " href = " small_cat.jpg " as = " image " media = " (max-width: 400px) " > < link rel = " preload " href = " medium_cat.jpg " as = " image " media = " (largeur min: 400.1px) et (largeur-max: 800px) " > < link rel = " preload " href = " large_cat.jpg " as = " image " media = " (largeur min: 800.1px ) " >

 

résumé

Le préchargement d'images réactif nous offre de nouvelles possibilités intéressantes pour précharger des images réactives d'une manière qui n'était auparavant possible que par le biais de hacks. C'est un nouvel ajout important à la boîte à outils du développeur soucieux de la vitesse et nous permet de nous assurer que les images importantes que nous voulons montrer à nos utilisateurs le plus tôt possible seront là quand nous en aurons besoin.