Vous pouvez précharger des images responsives, ce qui peut accélérer considérablement le chargement de vos images en aidant le navigateur à identifier l'image appropriée à partir d'un srcset
avant d'afficher la balise img
.
Présentation des images responsives
Navigateurs pris en charge
Supposons que vous naviguiez 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é beaucoup de vos données mobiles, car votre écran ne peut pas utiliser toute cette résolution supplémentaire. Idéalement, le navigateur devrait récupérer une version de l'image qui est un peu plus large que la taille de votre écran, par exemple 325 pixels. Cela garantit une image haute résolution sans gaspillage de données et permet de la charger plus rapidement.
Les images responsives permettent aux navigateurs d'extraire différentes ressources d'images 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 essentielles que vous souhaitez charger le plus rapidement possible, avant qu'elles ne soient détectées dans le code HTML. Cela est particulièrement utile pour les ressources qui ne sont pas facilement détectables, telles que les polices incluses dans des 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 des 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 les éléments suivants 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">
Cela lance une requête à l'aide de la même logique de sélection des ressources que srcset
et sizes
.
Cas d'utilisation
Voici quelques cas d'utilisation du préchargement d'images responsives.
Précharger des images responsives injectées dynamiquement
Imaginez que vous chargez dynamiquement des images hero 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 non attendre que le script de diaporama la charge.
Vous pouvez inspecter ce problème sur un site Web contenant une galerie d'images chargée dynamiquement:
- Ouvrez cette démo de diaporama dans un nouvel onglet.
- Appuyez sur
Control+Shift+J
(ouCommand+Option+J
sur Mac) pour ouvrir DevTools. - Cliquez sur l'onglet Réseau.
- Dans la liste déroulante Limitation, sélectionnez 3G rapide.
- Décochez la case Disable cache (Désactiver le cache).
- Actualisez la page.
L'utilisation de preload
permet de commencer à charger l'image à l'avance afin qu'elle soit prête à être affichée lorsque le navigateur en a besoin.
Pour voir la différence que le préchargement fait, inspectez la même galerie d'images chargée dynamiquement, mais avec la première image préchargée en suivant la procédure du premier exemple.
Précharger des images de fond à l'aide de l'élément image-set
Si vous avez 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 celui à afficher en fonction du DPR de l'écran.
background-image: image-set( "cat.png" 1x, "cat-2x.png" 2x);
Le problème avec les images de fond CSS est que le navigateur ne les découvre qu'après avoir téléchargé et traité tous les fichiers 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 d'images responsives vous permet de charger ces images plus rapidement.
<link rel="preload" as="image" imagesrcset="cat.png 1x, cat-2x.png 2x">
Omettre l'attribut href
vous permet de vous assurer que les navigateurs qui ne sont pas compatibles avec imagesrcset
sur l'élément <link>
, mais qui sont compatibles avec image-set
en CSS, téléchargent la source appropriée. Toutefois, ils ne bénéficieront pas du préchargement dans ce cas.
Vous pouvez inspecter le comportement de l'exemple précédent avec une image d'arrière-plan responsive préchargée dans la démo de préchargement d'arrière-plan responsif.
Effets pratiques du préchargement des images responsives
En théorie, le préchargement de vos images responsives peut les accélérer, mais qu'est-ce que cela implique en pratique ?
Pour répondre à cette question, j'ai créé deux copies d'une boutique PWA de démonstration : une qui ne précharge pas les images et une qui en précharge certaines. Étant donné que le site charge les images de manière différée à l'aide de JavaScript, il est probable que le préchargement de celles qui apparaissent dans la fenêtre d'affichage initiale soit bénéfique.
Les résultats suivants ont été obtenus pour pas de préchargement et pour le préchargement d'images:
- Début du rendu est resté inchangé.
- L'indice de vitesse s'est légèrement amélioré (273 ms, car les images arrivent plus rapidement et ne prennent pas une grande partie de la zone de pixels).
- Last Painted Hero (Dernier héros peint) a été amélioré de manière significative, 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 pour l'élément <picture>
, qui gère le cas d'utilisation "direction artistique".
Il reste encore un certain nombre de problèmes techniques à résoudre pour le préchargement de <picture>
, mais 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>
examine 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 aucune notion d'"ordre" ni de "première correspondance", vous devrez traduire les points d'arrêt en quelque chose comme ce qui suit:
<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 mise en correspondance sur le premier type
, ce qui vous permet de fournir différents formats d'image afin que le navigateur puisse choisir le premier format d'image compatible. Ce cas d'utilisation n'est pas compatible avec le préchargement.
Pour les sites qui utilisent la mise en correspondance de type, nous vous recommandons d'éviter le préchargement et de laisser le lecteur de précharge récupérer les images des éléments <picture>
et <source>
à la place. Il s'agit d'une bonne pratique, en particulier lorsque vous utilisez la priorité de récupération pour vous aider à hiérarchiser l'image appropriée.
Effets sur le Largest Contentful Paint (LCP)
Étant donné que les images peuvent être des candidats au LCP (Largest Contentful Paint), les précharger 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 détectable dans la charge utile de balisage initiale. Vous obtiendrez également une amélioration plus importante du LCP sur les sites qui affichent le balisage côté client que sur les sites qui envoient un balisage complet à partir du serveur.