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 la bonne image à partir d'un srcset avant d'afficher la balise img.

Présentation des images responsives

Browser Support

Source

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é une grande partie de vos données mobiles, car votre écran ne peut rien faire de toute cette résolution supplémentaire. Dans l'idéal, le navigateur récupère une version de l'image qui est légèrement 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'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

Browser Support

Source

Le préchargement vous permet d'indiquer au navigateur les ressources essentielles que vous voulez charger le plus rapidement possible, avant qu'elles ne soient découvertes dans le code HTML. Cela s'avère particulièrement utile pour les ressources qui ne sont pas facilement détectables, comme 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">

`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 à la section <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 en utilisant la même logique de sélection de ressources que srcset et sizes.

Cas d'utilisation

Voici quelques cas d'utilisation du préchargement d'images responsives.

Précharger les images responsives insérées de manière dynamique

Imaginez que vous chargez dynamiquement des images de bannières dans 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, sans attendre que le script du diaporama la charge.

Vous pouvez examiner ce problème sur un site Web comportant une galerie d'images chargées de manière dynamique :

Ouvrez cette démonstration de diaporama dans un nouvel onglet.
Appuyez sur Control+Shift+J (ou Command+Option+J sur Mac) pour ouvrir les outils de développement.
Cliquez sur l'onglet Réseau.
Dans la liste déroulante Limitation du débit, sélectionnez 3G rapide.
Décochez la case Désactiver le cache.
Actualisez la page.

Panneau "Network" 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 certain code JavaScript. — Sans préchargement, les images commencent à se charger une fois que le navigateur a terminé d'exécuter le script. Ce délai n'est pas nécessaire pour la première image.

L'utilisation de preload ici permet à l'image de commencer à se charger à l'avance, afin qu'elle puisse être prête à s'afficher lorsque le navigateur en aura besoin.

Panneau "Réseau" des outils de développement Chrome affichant une cascade avec une ressource JPEG téléchargée en parallèle à du code JavaScript. — Le préchargement de la première image lui permet de commencer à se charger en même temps que le script.

Pour voir la différence que le préchargement fait, inspectez la même galerie d'images chargées 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 image-set

Si vous avez différentes images de fond pour différentes densités d'écran, vous pouvez les spécifier dans votre CSS avec 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é tout le CSS dans le <head> de la page.

Vous pouvez examiner ce problème sur un exemple de site Web avec une image d'arrière-plan 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">

En omettant l'attribut href, vous vous assurez que les navigateurs qui ne sont pas compatibles avec imagesrcset sur l'élément <link>, mais qui sont compatibles avec image-set dans 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émonstration de préchargement d'arrière-plan responsive.

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

Effets pratiques du préchargement des images responsives

Le préchargement de vos images responsives peut théoriquement les accélérer, mais qu'en est-il 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 qu'il bénéficiera du préchargement de celles qui apparaissent dans la fenêtre d'affichage initiale.

Voici les résultats obtenus pour no preload et pour image preload :

L'option Démarrer le rendu est restée la même.
L'indice de vitesse s'est légèrement amélioré (273 ms, car les images arrivent plus rapidement et n'occupent pas une grande partie de la zone en pixels).
Le Last Painted Hero s'est amélioré de manière significative, de 1,2 seconde.

Comparaison de la bande-film 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 de la direction artistique.

Il reste encore un certain nombre de problèmes techniques à résoudre pour le préchargement de <picture>, mais en attendant, voici quelques 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> parcourt les attributs media des éléments <source> dans l'ordre, trouve le premier qui correspond et utilise la ressource associée.

Comme le préchargement responsif ne tient pas compte de l'ordre ni de la première correspondance, vous devrez traduire les points d'arrêt en quelque chose comme 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écharger et `type`

L'élément <picture> est également compatible avec la 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 qu'il prend en charge. 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 laisser le scanner de préchargement récupérer les images à partir des éléments <picture> et <source>. Il s'agit d'une bonne pratique, surtout lorsque vous utilisez Fetch Priority 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 Largest Contentful Paint (LCP), leur préchargement peut améliorer le LCP de votre site Web.

Que l'image que vous préchargez soit responsive ou non, les préchargements fonctionnent 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 temps LCP sur les sites qui affichent le balisage côté client que sur ceux qui envoient un balisage complet depuis le serveur.