Vous pouvez précharger les images responsives, ce qui accélère considérablement le chargement de vos images en aidant le navigateur à identifier la bonne image à partir d'un élément srcset avant d'afficher la balise img.
Présentation des images responsives
Navigateurs pris en charge
- 73
- 79
- 78
- 17.2
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 mobiles, car votre écran ne peut rien faire avec cette résolution supplémentaire. Idéalement, le navigateur récupérerait une version de l'image un peu plus large que la taille de votre écran, par exemple 325 pixels. Cela garantit une image haute résolution sans gaspiller de données et permet à l'image de se charger plus rapidement.
Les images responsives permettent aux navigateurs d'extraire différentes ressources d'image pour différents appareils. Si vous n'utilisez pas de CDN d'images, enregistrez plusieurs dimensions pour chaque image et spécifiez-les dans l'attribut srcset. La valeur w indique au navigateur la largeur de chaque version, afin qu'il puisse choisir la version appropriée pour n'importe quel appareil:
<img src="small.jpg" srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w" alt="…">
Présentation du préchargement
Le préchargement vous permet d'indiquer au navigateur les ressources critiques que vous souhaitez charger le plus tôt possible, avant qu'elles ne soient découvertes en HTML. Cela est particulièrement utile pour les ressources difficilement visibles, telles que les polices incluses dans les feuilles de style, les images de fond ou les ressources chargées à partir d'un script.
<link rel="preload" as="image" href="important.png">
imagesrcset et imagesizes
L'élément <link> utilise les attributs imagesrcset et imagesizes pour précharger les images responsives. Utilisez-les avec <link rel="preload">, avec la syntaxe srcset et sizes utilisée dans l'élément <img>.
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" sizes="50vw" alt="A rad wolf">
Pour ce faire, ajoutez ce qui suit au <head> de votre code HTML:
<link rel="preload" as="image" href="wolf.jpg" imagesrcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w" imagesizes="50vw">
Une requête est alors lancée à l'aide de la même logique de sélection de ressources que srcset et sizes.
Cas d'utilisation
Vous trouverez ci-dessous quelques cas d'utilisation du préchargement des images responsives.
Précharger les images responsives injectées de manière dynamique
Imaginez que vous chargez dynamiquement des images de héros dans le cadre d'un diaporama et que vous savez quelle image sera affichée en premier. Dans ce cas, vous souhaitez probablement afficher cette image dès que possible et ne pas attendre que le script du diaporama la charge.
Vous pouvez inspecter ce problème sur un site Web à l'aide d'une galerie d'images chargée dynamiquement:
- Ouvrez cette démonstration de diaporama dans un nouvel onglet.
- Appuyez sur
Control+Shift+J(ouCommand+Option+Jsur Mac) pour ouvrir les outils de développement. - Cliquez sur l'onglet Réseau.
- Dans la liste déroulante Limitation, sélectionnez 3G rapide.
- Décochez la case Désactiver le cache.
- Actualisez la page.
L'utilisation de preload ici permet de lancer le chargement de l'image à l'avance, afin qu'elle puisse être prête à s'afficher lorsque le navigateur doit l'afficher.
Pour voir la différence entre le préchargement, inspectez 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écharger les images de fond à l'aide de l'ensemble d'images
Si vous utilisez des images de fond différentes pour différentes densités d'écran, vous pouvez les spécifier dans votre CSS à l'aide de la syntaxe image-set. Le navigateur peut ensuite choisir celle à afficher en fonction de la DPR de l'écran.
background-image: image-set( "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étecte qu'après avoir téléchargé et traité l'ensemble du CSS dans le <head> de la page.
Vous pouvez inspecter ce problème sur un exemple de site Web avec une image de fond responsive.
Le préchargement des images responsives vous permet de les charger plus rapidement.
<link rel="preload" as="image" imagesrcset="cat.png 1x, cat-2x.png 2x">
En omettant l'attribut href, vous pouvez vous assurer que les navigateurs qui ne sont pas compatibles avec imagesrcset dans l'élément <link>, mais qui acceptent image-set dans CSS, téléchargent la source appropriée. Toutefois, dans ce cas, elles ne bénéficieront pas du préchargement.
Vous pouvez inspecter le comportement de l'exemple précédent avec une image de fond responsive préchargée dans la démonstration du préchargement en arrière-plan responsif.
Effets pratiques du préchargement d'images responsives
Le préchargement de vos images responsives peut en théorie les accélérer, mais que fait-il dans la pratique ?
Pour répondre, j'ai créé deux copies d'un atelier de PWA de démonstration : l'un qui ne précharge pas les images et l'autre qui en précharge certaines. Étant donné que le site charge les images à l'aide de JavaScript, il est probable que celles qui apparaissent dans la fenêtre d'affichage initiale aient été bénéfiques.
Cela a produit les résultats suivants pour sans préchargement et pour préchargement d'image:
- L'option Start Render (Démarrer le rendu) reste la même.
- L'indice de vitesse s'est légèrement amélioré (273 ms, car les images arrivent plus rapidement n'occupent pas une grande partie de la zone de pixels).
- Amélioration significative de Last Painted Hero de 1, 2 seconde.
Préchargement et <picture>
Le groupe de travail sur les performances Web envisage d'ajouter un équivalent de préchargement pour srcset et sizes, mais pas l'élément <picture>, qui gère le cas d'utilisation "sens artistique".
Un certain nombre de problèmes techniques doivent être résolus pour le préchargement de <picture>. En attendant, il existe des solutions de contournement:
<picture>
<source srcset="small_cat.jpg" media="(max-width: 400px)">
<source srcset="medium_cat.jpg" media="(max-width: 800px)">
<img src="large_cat.jpg">
</picture>
La logique de sélection de la source d'image de l'élément <picture> passe en revue les attributs media des éléments <source> dans l'ordre, trouve le premier qui correspond et utilise la ressource associée.
Étant donné que le préchargement responsif n'a pas de notion de "ordre" ni de "première correspondance", vous devez convertir les points d'arrêt en quelque chose comme ceci:
<link rel="preload" href="small_cat.jpg" as="image" media="(max-width: 400px)">
<link rel="preload" href="medium_cat.jpg" as="image" media="(min-width: 400.1px) and (max-width: 800px)">
<link rel="preload" href="large_cat.jpg" as="image" media="(min-width: 800.1px)">
Préchargement et type
L'élément <picture> accepte également la correspondance au niveau du premier type, ce qui vous permet de fournir différents formats d'image afin que le navigateur puisse choisir le premier format d'image accepté. Ce cas d'utilisation n'est pas compatible avec le préchargement.
Pour les sites utilisant la correspondance de type, nous vous recommandons d'éviter le préchargement et de faire en sorte que l'outil d'analyse de préchargement récupère les images à partir des éléments <picture> et <source>. Il s'agit néanmoins d'une bonne pratique, en particulier si vous utilisez des indicateurs de priorité pour donner la priorité à l'image appropriée.
Effets sur le LCP (Largest Contentful Paint)
Étant donné que les images peuvent être des candidatures LCP (Largest Contentful Paint), leur préchargement peut améliorer le LCP de votre site Web.
Que l'image que vous préchargez soit responsive ou non, le préchargement fonctionne mieux lorsque la ressource d'image n'est pas visible dans la charge utile du balisage initial. Vous obtiendrez également davantage d'améliorations du LCP sur les sites qui affichent le balisage côté client que sur ceux qui envoient un balisage complet à partir du serveur.