Précharger les images responsives (imagesrcset, imagesizes)

Une image responsive permet au navigateur de choisir la bonne version selon la taille de l’écran, grâce aux attributs srcset et sizes. Le problème n’est pas le choix de la ressource, mais le moment où il intervient. Quand une image est insérée par JavaScript, posée en arrière-plan CSS ou rendue côté client, le navigateur ne la découvre que tardivement, une fois le script exécuté ou la feuille de style traitée. Ce retard pénalise directement l’affichage du contenu principal.

Le préchargement résout ce point de blocage. Il signale au navigateur, dès le head, qu’une ressource est essentielle et doit être récupérée le plus tôt possible, avant même d’apparaître dans le balisage visible. Comme une image est souvent l’élément le plus grand de la page, donc candidate au Largest Contentful Paint, la précharger correctement améliore le LCP et l’expérience perçue. C’est un levier SEO concret, car les Core Web Vitals participent à l’évaluation de la qualité d’une page.

Le navigateur dispose d’un préchargeur (preload scanner) qui repère très tôt les ressources déclarées dans le HTML initial. Tant qu’une image figure clairement dans le balisage, ce scanner la trouve seul et il vaut mieux le laisser travailler. Le problème surgit quand l’image n’est pas détectable d’emblée.

Deux cas reviennent souvent. Lorsqu’une image est ajoutée dynamiquement par un script (un carrousel par exemple), son chargement ne démarre qu’une fois le script exécuté, ce qui retarde inutilement la première image visible. Lorsqu’il s’agit d’une image de fond CSS, le navigateur ne la découvre qu’après avoir téléchargé et traité l’ensemble du CSS du head, d’où un décalage dans l’affichage. Dans ces situations, le préchargement comble le retard de découverte.

Pour précharger une image classique, dans le prolongement des méthodes pour précharger les ressources critiques, une simple balise link suffit. Pensez à ajouter fetchpriority= »high », car la priorité par défaut d’une image préchargée est basse, ce qui laisse le navigateur favoriser d’abord les ressources bloquant le rendu.

Pour une image responsive, la balise link reprend la même logique que l’élément img, mais via deux attributs dédiés : imagesrcset et imagesizes. Ils sont les équivalents de srcset et sizes au niveau du préchargement. Le navigateur applique alors exactement la même sélection de ressource (largeurs en w et valeur sizes) pour ne télécharger que la version adaptée à l’écran.

L’élément picture permet de servir des visuels différents selon la taille de l’écran (via media) ou selon le format pris en charge (via type), un cran au-dessus du simple choix de taille d’image avec srcset. Le préchargement gère ces cas, mais avec une règle stricte : contrairement à picture, il ne s’arrête pas à la première correspondance.

Pour une sélection par media, vous devez donc traduire vos points d’arrêt en conditions mutuellement exclusives, sinon plusieurs images seront préchargées en même temps. Pour une sélection par format, ne préchargez qu’un seul type, idéalement le plus récent (AVIF par exemple) : il agit en amélioration progressive, les navigateurs compatibles en profitent, les autres ignorent simplement le préchargement.

Le préchargement d’images responsives est largement pris en charge par les navigateurs récents, mais il comporte des limites précises. Les attributs imagesrcset, imagesizes et media ne fonctionnent pas dans les en-têtes HTTP ni dans les Early Hints 103, car la fenêtre d’affichage n’est connue qu’au moment où le document est créé.

Le tableau ci-dessous récapitule les attributs clés de la balise link pour le préchargement d’images et leur rôle exact.