Produisez srcset et sizes pour une image

Les intégrateurs l’emploient lorsqu’une image doit rester nette sur plusieurs écrans sans faire télécharger un fichier inutilement lourd.

Produisez srcset et sizes pour une image. Vos données restent locales et le résultat se vérifie d’un coup d’œil avant réutilisation.

Mode d’emploi

Indiquez le nom du fichier image, par exemple photo.jpg.
Saisissez la largeur maximale affichée en pixels.
Lancez la génération pour obtenir les attributs srcset et sizes.
Copiez le code produit dans votre balise image.

Exemple

Un intégrateur prépare une bannière qui doit rester nette sur téléphone et sur grand écran. Il indique photo.jpg et une largeur maximale de 1200 pixels, puis génère le code. Il colle ensuite les attributs dans son modèle pour laisser le navigateur choisir. Il prépare aussi les fichiers aux largeurs recommandées par le résultat.

Entrée

photo.jpg
1200

Résultat

<img src="photo-1200w.jpg"
     srcset="photo-320w.jpg 320w, photo-480w.jpg 480w, photo-640w.jpg 640w, photo-768w.jpg 768w, photo-1024w.jpg 1024w, photo-1200w.jpg 1200w, photo-1280w.jpg 1280w, photo-1600w.jpg 1600w, photo-1920w.jpg 1920w"
     sizes="(max-width: 1200px) 100vw, 1200px"
     width="1200" height="AJOUTEZ_LA"
     alt="AJOUTEZ_LE" loading="lazy" decoding="async">

9 largeurs a produire :
  photo-320w.jpg
  photo-480w.jpg
  photo-640w.jpg
  photo-768w.jpg
  photo-1024w.jpg
  photo-1200w.jpg
  photo-1280w.jpg
  photo-1600w.jpg
  photo-1920w.jpg

width et height restent OBLIGATOIRES avec srcset : sans eux le navigateur ne reserve pas la place et la page saute au chargement. Et loading="lazy" ne doit PAS etre pose sur l image du haut de page.

Limites et formats

L’outil produit du code pour une seule image, il ne redimensionne pas les fichiers.
Les variantes d’image doivent exister aux largeurs indiquées dans le résultat.
Le choix final dépend aussi du navigateur et de la densité d’écran.
Vérifiez les chemins et les noms de fichiers avant de publier le balisage.
Le code généré ne remplace pas un contrôle visuel sur plusieurs appareils.

Où le traitement a lieu

Les informations saisies sont traitées dans votre navigateur pour composer le code responsive. Aucun fichier image n’est téléversé et aucun élément n’est envoyé ailleurs. Le résultat peut être copié immédiatement.

Questions fréquentes

L’outil redimensionne-t-il mon image ?

Non, il ne modifie pas le fichier image. Il génère seulement les attributs srcset et sizes à partir du nom et de la largeur indiqués. Vous devez préparer les versions aux différentes largeurs avec un autre outil.

Pourquoi plusieurs largeurs dans le résultat ?

Le navigateur choisit la variante la plus adaptée à l’écran et à la densité de pixels. Proposer plusieurs largeurs évite d’envoyer une image trop grande à un petit appareil. Les valeurs dépendent de la largeur maximale saisie.

Puis-je utiliser ce code pour une image de fond ?

Les attributs srcset et sizes concernent les balises image, pas les images de fond CSS. Pour un arrière-plan, il faut passer par des media queries ou des images adaptatives en CSS. Adaptez la méthode à votre mise en page.