Optimiser des images pour un site web
Choisissez les photos. L’outil crée des versions en plusieurs largeurs, en WebP, et génère le HTML responsive : le navigateur ne télécharge que la taille dont l’écran a besoin.
Mode d’emploiDes images légères et responsives
Disponible en: 
Optimiser des images pour un site web: à quoi ça sert
Choisissez une ou plusieurs photos et définissez les largeurs (480, 800, 1200 et 1600 px par défaut), le format (WebP ou JPG) et la qualité. L’outil crée chaque version sans agrandir la photo au-delà de sa taille d’origine, affiche le poids de chacune et génère le HTML responsive avec srcset, sizes, width et height et loading=lazy ou fetchpriority=high pour l’image du haut de page.
Mode d’emploi
- Choisissez les images du site.
- Réglez les largeurs, le format, la qualité et le dossier.
- Téléchargez le .zip et copiez le HTML dans la page.
Quand l’utiliser
- Accélérer le site sur mobile.
- Améliorer le LCP et le CLS des Core Web Vitals.
- Préparer des photos de produits et de galeries.
Questions fréquentes
Pourquoi générer plusieurs largeurs ?
Un téléphone n’a pas besoin de télécharger la photo de 1600 px conçue pour les grands écrans. Avec srcset, le navigateur choisit la plus petite version qui reste nette à l’écran, et la page se charge plus vite, ce qui aide aussi les Core Web Vitals (LCP).
WebP fonctionne-t-il dans tous les navigateurs ?
Oui, dans tous les navigateurs actuels (Chrome, Safari depuis la version 14, Firefox et Edge). Si vous avez besoin de compatibilité avec de très vieux appareils, choisissez JPG.
À quoi servent width, height et loading=lazy ?
Width et height réservent l’espace de l’image avant son chargement, ce qui évite que la page saute (CLS). Loading=lazy diffère les images situées hors de l’écran. N’utilisez pas lazy sur l’image principale en haut de la page.
Vraiment gratuit ?
Oui, 100 % gratuit. Sans inscription, sans abonnement et sans limite d’utilisation. Tous les outils de Tools123 sont gratuits.