Précharger les images responsives

Barry Pollard
Yoav Weiss
Yoav Weiss
X GitHub

Publié le 30 septembre 2019. Dernière mise à jour : 10 juillet 2026

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 correcte à partir d'un srcset avant d'afficher le tag img.

Présentation des images responsives

Browser Support

  • Chrome: 73.
  • Edge: 79.
  • Firefox: 78.
  • Safari: 17.2.

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 avec toute cette résolution supplémentaire. Idéalement, le navigateur récupère une version de l'image 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 de récupérer 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

Browser Support

  • Chrome: 50.
  • Edge: 79.
  • Firefox: 85.
  • Safari: 11.1.

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é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 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" fetchpriority="high">

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 srcset et sizes syntaxe utilisée dans l' <img> é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" sizes="50vw" alt="A rad wolf">

Pour ce faire, ajoutez le code suivant à l'élément <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" fetchpriority="high">

Cela lance une requête à l'aide de la même logique de sélection de ressources que celle utilisée par srcset et sizes.

Cas d'utilisation

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

Précharger des images responsives injectées de manière dynamique

Imaginez que vous chargez des images de héros de manière dynamique dans un diaporama et que vous savez quelle image s'affichera 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 avec une galerie d'images chargées de manière dynamique :

  1. Ouvrez cette démo de diaporama dans un nouvel onglet.
  2. Appuyez sur Control+Shift+J (ou Command+Option+J sur Mac) pour ouvrir DevTools.
  3. Cliquez sur l'onglet Réseau.
  4. Dans la liste déroulante Limitation, sélectionnez 3G rapide.
  5. Décochez la case Désactiver le cache.
  6. Actualisez la page.
Panneau 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 certain 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.

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 a besoin.

Panneau &quot;Réseau&quot; des outils pour les développeurs Chrome montrant 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 apporte, inspectez la même galerie d'images chargées de manière dynamique , mais avec la première image préchargée en suivant les étapes du premier exemple.

Précharger des images de fond à l'aide d'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 celle à afficher en fonction du DPR DPR.

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 code CSS dans l'élément <head> de la page.

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

Panneau 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 certains CSS.
Dans cet exemple, le téléchargement de l'image ne commence que lorsque le code CSS est entièrement téléchargé, ce qui entraîne un décalage inutile dans 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" fetchpriority="high">

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 le code CSS, téléchargent la source correcte. 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 de fond responsive.

Panneau &quot;Réseau&quot; 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 code 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 d'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éficie du préchargement de celles qui apparaissent dans la fenêtre d'affichage initiale.

Cela a donné les résultats suivants pour l'absence de préchargement et pour le préchargement d'images :

Comparaison de la bande de 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échargement et <picture>

Le groupe de travail sur les performances Web discute de l'ajout d'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, 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 media attributs des éléments <source> dans l'ordre, trouve le premier qui correspond et utilise la ressource associée.

Étant donné que le préchargement responsive n'a pas de notion d'"ordre" ni de "première correspondance", vous devez traduire les points d'arrêt en quelque chose comme suit :

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

Préchargement 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 que partiellement compatible avec le préchargement : les navigateurs ne doivent télécharger les préchargements que pour les types compatibles. Vous pouvez donc l'utiliser pour empêcher les navigateurs de précharger les types de mimetypes non compatibles en incluant ceci dans le préchargement :

<link rel="preload" href="image.avif" type="image/avif" as="image" fetchpriority="high">

Toutefois, contrairement à <picture> il ne s'arrête pas au premier type compatible. Ainsi, si plusieurs préchargements sont inclus pour plusieurs types, toutes les images seront préchargées :

Ne faites pas cela : préchargez plusieurs types :

<link rel="preload" href="image.avif" type="image/avif" as="image" fetchpriority="high">
<link rel="preload" href="image.jpg" type="image/jpg" as="image" fetchpriority="high">

Faites plutôt cela : préchargez le type le plus préféré :

<link rel="preload" href="image.avif" type="image/avif" as="image" fetchpriority="high">

Le préchargement du format le plus récent (AVIF dans ce cas) agit comme une amélioration progressive, où les navigateurs compatibles avec ce type en bénéficieront, tandis que les autres navigateurs ne bénéficieront pas du préchargement.

Pour les sites où l'image est rapidement détectable dans le code HTML, nous vous recommandons d'éviter le préchargement et de laisser plutôt le scanner de préchargement récupérer les images à partir des <picture> et <source> éléments. 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, car elle permet de précharger l'image exacte en fonction de la compatibilité du navigateur. Cela élimine également le risque qu'un préchargement devienne obsolète à partir du balisage principal lorsque des images ou des pages changent.

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 meilleure amélioration du LCP sur les sites qui affichent le balisage côté client que sur les sites qui envoient un balisage complet à partir du serveur.