Comprendre le srcset : servir la bonne image à chaque écran

Un visiteur sur smartphone et un visiteur sur écran 4K n'ont pas besoin de recevoir le même fichier image. Pourtant, sans configuration particulière, un site sert souvent la même image, à la même taille, à tout le monde — ce qui gaspille de la bande passante sur mobile pour un gain de netteté invisible sur un petit écran.

Le principe du srcset

L'attribut srcset permet de fournir plusieurs versions d'une même image, à différentes largeurs, et de laisser le navigateur choisir automatiquement la plus adaptée selon la taille d'écran et la densité de pixels du visiteur.

Concrètement, ça ressemble à ceci :

<img srcset="photo-600.webp 600w, photo-1024.webp 1024w, photo-1920.webp 1920w" sizes="100vw" src="photo-1024.webp" alt="...">

Le navigateur regarde la largeur réelle d'affichage de l'image sur l'écran du visiteur, et télécharge automatiquement le fichier le plus proche — jamais plus lourd que nécessaire.

Pourquoi ce n'est pas juste "une optimisation de plus"

Contrairement à la compression ou au changement de format, le srcset s'attaque à un problème différent : ce n'est pas le poids d'un fichier donné qui baisse, c'est le fait d'envoyer un fichier adapté à chaque visiteur plutôt qu'un seul fichier universel, généralement dimensionné pour le plus grand écran possible.

Sur un site avec beaucoup de trafic mobile, c'est souvent là que se cache le plus gros gain de performance disponible, plus encore que la compression elle-même.

La contrainte à connaître : le cadrage

Générer plusieurs tailles d'une image ne suffit pas si le cadrage change d'une taille à l'autre — le visiteur verrait une image différemment recadrée selon son écran, ce qui n'est presque jamais souhaitable. Il faut donc partir d'un cadrage fixe (dimensions exactes, pas juste "largeur maximale") pour que chaque taille générée reste un simple redimensionnement du même cadrage, pas un recadrage différent.

En pratique

Dans MaxDev Pix, le générateur de srcset n'est disponible qu'en mode "Dimensions fixes" pour cette raison précise : c'est ce qui garantit que les 3 tailles générées (par exemple 600w / 1024w / 1920w) montrent exactement le même cadrage. L'outil génère à la fois les fichiers et le code HTML prêt à coller sur votre site.