Générateur d’images responsives (srcset et sizes)

Générateur d’images responsives (srcset et sizes): à quoi ça sert

Les images responsives permettent au téléphone de télécharger une petite photo et au grand écran une plus grande, ce qui accélère le site sans perdre en netteté. Pour cela, il faut plusieurs tailles de la même photo et le code avec srcset et sizes.

Envoyez l’image, choisissez les largeurs, le format et la qualité, puis téléchargez toutes les versions dans un .zip. Le code est fourni avec srcset, sizes adapté à l’emplacement de l’image dans la page, width et height pour éviter les sauts de mise en page, loading=lazy ou fetchpriority=high (avec preload) pour l’image principale, et éventuellement <picture> avec un JPG de secours.

Mode d’emploi

1. Choisissez l’image.
2. Définissez les largeurs, le format et son emplacement dans la page.
3. Téléchargez le .zip et copiez le code.

Quand l’utiliser

• Photos de produits dans les boutiques.
• Image principale des landing pages.
• Galeries et blogs.

Questions fréquentes

Que font srcset et sizes ?

Le srcset liste les versions de la même image avec la largeur de chacune (par exemple 640w, 1280w). Le sizes indique la place que l’image occupe à l’écran. Avec les deux, le navigateur choisit la plus petite version qui reste nette sur cet écran, et le téléphone ne télécharge pas la photo de 2000 px.

Pourquoi width et height dans la balise ?

Avec width et height, le navigateur réserve l’espace de l’image avant son chargement et le texte ne saute pas vers le bas à l’apparition de la photo. Cela améliore le CLS, l’une des métriques des Core Web Vitals de Google.

Quand utiliser loading=lazy ?

Pour les images situées plus bas dans la page. L’image principale, visible dès l’ouverture, ne doit jamais avoir lazy : elle reçoit fetchpriority=high pour se charger au plus vite.

Vraiment gratuit ?

Oui, 100 % gratuit. Sans inscription, sans abonnement et sans limite d’utilisation. Tous les outils de Tools123 sont gratuits.

Outils similaires