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

Précharger les images responsives

Barry Pollard

Yoav Weiss

Vous pouvez précharger les images responsives, ce qui permet à vos images de se charger beaucoup plus rapidement 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

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

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 gaspille une grande partie de votre contenu mobile des données parce que votre écran ne peut rien faire avec toute cette résolution supplémentaire. Dans l'idéal, le navigateur récupérerait une version de l'image qui ne représente qu'un petit plus large que la taille de votre écran, par exemple 325 pixels. Cela garantit haute résolution sans gaspiller de données, et l'image se charge plus rapidement.

Images responsives permettent aux navigateurs d'extraire différentes ressources d'image pour différents appareils. Si vous ne Utilisez un CDN image, enregistrez plusieurs dimensions pour chaque 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

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

Source

Le préchargement permet d'indiquer au navigateur les ressources critiques à charger le plus rapidement possible, avant qu'elles ne soient découvert en HTML. Ceci est particulièrement utile pour les ressources qui ne sont pas facilement comme les polices incluses dans les feuilles de style, les images de fond 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 en parallèle <link rel="preload">, avec la syntaxe srcset et sizes utilisée dans le <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 fichier HTML <head>:

<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 utilisent.

Cas d'utilisation

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

Précharger les images responsives injectées dynamiquement

Imaginez que vous chargez dynamiquement des images principales dans le cadre d'un diaporama et que vous quelle image s'affichera en premier. Dans ce cas, vous voulez probablement afficher cette image dès que possible, sans attendre que le script du diaporama les charger.

Vous pouvez inspecter ce problème sur un site Web doté d'une galerie d'images chargée dynamiquement:

Ouvrez ce diaporama de démonstration. 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, sélectionnez 3G rapide.
Décochez la case Disable cache (Désactiver le cache).
Actualisez la page.

Panneau Chrome DevTools Network affichant une cascade avec une ressource JPEG qui ne commence à télécharger qu'après un certain nombre de JavaScript. — Sans préchargement, le chargement des images commence une fois l'exécution du script terminée par le navigateur. 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. prêt à s'afficher quand le navigateur doit l'afficher.

Panneau Chrome DevTools Network affichant une cascade d'annonces avec une ressource JPEG téléchargée en parallèle de JavaScript. — Le préchargement de la première image lui permet de commencer à se charger en même temps que le script.

Pour voir les différences avec le préchargement, inspectez le même fichier galerie d'images, mais la première image étant préchargée en suivant les étapes du premier exemple.

Précharger les images de fond à l'aide de la balise image-set

Si vous utilisez différentes images de fond pour différentes densités d'écran, vous pouvez spécifiez-les dans votre CSS avec la syntaxe image-set. Le navigateur peut alors choisir celle à afficher en fonction 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 les détecte qu'après avoir téléchargé et traité tous les CSS dans le <head> de la page.

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

Panneau Chrome DevTools Network affichant une cascade avec une ressource JPEG qui ne commence à télécharger qu'après un certain nombre de CSS. — Dans cet exemple, le téléchargement de l'image ne démarre pas tant que le fichier CSS n'est pas entièrement téléchargé, ce qui entraîne un retard inutile dans l'affichage de l'image.

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 vous assurez que les navigateurs qui n'utilisent pas accepte imagesrcset sur l'élément <link>, mais accepte image-set dans Le CSS télécharge 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 requête image de fond dans la démonstration du préchargement responsif en arrière-plan.

Panneau Chrome DevTools Network affichant une cascade avec une ressource JPEG téléchargée en parallèle avec un CSS. — Ici, le téléchargement de l'image et du CSS commence 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 les accélérer en théorie, mais qu'est-ce que cela dans la pratique ?

Pour répondre à la question, j'ai créé deux exemplaires d'une boutique de PWA de démonstration: qui ne précharge pas les images, et un qui précharge certaines d'entre elles. Étant donné que le site charge les images de façon différée à l'aide de JavaScript, il est susceptible de bénéficier en préchargeant celles qui apparaissent dans la fenêtre d'affichage initiale.

Cela a produit les résultats suivants pour sans préchargement Pour le préchargement de l'image:

Démarrer le rendu est resté le même.
Indice de vitesse s'est légèrement améliorée (273 ms, car les images arrivent plus vite ne prennent pas beaucoup de place de la zone de pixels).
Héros Last Painted s'est nettement améliorée, 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 Web Performance Working Group envisage d'ajouter un équivalent de préchargement pour srcset et sizes, mais pas <picture> , qui gère la "direction artistique" de ce cas d'utilisation.

Il reste un certain nombre de problèmes techniques à résoudre pour le préchargement de <picture>. En attendant, il existe des solutions:

<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> s'applique à media des éléments <source> dans l'ordre, trouve le premier qui correspond et utilise la ressource associée.

Comme le préchargement responsif n'a pas la notion d'"ordre", ou "première correspondance", vous devez traduire les points d'arrêt 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> prend également en charge la mise en correspondance sur le premier élément type, pour vous permettre fournissent 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 qui utilisent la correspondance de type, nous vous recommandons d'éviter le préchargement l'analyseur de préchargement récupère les images <picture> et <source> à la place. C'est de toute façon une bonne pratique, en particulier lorsque vous utilisez l'option Fetch Priority (Récupération de priorité) pour l'image appropriée.

Effets sur le Largest Contentful Paint (LCP)

Étant donné que les images peuvent être des candidatures LCP (Largest Contentful Paint), 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 est plus efficace lorsque la ressource image n'est pas visible dans la charge utile de balisage initiale. Vous bénéficierez également d'une amélioration du LCP plus importante pour les sites qui affichent le balisage sur le client que sur les sites qui envoient un balisage complet à partir du serveur.