Compresser une image pour le web : JPEG, PNG ou WebP ?

Une photo de 4 Mo posée telle quelle en haut d’une page suffit à la ralentir, surtout sur mobile. Les images représentent souvent la plus grande partie du poids d’une page, et c’est aussi sur elles que se joue la vitesse perçue.

Voici comment compresser une image pour le web : quel format choisir entre JPEG, PNG et WebP, pourquoi redimensionner avant de régler la qualité, et comment le faire sans envoyer vos fichiers sur un serveur.

Pourquoi le poids des images compte#

Sur beaucoup de pages, l’élément le plus visible au chargement (souvent une grande image en haut de page) sert de mesure à l’indicateur LCP, Largest Contentful Paint, l’un des Core Web Vitals de Google. Le seuil considéré comme bon est de 2,5 secondes. Plus ce fichier est lourd, plus il met de temps à arriver sur une connexion mobile.

Alléger les images ne suffit pas à lui seul à passer ce seuil, mais c’est souvent le levier le plus simple.

JPEG, PNG ou WebP : choisir le bon format#

JPEG : compression avec perte, adaptée aux photos. Pas de transparence : les zones transparentes deviennent blanches.
PNG : sans perte, avec transparence. Parfait pour une capture d’écran, un logo ou un schéma en aplats, mais souvent lourd pour une photo. Le réglage de qualité n’a aucun effet sur lui.
WebP : avec ou sans perte, avec transparence, et en général plus léger que le JPEG à qualité visuelle comparable. Il est lu par tous les navigateurs récents.

Le compresseur accepte en entrée du JPEG, du PNG, du WebP et de l’AVIF. Les navigateurs ne savent pas encoder l’AVIF : à partir d’un fichier AVIF, le résultat est du WebP.

Redimensionner avant de compresser#

Le poids d’une image dépend en grande partie de son nombre de pixels. Une photo de 4 000 × 3 000 px affichée dans une colonne de 800 px contient bien plus de pixels que nécessaire, et aucun réglage de qualité ne compensera cet excès.

Pour choisir la largeur, partez de la largeur d’affichage en pixels CSS et doublez-la pour les écrans à haute densité : 800 px d’affichage, 1 600 px de fichier. Dans le compresseur d’images, renseignez « Largeur maximale » ou « Hauteur maximale » : 0 signifie aucune limite, le ratio est conservé et l’image n’est jamais agrandie.

Régler la qualité#

Déposez jusqu’à 20 images JPEG, PNG, WebP ou AVIF.
Choisissez le Format de sortie : « Même format », JPEG, WebP ou PNG.
Réglez la Qualité, de 10 à 100 %. La valeur par défaut est 80 %, un bon point de départ pour une photo.
Lisez, pour chaque image, le poids Avant, le poids Après et le gain, ainsi que le total en haut de la liste.
Téléchargez les fichiers un par un, ou tous ensemble avec « Tout télécharger (.zip) ».

Baissez la qualité tant que le résultat vous convient, puis arrêtez-vous avant que des défauts apparaissent : aplats qui forment des bandes, contours effilochés autour des textes, visages empâtés. L’outil n’affiche pas de comparaison visuelle, alors ouvrez le fichier téléchargé et zoomez. Les « Réglages de ce fichier » permettent d’adapter les valeurs image par image.

Ce que l’outil fait de votre fichier#

Tout se passe dans votre navigateur : les images ne sont pas envoyées. L’image est redessinée puis réencodée, ce qui supprime les métadonnées (EXIF, position GPS) tout en appliquant l’orientation, donc une photo verticale reste à l’endroit. C’est un avantage si vous publiez des photos prises avec un téléphone.

Si le résultat est plus lourd que l’original (c’est possible avec une image déjà bien optimisée, ou un JPEG converti en PNG), un avertissement le signale et l’original reste téléchargeable. Les images de plus de 50 mégapixels ou de plus de 100 Mo sont refusées.

Intégrer l’image dans la page#

Une image allégée gagne encore à être bien déclarée :

<img src="/photo-1600.webp" width="1600" height="900"
     alt="Description de l’image" loading="lazy">

width et height réservent la place et évitent que la page saute au chargement.
loading="lazy" retarde les images situées plus bas, mais ne le mettez pas sur l’image principale du haut de page, qui compte pour le LCP.
Pour éviter un trou blanc pendant le chargement, donnez au conteneur une couleur de fond proche de l’image : l’extracteur de couleurs la fournit en un clic.
Pour les aperçus de partage, l’image Open Graph se renseigne dans le générateur de balises meta, avec une image légère elle aussi.