Optimiser les images en navigateur avec Squoosh et WebAssembly

Commencez par WebP pour une photo et OxiPNG pour une capture d’écran contenant du texte. Pour un logo transparent, essayez WebP sans perte et vérifiez les contours sur des fonds clairs et sombres. Squoosh⁠ vous permet de comparer ces options dans votre navigateur et de télécharger une image distincte pour votre site web.

Pourquoi optimiser les images dans le navigateur ?

Squoosh est une application open source de GoogleChromeLabs permettant de compresser manuellement une image à la fois. Vous pouvez comparer la texture d’une photo ou les petits caractères d’une capture d’écran tout en modifiant les paramètres d’encodage. Aucun compte n’est nécessaire. Selon sa documentation sur la confidentialité⁠, le traitement d’images s’effectue sur votre appareil, mais l’application utilise des outils analytiques qui incluent la taille des fichiers avant et après traitement. Le traitement local des images ne signifie pas que la page n’effectue aucune requête réseau.

Comment utiliser l’application web Squoosh

Utilisez un navigateur de bureau récent et conservez votre fichier original. Ces commandes ont été vérifiées dans Chrome 151 sous Linux avec des images fixes sRGB ordinaires sur 8 bits. Ce guide ne couvre pas les images animées, le HDR ni les fichiers CMYK destinés à l’impression.

1. Ouvrez squoosh.app⁠ lorsque vous êtes en ligne. Glissez une photo, une capture d’écran ou un PNG transparent depuis votre appareil, ou cliquez sur la zone de sélection d’image pour choisir le fichier.
2. Dans le menu Compress de gauche, gardez Original Image. Dans le menu Compress de droite, choisissez un encodeur dans le tableau ci-dessous.
3. Laissez Resize et Reduce palette désactivés pour la première comparaison. Le redimensionnement modifie les dimensions, et la réduction de palette peut supprimer des couleurs indépendamment de l’encodeur.
4. Appliquez les paramètres de départ ci-dessous, puis attendez la fin de l’encodage et l’affichage de la taille du fichier de sortie. La taille affichée correspond au résultat encodé ; elle est arrondie, donc utilisez la taille en octets du fichier enregistré pour une comparaison exacte.
5. Si l’avis de disponibilité hors ligne masque les commandes de zoom, choisissez DISMISS. Déplacez le séparateur sur l’image. Examinez-la avec un zoom de 100 %, puis agrandissez les petits caractères, les textures fines, les dégradés et les contours transparents. Augmentez la qualité si la version plus petite dégrade des détails dont vous avez besoin.
6. Choisissez le lien Download de droite. Le téléchargement de gauche enregistre l’original. Enregistrez la version obtenue sous un nom distinct et ouvrez ce fichier avant de remplacer une ressource de votre site web.

Formats pris en charge et options d’optimisation

Il s’agit de points de départ, sans garantie de qualité.

JPEG : Choisissez MozJPEG si vous avez besoin d’un fichier JPEG. Commencez avec Quality: à 75 et comparez le fichier enregistré à l’original. JPEG ne peut pas conserver la transparence ; utilisez-le donc pour des images opaques. MozJPEG est le nom de l’encodeur, pas un format de fichier distinct.

PNG : OxiPNG produit des fichiers PNG. Sa commande Effort: modifie l’effort de compression plutôt que la qualité de l’image. C’est un premier choix utile pour les captures d’écran, où même de légères modifications peuvent rendre le texte flou. Un réglage d’effort plus élevé augmente le temps d’encodage ; un fichier de sortie plus petit n’est pas garanti.

WebP : Pour du texte opaque, comparez également WebP avec Lossless activé et Slight loss: à 0. Pour la transparence, activez Preserve transparent data. Cette option conserve les données RGB masquées transmises à l’encodeur ; elle ne peut pas restaurer des valeurs déjà modifiées lors du décodage par le navigateur. L’implémentation des paramètres WebP⁠ montre qu’augmenter la légère perte autorise un traitement presque sans perte, même lorsque l’option sans perte est activée.

AVIF : Essayez AVIF pour une photographie opaque, en commençant avec Lossless désactivé, Quality: à 50, et Effort: à 4. Comparez le fichier téléchargé à votre version WebP. Les échelles de qualité diffèrent selon les encodeurs : AVIF à 50 et WebP à 75 ne correspondent pas à des objectifs de qualité équivalents.

Le menu contient également JPEG XL (beta). La présence d’un encodeur dans Squoosh ne prouve pas que le navigateur ou la visionneuse d’images de vos utilisateurs prend en charge son format de sortie. Utilisez les formats ci-dessus pour ce guide et vérifiez l’image téléchargée dans les navigateurs auxquels vous comptez la fournir.

Comparaison de la qualité d’image avant et après optimisation

« Visuellement acceptable » et « sans perte » répondent à des questions différentes. Une photo avec perte peut sembler acceptable à sa taille d’affichage tout en ayant des pixels décodés différents. Un codec sans perte préserve les pixels qu’il reçoit, mais Squoosh commence par dessiner les images décodées dans un canvas du navigateur⁠. Cette étape peut modifier les valeurs de couleur, notamment autour des zones partiellement transparentes. Ni OxiPNG ni l’option sans perte de WebP ne garantissent la préservation exacte des données RGBA d’origine tout au long du traitement dans l’application.

Pour une capture d’écran, examinez les traits fins et les petits caractères. Pour une photo, examinez la texture, les dégradés, les changements de couleur et les artefacts de compression. Pour un logo, examinez les contours transparents sur le fond qui sera réellement utilisé. L’aperçu vous aide à choisir une version ; l’examen du fichier téléchargé permet de vérifier que vous avez enregistré le résultat voulu. Si vous devez conserver les pixels exacts ou les métadonnées d’origine, utilisez un processus de traitement natif et vérifiez ces propriétés séparément.

Vérifier le fichier téléchargé

Ouvrez la version obtenue dans le navigateur ou la visionneuse d’images cible. Confirmez son format, ses dimensions et sa transparence, puis comparez sa taille réelle en octets à celle de l’original. Ne conservez le fichier plus petit que si son apparence et sa compatibilité répondent à vos besoins. Une source déjà compressée peut produire une version plus volumineuse, et le réencodage d’un JPEG introduit une nouvelle génération avec perte.

Un hachage différent du fichier compressé ne prouve pas une perte de qualité. À l’inverse, des dimensions identiques et un aperçu fonctionnel ne prouvent pas que les pixels sont identiques. Une absence stricte de perte exige de comparer les pixels décodés avec la même interprétation des couleurs et du canal alpha, y compris les couleurs masquées dans les pixels entièrement transparents ; l’examen visuel ne peut pas prouver cette égalité.

Préparer une session hors ligne

Squoosh met en cache les ressources de l’application et des codecs au moyen d’un service worker⁠. Effectuez la préparation dans le même profil de navigateur que vous utiliserez hors ligne :

1. Lors de votre première visite, attendez Ready to work offline. En ligne, ouvrez une image locale et terminez un encodage et un téléchargement avec chaque codec que vous prévoyez d’utiliser. Le message initial ne suffit pas à vérifier que ces codecs sont disponibles.
2. Déconnectez-vous du réseau et rechargez le même onglet. Choisissez une autre image locale, réappliquez les paramètres prévus et vérifiez le fichier nouvellement téléchargé. Cela teste un nouveau chargement plutôt qu’un codec encore en mémoire.
3. Si l’encodage ou le rechargement échoue, reconnectez-vous, rechargez Squoosh en ligne et répétez l’encodage et le téléchargement. Testez ensuite à nouveau hors ligne. Utilisez uniquement un codec qui réussit votre test hors ligne, ou restez en ligne pour cette conversion.

Dans la configuration Chrome testée, WebP a réussi ce parcours de rechargement et de téléchargement hors ligne. OxiPNG a échoué après le rechargement malgré une préparation en ligne réussie. Ne supposez pas que tous les encodeurs du menu sont disponibles hors ligne. Conservez les données stockées du site ; si vous les effacez ou si le navigateur les évince du cache, vous devrez refaire la préparation et les tests.

Limites de l’optimisation dans le navigateur avec Squoosh

L’interface web traite une image à la fois. Les grandes images et les réglages d’effort élevés peuvent solliciter fortement la mémoire et le processeur ; commencez donc par une image de taille modeste et réduisez l’effort si l’encodage se bloque. Si un codec échoue, reconnectez-vous pour charger ses ressources et essayez un autre encodeur. Conservez la source plutôt que d’utiliser un téléchargement partiel ou non vérifié.

Comment WebAssembly améliore l’optimisation d’images dans Squoosh

Les projets de codecs⁠ de Squoosh compilent le code de liaison JavaScript et les modules WebAssembly pour des codecs comme MozJPEG et WebP. Cela permet à l’application d’exécuter ces encodeurs localement. Vous n’avez pas besoin d’écrire du WebAssembly ni d’installer les chaînes d’outils des codecs pour utiliser l’interface. La vitesse d’encodage dépend toujours de l’image, des paramètres et de l’appareil.

Autres approches de l’optimisation d’images

Pour un traitement PNG reproductible, le guide d’Oxipng natif EN (English) explique comment obtenir des fichiers de sortie distincts et régler la préservation des pixels. Pour traiter les fichiers téléversés dans une application, consultez le Robot 🤖 /image/optimize de Transloadit et son API de traitement d’images.