Choisir la bonne taille d’image avec srcset

Une page web mobile typique pèse plus de 2,6 Mo, dont les deux tiers sont des images. Le potentiel d’optimisation est donc énorme. La règle de base est simple : ne jamais enregistrer une image plus grande que sa taille d’affichage. Deux visuels visuellement identiques peuvent avoir un poids de fichier dix fois différent selon leurs dimensions d’enregistrement.

Le problème, c’est que dans un monde multi-appareils, une image n’est pas toujours affichée à taille fixe. Largeurs en pourcentage, mises en page responsives, écrans à forte densité de pixels : la même image peut s’afficher à des tailles très variées. L’attribut srcset répond à ce défi et améliore directement la vitesse, donc l’expérience et le SEO ; il s’inscrit dans une démarche plus large pour optimiser ses images.

Idéalement, on voudrait fournir chaque image en plusieurs tailles et laisser le navigateur choisir la mieux adaptée. Mais il existe un paradoxe : le navigateur devrait prendre la plus petite image possible, sans pouvoir connaître la largeur d’un fichier sans le télécharger d’abord.

C’est précisément le rôle de srcset. Vous enregistrez l’image en plusieurs tailles, puis vous indiquez au navigateur la largeur de chaque version avec un descripteur w. Le navigateur peut alors choisir le plus petit fichier suffisant selon l’écran et la fenêtre, sans téléchargement de vérification, ce qui contribue à réduire le poids des images.

Sans information complémentaire, le navigateur suppose que l’image occupe toute la largeur de la fenêtre quand il choisit dans le srcset. L’attribut sizes corrige cela en décrivant la largeur d’affichage réelle de l’image. Le navigateur peut ainsi sélectionner le plus petit fichier adapté avant même de calculer la mise en page.

Dans l’exemple ci-dessous, sizes= »50vw » indique que l’image s’affichera à 50 % de la largeur de la fenêtre. Point important à retenir : ni srcset ni sizes ne définissent la taille d’affichage à l’écran. Ils informent le navigateur, mais c’est toujours le CSS qui contrôle le rendu final.

Utiliser srcset suppose de disposer de plusieurs tailles par image. Pour quelques visuels ponctuels comme une image héros, vous pouvez les enregistrer à la main. Pour de gros volumes (catalogues, photos produits), il faut automatiser, par exemple en pensant à précharger les images responsives critiques. Le tableau ci-dessous résume les approches et les cas où chacune est pertinente.