Compresser une Image PNG, JPEG ou WebP en Ligne

Qu'est-ce que la compression d'image ?

// Compress a JPEG image in the browser using the Canvas API
async function compressImage(file, quality = 0.75) {
  const img = await createImageBitmap(file); // decode the image
  const canvas = document.createElement('canvas');
  canvas.width = img.width;
  canvas.height = img.height;
  canvas.getContext('2d').drawImage(img, 0, 0);
  // quality: 0.0 (smallest file) → 1.0 (original quality)
  return new Promise((resolve) =>
    canvas.toBlob(resolve, 'image/jpeg', quality)
  );
}

// file comes from an <input type="file"> or drag-and-drop
const blob = await compressImage(file, 0.75);
console.log(`Original:   ${file.size} bytes`);
console.log(`Compressed: ${blob.size} bytes`);
// → Original:   2100000 bytes
// → Compressed:  672000 bytes  (~68% reduction)

Fonctionnalités clés

JPEG vs PNG vs WebP

Exemples de compression

photo-paysage.jpg (2,1 Mo, 4000×3000)

photo-paysage.jpg (680 Ko à qualité 75)

logo-transparent.png (43 Ko, 1200×800)

logo-transparent.png (19 Ko à qualité 80)

banniere-hero.webp (800 Ko, 1920×1080)

banniere-hero.webp (250 Ko à qualité 75)

Comment compresser des images en ligne

1. 1

   Importez vos images

   Faites glisser-déposer des images dans la zone d'importation, ou cliquez pour parcourir vos fichiers. Vous pouvez sélectionner jusqu'à 20 images JPEG, PNG ou WebP à la fois, chacune jusqu'à 10 Mo.

2. 2

   Ajustez la qualité

   Utilisez le curseur de qualité pour définir le niveau de compression souhaité (0–100). La valeur par défaut est 75, ce qui offre un bon équilibre. Observez les tailles de fichier et les taux de compression se mettre à jour en temps réel.

3. 3

   Téléchargez les résultats

   Cliquez sur Télécharger pour un fichier individuel, ou utilisez Tout télécharger pour enregistrer toutes les images compressées. Utilisez le bouton Comparer pour inspecter visuellement la qualité avant de télécharger.

Cas d'utilisation

Optimisation des performances web

Réduisez la taille des fichiers image avant de les télécharger sur votre site web. Des images plus légères se chargent plus vite, améliorant les scores Core Web Vitals (notamment le Largest Contentful Paint), réduisant les coûts de bande passante et améliorant le référencement.

Réduction de la taille des pièces jointes

Compressez les images avant de les joindre à des e-mails pour rester dans les limites de taille (généralement 10 à 25 Mo). Un lot de 20 photos peut souvent être compressé de 50 Mo à moins de 10 Mo.

Préparation des publications sur les réseaux sociaux

Pré-compressez les images avant de les télécharger sur les réseaux sociaux. Bien que les plateformes recompressent automatiquement les images, partir d'un fichier déjà optimisé vous donne plus de contrôle sur la qualité finale.

Optimisation des ressources d'applications et de jeux

Compressez les ressources d'interface, les textures et les sprites pour les applications mobiles, les jeux et les progressive web apps. Des ressources plus légères signifient des téléchargements plus rapides, moins de stockage et une meilleure expérience utilisateur.

Optimisation de documents et présentations

Réduisez la taille des images intégrées dans les PDF, documents Word et présentations. Un diaporama de 50 Mo avec des photos haute résolution peut souvent être réduit à 10 Mo sans perte de qualité perceptible.

Détails techniques

Compression via l'API Canvas

Cet outil utilise la méthode toBlob() de l'API HTML5 Canvas pour la compression. L'image est dessinée sur un élément canvas invisible, puis ré-encodée avec le paramètre de qualité spécifié. Pour JPEG et WebP, le paramètre de qualité (0,0–1,0) contrôle le niveau de compression avec perte. Pour PNG, l'API Canvas ignore entièrement le paramètre de qualité — l'encodage PNG via Canvas est toujours sans perte.

Quantification de palette PNG

Puisque Canvas toBlob() ignore le paramètre de qualité pour le PNG, la sortie PNG ne passe pas du tout par Canvas. L'image est quantifiée sur une palette de couleurs : le curseur de qualité détermine la taille de la palette — qualité 75 donne 192 couleurs — et le résultat est réécrit en véritable PNG, avec son canal alpha intact. La qualité 100 correspond à un ré-encodage sans perte qui ne modifie aucun pixel. Si le fichier quantifié n'est pas plus petit que l'original, l'outil l'abandonne et conserve vos octets d'origine.

Comportement du paramètre de qualité

Le curseur de qualité correspond au paramètre de qualité de Canvas toBlob() : 100 = 1,0 (qualité maximale, fichier le plus grand), 0 = 0,0 (qualité minimale, fichier le plus petit). Pour JPEG, la qualité 75 (0,75) est généralement le meilleur compromis — en dessous de 50, les artefacts deviennent perceptibles. Pour WebP, la même valeur de qualité produit des fichiers légèrement plus petits que JPEG avec une qualité visuelle comparable.

Mémoire du navigateur et limites

Chaque image existe en mémoire à la fois comme objet File original et comme Blob compressé, plus deux URLs d'objet pour l'affichage en aperçu. Avec 20 images de 10 Mo chacune, l'utilisation maximale de la mémoire peut atteindre environ 400 Mo. Les URLs d'objet sont révoquées lorsque les images sont effacées ou que la page est déchargée pour éviter les fuites mémoire.

Bonnes pratiques

Commencez à qualité 75 pour JPEG/WebP

La qualité 75 est le point de départ recommandé pour la plupart des usages. Elle réduit généralement la taille du fichier de 60 à 80 % avec une perte de qualité visible minime. N'augmentez la qualité au-dessus de 85 que pour les images où la préservation des détails fins est essentielle (ex. imagerie médicale, photographie de qualité impression).

Utilisez WebP autant que possible

WebP produit des fichiers 25 à 35 % plus petits que JPEG à qualité visuelle identique et prend en charge la transparence comme PNG. Tous les navigateurs modernes supportent WebP depuis 2024. Convertissez vos images JPEG et PNG en WebP pour le meilleur rapport compression/qualité sur le web.

Conservez les fichiers originaux

Conservez toujours vos images originales non compressées comme fichiers sources. La compression avec perte est irréversible — recompresser une image déjà compressée dégrade davantage la qualité sans réduction de taille significative (phénomène connu sous le nom de dégradation générationnelle).

Vérifiez la qualité avant de télécharger

Utilisez le bouton Comparer pour inspecter visuellement les artefacts de compression avant de télécharger. Portez une attention particulière aux zones contenant du texte, des bords nets et des dégradés subtils — c'est là que les artefacts JPEG sont les plus visibles.

Regroupez les images similaires

Les images aux caractéristiques similaires (même type de sujet, résolution, profondeur de couleur) se compressent mieux avec le même réglage de qualité. Traitez vos photos séparément de vos graphiques/logos pour des résultats optimaux.

Questions fréquentes