Images responsive : srcset, tailles et DPR pour ne servir que le nécessaire

Un même site est consulté sur un téléphone de 400 pixels de large comme sur un grand écran de bureau. Servir la même image à tous, c'est forcément gaspiller pour les uns ou dégrader pour les autres. Les images responsive résolvent ce dilemme en fournissant à chaque appareil la version qui lui convient.

L'attribut srcset permet de déclarer plusieurs versions d'une même image, à différentes largeurs. Le navigateur choisit alors tout seul la plus adaptée à la taille d'affichage et à l'écran. Concrètement, un mobile télécharge une petite image et un grand écran une plus grande — chacun ne reçoit que ce dont il a besoin.

Le srcset seul ne suffit pas : il faut indiquer au navigateur la largeur à laquelle l'image sera affichée selon la mise en page, via l'attribut sizes. Sans lui, le navigateur suppose une largeur par défaut et peut choisir une image trop grande. Le duo srcset et sizes est la base d'une image réellement responsive.

Les écrans modernes affichent plusieurs pixels physiques pour un pixel logique : c'est le Device Pixel Ratio. Pour rester nette sur un écran de DPR 2, une image affichée en 400 pixels doit en réalité en contenir 800. Il faut donc prévoir des versions plus grandes pour ces écrans, sans pour autant les imposer aux écrans classiques.

Faire du responsive impose de disposer de plusieurs tailles de chaque image : 400, 800, 1200 pixels, et davantage pour la haute densité. Générer et stocker toutes ces variantes à la main, pour chaque visuel du site, est irréaliste et se périme dès qu'un design évolue.

La solution est de générer les variantes à la demande. Avec cloudphoto, chaque largeur correspond à une simple URL paramétrée : il suffit de lister ces URL dans le srcset pour couvrir tous les écrans et tous les DPR. Le service produit chaque taille à la volée, la compresse, la sert dans le format le plus adapté au navigateur et la met en cache un mois sur son CDN mondial. Vous décrivez les tailles voulues, cloudphoto fabrique et distribue le reste — sans jamais stocker une seule variante vous-même.