Comment compresser une photo en WebP avec Squoosh ?

Travaillez à partir d’une copie de la meilleure source disponible. Rangez l’original dans un dossier séparé et préparez l’export dans un autre. Évitez de repartir d’une image téléchargée depuis une messagerie si vous possédez encore la photo initiale : elle peut déjà avoir été réduite.

Notez la page, l’emplacement et le cadrage attendus : une photo de galerie, une carte et un grand fond d’accueil n’ont pas le même usage. Demandez les dimensions ou les variantes attendues si elles ne sont pas définies. Agrandir un petit fichier ne recrée pas les détails absents.

Cette méthode concerne une photographie que vous avez déjà choisie et que vous pouvez publier. Pour sélectionner les scènes, vérifier les droits ou préparer plusieurs cadrages, consultez quelles photos choisir pour son site internet. Ici, je prépare le fichier avec un outil précis.

Ouvrez Squoosh et choisissez votre fichier depuis la zone d’ouverture. Sur ordinateur, vous pouvez aussi déposer la photo dans cette zone. Une fois l’image ouverte, l’interface présente un comparateur et des panneaux de réglage. Gardez un côté sur Original Image pour conserver un repère.

Relevez le nom, les dimensions et le poids du fichier de départ dans les informations de votre appareil. Les pixels décrivent la largeur et la hauteur ; les Ko ou Mo décrivent la quantité de données. Ce sont deux contrôles différents.

Les libellés anglais présentés ici ont été vérifiés le 22 octobre 2026 avec la photographie d’exemple intégrée à Squoosh. Selon la largeur de l’écran, les panneaux peuvent occuper une place différente. Repérez leurs noms plutôt qu’une position fixe à droite ou à gauche.

Le README officiel de Squoosh indique que la compression des images se fait localement, sans envoyer la photo à un serveur. Il mentionne aussi Google Analytics pour des données d’usage : traitement local de la photo ne signifie donc pas absence de toute collecte.

Dans le panneau à exporter, activez Resize si les dimensions doivent changer. Gardez Maintain aspect ratio coché pour conserver les proportions. Entrez la largeur attendue dans Width ; la hauteur, Height, se recalcule. Les contrôles officiels de redimensionnement confirment ce lien entre les deux dimensions.

Exemple fictif : Nora, gérante d’un atelier de céramique à Namur, prépare une photo de ses pièces pour la page de présentation de son activité. La personne qui intègre son site lui demande une version de 1 200 pixels de large. Nora saisit 1 200 dans Width et conserve la hauteur calculée. Cette largeur appartient au scénario ; ce n’est pas une consigne pour toutes les photos.

Si la source a déjà les dimensions souhaitées, laissez Resize désactivé. Pour ce premier export, conservez les autres réglages de redimensionnement. Ne déformez pas la scène en imposant une largeur et une hauteur incompatibles : faites préparer le bon cadrage séparément si le site attend un autre ratio.

Dans Compress, sélectionnez WebP. Choisissez bien cette entrée, distincte de WebP v2 (unstable) observée lors de la vérification. Le format de sortie ne se change pas en renommant simplement un fichier JPEG.

Pour essayer la compression avec perte d’une photographie, laissez Lossless décoché et ajustez Quality. Une valeur plus basse accepte davantage de dégradation ; observez son effet plutôt que rechercher un nombre universel. Vous pouvez partir de la valeur affichée, puis descendre progressivement. Si un détail se détériore, remontez et comparez de nouveau.

Le panneau WebP du projet distingue le mode sans perte et la qualité du mode avec perte. Mettre la qualité à 100 n’active pas le mode sans perte. Pour ce parcours, laissez Effort et les réglages avancés tels qu’ils sont : vous pourrez comprendre l’effet des dimensions et de la qualité sans changer plusieurs paramètres à la fois.

WebP permet une compression avec ou sans perte, comme l’explique la présentation du format par web.dev. La compression avec perte élimine des informations ; un nouvel export ne restaure pas celles déjà perdues. Revenez à l’original pour préparer un autre essai.

Attendez la fin du calcul avant de juger la sortie. Déplacez la séparation du comparateur sur une zone précise et inspectez le même détail des deux côtés. Le contrôle de zoom permet de saisir 100 %. Regardez les contours, les textures fines et les transitions de couleur, plutôt que seulement l’impression générale.

Dans l’exemple fictif de Nora, le bord d’une tasse et les nuances de l’émail doivent rester lisibles. Si la texture devient pâteuse ou si une bordure paraît entourée d’un halo, elle remonte la qualité. Une autre photo, avec de grandes surfaces unies, peut demander un compromis différent.

Après un redimensionnement, l’aperçu comparatif peut agrandir la version réduite pour la confronter à la source. Ouvrez aussi le fichier exporté à 100 % de sa propre taille dans un visualiseur, puis à la taille à laquelle le visiteur le verra. Cela évite de confondre agrandissement de l’aperçu et défaut réellement gênant sur le site.

Le poids affiché est un indicateur supplémentaire. web.dev rappelle qu’il n’existe pas de compression optimale pour toutes les images. Ne dégradez pas une photo utile pour atteindre à tout prix un seuil en Ko. Si le fichier reste lourd, revérifiez d’abord ses dimensions et son rôle dans la page.

Utilisez la commande Download associée au panneau WebP. Chaque côté peut proposer son propre téléchargement : vérifiez le format choisi et le poids affiché sur le côté que vous exportez. Télécharger le côté resté sur l’original ne produit pas votre nouvelle version.

Donnez au fichier un nom descriptif, en minuscules et avec des tirets, par exemple tasses-ceramique-atelier.webp dans le scénario fictif. Conservez l’extension WebP créée par l’export. Renommer photo.jpg en photo.webp sans conversion ne change pas le format réel.

Avant intégration, contrôlez ces quatre points dans les informations du fichier et dans un visualiseur d’images :

1. Format : le logiciel reconnaît une image WebP. Le nom et son extension seuls ne prouvent pas le format décodé ; s’il n’est pas indiqué, faites-le confirmer par la personne qui intégrera le fichier.
2. Dimensions : la largeur et la hauteur correspondent à la version attendue.
3. Poids : notez la taille réelle du téléchargement et comparez-la à celle de la source, avec la même unité.
4. Rendu : le fichier s’ouvre, reste dans le bon sens et conserve les détails importants à taille réelle.

Si le résultat est plus lourd ou visuellement moins bon, ne le remplacez pas par principe. Gardez la source, revoyez les réglages ou transmettez les deux versions pour choisir. Aucun pourcentage d’économie n’est garanti par le seul choix de WebP.

Préparer un WebP ne remplace pas la vérification de la page. Un CMS peut créer ses propres variantes, convertir de nouveau les fichiers ou refuser un format selon sa configuration. Un site statique utilise des chemins et, parfois, plusieurs tailles préparées séparément. Il n’existe donc pas de bouton de publication commun à tous les sites.

Si vous disposez d’un espace de gestion prévu pour cela, ajoutez d’abord le nouveau fichier et utilisez la prévisualisation. Vérifiez qu’il remplace la bonne photo, que son cadrage convient sur téléphone et ordinateur, et que sa description alternative reste adaptée à la scène. N’effacez l’ancienne version qu’après avoir contrôlé ses autres usages et conservé une sauvegarde. En cas de doute, remettez la version précédente.

Si vous me confiez le suivi de votre site, transmettez-moi l’original, l’export et la page concernée ; je préciserai l’intégration utile dans le périmètre convenu. Vous n’avez pas à préparer seul toutes les variantes. Le chapitre sur les contenus à préparer explique ce que vous pouvez partager au démarrage.

Enfin, un fichier allégé ne prouve pas à lui seul que tout le site charge plus vite. Pour distinguer le poids d’une photo d’une mesure sur la page complète, lisez comment vérifier la vitesse d’un site et son lien avec le SEO.