Cette page a été traduite par l'API Cloud Translation.

Précharger les images responsives

Barry Pollard

Yoav Weiss

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 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é beaucoup de vos données mobiles, car votre écran ne peut pas utiliser toute cette résolution supplémentaire. Idéalement, le navigateur extrait 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 gaspillage de données et permet de la 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 pour les 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

Navigateurs pris en charge

Source

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 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 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 (ou Command+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.

Panneau "Network" (Réseau) de Chrome DevTools affichant une cascade avec une ressource JPEG qui ne commence à se télécharger qu'après un code JavaScript. — Sans préchargement, les images commencent à se charger une fois que le navigateur a terminé d'exécuter le script. Pour la première image, ce délai n'est pas nécessaire.

Utiliser preload ici permet à l'image de commencer à se charger à l'avance. Elle peut ainsi être prête à s'afficher lorsque le navigateur doit l'afficher.

Panneau "Réseau" des outils pour les développeurs Chrome affichant une cascade avec une ressource JPEG téléchargée en parallèle de certains éléments JavaScript. — Le préchargement de la première image permet de commencer son chargement en même temps que le script.

Pour voir les différences avec 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 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étecte qu'après avoir téléchargé et traité tous les CSS dans le fichier <head> de la page.

Vous pouvez inspecter ce problème sur un exemple de site Web avec une image de fond responsive.

Panneau "Network" (Réseau) des outils pour les développeurs Chrome affichant une cascade avec une ressource JPEG qui ne commence à se télécharger qu'après un CSS. — Dans cet exemple, le téléchargement de l'image ne commence qu'une fois le CSS entièrement téléchargé, ce qui entraîne un temps de latence inutile pour l'affichage de l'image.

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 de fond responsive préchargée dans la démo de préchargement d'arrière-plan responsif.

Panneau "Réseau" des outils pour les développeurs Chrome affichant une cascade avec une ressource JPEG téléchargée en parallèle de certains fichiers CSS. — Ici, l'image et le CSS commencent à se télécharger en même temps, ce qui permet de charger l'image plus rapidement.

Effets pratiques du préchargement d'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 : l'une ne précharge pas les images et l'autre 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).
Dernier héros peint a été amélioré de manière significative, de 1,2 seconde.

Comparaison de la pellicule WebPageTest montrant que les images préchargées s'affichent environ 1,5 seconde plus rapidement. — Les images arrivent beaucoup plus rapidement lorsqu'elles sont préchargées, ce qui améliore considérablement l'expérience utilisateur.

Précharger 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 de toute façon, en particulier lorsque vous utilisez l'option Fetch Priority (Priorité de récupération) pour vous aider à prioriser 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.