Optimiser les images de votre site web

Les images sont généralement la partie la plus lourde d'une page web, et la plus grande visible sans défiler est souvent l'élément qui détermine votre Largest Contentful Paint (LCP), l'un des Core Web Vitals de Google. Une photo de 5 Mo sortie d'un appareil ou d'une banque d'images est plusieurs fois plus grande que ce dont un écran a besoin. L'optimiseur pour site web traite les deux causes à la fois : dimensions excessives et octets inutiles.

Par défaut, chaque image est réduite pour tenir dans 1920 × 1080 pixels, en gardant ses proportions et sans jamais agrandir les petites images, puis compressée en qualité 78 : un réglage qui reste propre sur des visuels pleine largeur tout en réduisant nettement le poids. Le format d'origine est conservé sauf si vous en choisissez un autre ; pour la plupart des sites, passer au WebP est le gain supplémentaire le plus simple.

Comment utiliser Optimiseur d'images pour site web

1. Déposez vos images dans la zone d'import, cliquez dessus pour choisir des fichiers ou collez une image avec Ctrl+V. Cette page accepte les fichiers JPG, PNG, WebP, GIF et BMP, plusieurs à la fois et jusqu'à 80 Mo chacun.
2. Vérifiez la section Resize : Max 1920 × 1080 convient aux bannières et arrière-plans pleine largeur. Pour les images dans une colonne d'article, baissez la largeur vers 1200 ou 800 pixels. Les images en portrait sont limitées par la hauteur de 1080 pixels : augmentez-la si nécessaire.
3. Ouvrez Format et choisissez WebP (pris en charge par tous les navigateurs actuels) ou AVIF pour les fichiers les plus légers, ou gardez le format d'origine si votre CMS exige du JPG ou du PNG.
4. Contrôlez le résultat avec le curseur avant/après : faites glisser le séparateur sur l'aperçu et lisez en dessous les nouvelles dimensions, le poids, la qualité et le pourcentage gagné. Chaque modification des réglages retraite automatiquement toutes les images.
5. Téléchargez une image seule ou utilisez « Download all (ZIP) » pour tout le lot. Sous « More options », vous pouvez aussi fixer une valeur DPI et un modèle de nom de fichier avec {name}, {w} et {h}.

Conseils de performance web

• Dimensionnez selon l'emplacement. Une image affichée sur 800 pixels n'a pas besoin d'en faire 4000 ; adapter les dimensions à la mise en page fait souvent gagner plus que n'importe quel réglage de qualité.
• Traitez d'abord l'image LCP. Optimisez votre visuel principal et ne le chargez pas en différé ; le lazy loading est réservé aux images plus bas dans la page, comme l'explique le générateur d'images lazy load.
• Indiquez width et height dans le HTML. La ligne « After » affiche la taille exacte de sortie : recopiez-la dans les attributs width et height pour éviter les décalages de mise en page (CLS).
• Traitez des dossiers entiers. Déposez toutes les images d'une page ou d'un thème et téléchargez-les en ZIP. L'optimiseur WebP est préréglé pour la sortie WebP, et les tailles exactes se trouvent sur redimensionner en 1920×1080.

Les GIF animés sont enregistrés en image fixe par l'encodeur du navigateur : laissez-les en dehors du lot.

Privé, gratuit et rapide

Tout se passe dans votre navigateur : les images sont décodées, redimensionnées et réencodées sur votre propre appareil, rien n'est envoyé sur un serveur. Pas d'inscription, pas de filigrane, pas de limite quotidienne, et les données de localisation et d'appareil photo (EXIF) sont retirées de chaque résultat.