Comment fonctionne la compression d'images dans le navigateur
Chaque passe de compression s'exécute entièrement en JavaScript. Aucune bibliothèque de codec n'est téléchargée et aucun serveur n'est impliqué. L'API Canvas native du navigateur décode l'image, la ré-encode à une qualité inférieure et vous remet un Blob que la page peut prévisualiser, télécharger ou compresser dans un ZIP. Comme chaque étape reste dans le bac à sable de l'onglet, les fichiers originaux ne touchent jamais le réseau.
- Lit chaque fichier importé en tant que Blob et crée une URL d'objet pour que le navigateur puisse le décoder localement, sans copier d'octets vers un serveur ni les écrire sur disque.
- Dessine l'image décodée sur un élément Canvas hors écran, à ses dimensions de pixels d'origine, prête pour le ré-encodage.
- Appelle
canvas.toBlob(callback, mimeType, quality)pour ré-encoder les pixels. En mode qualité, la valeur du curseur correspond directement au paramètre de quantification de l'encodeur ; en mode taille cible, la page bisecte la valeur de qualité jusqu'à ce que le blob de sortie tienne sous votre budget en octets. - Affiche un récapitulatif avant/après avec la taille d'origine, la taille compressée et le pourcentage d'économie, puis propose un téléchargement par image ou un seul ZIP pour l'ensemble du lot. Le ZIP est construit en mémoire avec fflate, une bibliothèque de 8 Ko chargée à la première utilisation.
Pourquoi compresser des images ?
- Des images plus légères se chargent plus vite. Réduire une image hero de 4 Mo à 600 Ko améliore directement le Largest Contentful Paint, l'un des Core Web Vitals que Google utilise pour le classement. Sur une page avec plusieurs photos, l'économie s'accumule pour donner un premier affichage plus rapide.
- Les limites d'envoi et de pièces jointes sont partout. De nombreuses plateformes CMS, outils de tickets et systèmes de messagerie rejettent les fichiers de plus de 1 ou 2 Mo. Une passe de compression rapide permet de passer sous la limite sans ouvrir un éditeur complet.
- La bande passante et le stockage coûtent cher à l'échelle. Envoyer du WebP à qualité 0.8 plutôt que du PNG plein format peut réduire la charge des images d'un tiers ou plus, ce qui abaisse les factures d'egress CDN et la consommation de données mobiles de vos visiteurs.
- La confidentialité compte pour les images sensibles. Comme tout fonctionne dans votre navigateur, les scans de documents, les images médicales et les captures internes restent sur votre appareil — pas d'envoi vers un serveur tiers comme TinyPNG à redouter.
Applications courantes
La compression est nécessaire chaque fois qu'une image est plus grande que l'endroit où elle doit aller. Trois cas de figure qu'on voit sans cesse.
- Préparer des photos produits pour une boutique en ligne. Les originaux JPEG sont compressés à qualité 0.8 (ou une cible de 200 Ko) pour que la vitrine se charge rapidement et passe les Core Web Vitals sur mobile.
- Réduire des captures d'écran avant de les joindre à un bug tracker ou un wiki. Un lot de PNG convertis en JPEG à qualité 0.85 passe souvent de plusieurs dizaines de Mo à quelques Mo.
- Faire tenir une photo sous une limite d'envoi — un portail de recrutement qui refuse les fichiers de plus de 1 Mo, un système de messagerie avec une limite d'attachement stricte, ou un avatar de forum qui doit respecter un budget en octets.
Un exemple concret : JPEG de 4 Mo vers 400 Ko
Un JPEG de 4 Mo sorti directement d'un appareil photo est un fichier classique qui fait sauter les limites d'envoi et ralentit les pages. Un bon repère pour mesurer ce que la compression fait gagner.
Déposez le JPEG dans la zone d'import, laissez le format sur JPEG, et soit faites glisser le curseur de qualité jusqu'à 0.7, soit passez en mode taille cible et saisissez 400 Ko. En mode qualité, le pipeline Canvas ré-encode une fois et affiche le résultat, généralement entre 500 et 700 Ko selon la photo. En mode taille cible, la page teste quelques valeurs de qualité, retient la plus haute qui tient encore sous 400 Ko et indique le pourcentage d'économie. Cliquez sur Télécharger sur la carte pour récupérer le fichier individuel, ou sur Télécharger .zip si vous avez compressé plusieurs images à la fois. L'ensemble du processus s'exécute en bien moins d'une seconde pour une image de cette taille et ne consomme aucune bande passante une fois la page chargée.
Quelle est la différence entre le mode qualité et le mode taille cible ?
Le mode qualité vous offre un curseur unique de 0.1 à 1.0 qui correspond au paramètre de quantification de l'encodeur JPEG ou WebP — des valeurs plus basses donnent des fichiers plus petits avec des artefacts plus visibles. Le mode taille cible inverse le problème : vous indiquez une taille en kilo-octets et la page bisecte la valeur de qualité, encodant quelques fois jusqu'à trouver la qualité la plus élevée qui tient encore dans votre budget. Le mode taille cible est pratique quand une limite stricte compte (un plafond d'envoi de 1 Mo, par exemple) ; le mode qualité est plus rapide et meilleur quand vous voulez simplement un résultat visuel prévisible. PNG est sans perte, donc aucun des deux modes ne s'y applique.
Est-ce que cela se passe sur mon appareil ?
Oui, entièrement. La page utilise l'API Canvas native du navigateur et l'API Web File pour décoder et ré-encoder chaque image en mémoire. Aucune donnée d'image n'est envoyée à un serveur, il n'y a pas d'envoi temporaire et pas d'aller-retour vers le cloud. Vous pouvez le vérifier vous-même : ouvrez DevTools, basculez sur le panneau Réseau et lancez une compression. Les seules requêtes sortantes que vous verrez sont le chargement initial de la page et les appels publicitaires. Rien en forme d'image ne quitte l'onglet.
Pourquoi compresser un PNG le réduit-il parfois à peine ?
PNG est un format sans perte, donc l'API Canvas ne peut pas se débarrasser de détails pour le réduire — elle peut seulement reconditionner les mêmes pixels. Pour les photographies, un PNG est déjà grand et le ré-encodage sans perte économise peu. Le vrai gain vient du changement de format de sortie vers JPEG ou WebP, qui utilisent une compression avec pertes adaptée aux photos et produisent des fichiers couramment 4 à 10 fois plus petits. Gardez PNG uniquement quand vous avez besoin d'une qualité sans perte ou de la transparence ; sinon, choisissez JPEG pour les photos ou WebP pour le meilleur équilibre taille-qualité.
Quel format choisir ?
Pour les photographies, WebP à qualité 0.8 offre le meilleur équilibre taille-qualité et est pris en charge par tous les navigateurs livrés depuis 2021 ; JPEG est la solution de repli universelle sûre quand une destination est plus ancienne ou plus restrictive. Choisissez PNG uniquement quand vous avez besoin d'une qualité sans perte ou d'un canal alpha — dessin vectoriel, captures d'interface, logos avec transparence. Si vous optimisez pour la vitesse de page et que votre audience utilise des navigateurs modernes, WebP est presque toujours le bon choix ; si vous alimentez un ancien CMS ou un pipeline d'impression qui refuse le WebP, restez sur JPEG.
Déposez vos images, choisissez un niveau de qualité ou une taille cible, compressez. Tout fonctionne dans votre onglet. Sans envoi, sans compte, sans attendre une file de serveur.