Compatibilité avec de nouveaux codecs, conception repensée et compatibilité avec la CLI
Squoosh est une application de compression d'images que notre équipe a créée et lancée lors du Chrome Dev Summit 2018. Nous l'avons conçue pour faciliter l'expérimentation avec différents codecs d'image et pour présenter les fonctionnalités du Web moderne.
Aujourd'hui, nous publions une mise à jour majeure de l'application, qui offre une compatibilité avec davantage de codecs, une nouvelle conception et une nouvelle façon d'utiliser Squoosh sur votre ligne de commande, appelée Squoosh CLI.
Compatibilité avec de nouveaux codecs
Nous prenons désormais en charge OxiPNG, MozJPEG, WebP et AVIF, en plus des codecs compatibles de manière native dans votre navigateur. Un nouveau codec a été rendu possible grâce à l'utilisation de WebAssembly. En compilant un encodeur et un décodeur de codec en tant que module WebAssembly, les utilisateurs peuvent accéder à des codecs plus récents et les tester, même si leur navigateur préféré ne les prend pas en charge.
Lancement d'une ligne de commande Squoosh
Depuis le lancement initial en 2018, les utilisateurs demandent fréquemment à interagir avec Squoosh par programmation sans interface utilisateur. Nous étions un peu partagés sur cette voie, car notre application était une interface utilisateur basée sur des outils de codec en ligne de commande. Cependant, nous comprenons le souhait d'interagir avec l' ensemble du package de codecs plutôt qu'avec plusieurs outils. C'est précisément ce que fait Squoosh CLI.
Vous pouvez installer la version bêta de Squoosh CLI en exécutant npm i @squoosh/cli ou l'exécuter
directement à l'aide de npx @squoosh/cli [parameters].
Squoosh CLI est écrit en Node et utilise exactement les mêmes modules WebAssembly que la PWA
utilise. Grâce à une utilisation intensive des workers, toutes les images sont décodées, traitées et encodées en parallèle.
Nous utilisons également Rollup pour tout regrouper dans un seul fichier JavaScript afin de nous assurer que l'installation via
npx est rapide et transparente. La CLI propose également une compression automatique, qui tente de réduire autant que possible la
qualité d'une image sans dégrader la fidélité visuelle
(à l'aide de la métrique Butteraugli).
Avec Squoosh CLI, vous pouvez compresser les images de votre application Web dans plusieurs formats et utiliser l'élément
<picture>
pour permettre au navigateur de choisir la meilleure version. Nous prévoyons également de créer des
plug-ins pour Webpack, Rollup et d'autres outils de compilation afin de faire de la compression d'images
une partie automatique de votre processus de compilation.
Modification du processus de compilation de Webpack à Rollup
La même équipe qui a créé Squoosh a consacré beaucoup de temps à l'étude des outils de compilation cette année pour le rapport sur les outils et a décidé de passer de Webpack à Rollup pour notre processus de compilation.
Le projet a initialement été lancé avec Webpack, car nous voulions l'essayer en équipe. À l' époque, en 2018, Webpack était le seul outil qui nous offrait suffisamment de contrôle pour configurer le projet comme nous le souhaitions . Au fil du temps, nous avons constaté que le système de plug-in simple de Rollup et sa simplicité avec ESM en faisaient un choix naturel pour ce projet.
Conception de l'interface utilisateur repensée
Nous avons également repensé la conception de l'interface utilisateur de l'application, en utilisant des blobs comme élément visuel. Il s'agit d'un petit
jeu de mots sur la façon dont nous traitons les données dans notre code. Squoosh transmet les données d'image sous forme de blob. Il nous a donc semblé
naturel d'inclure des blobs dans la conception (vous comprenez ?).
L'utilisation des couleurs a également été affinée, de sorte que la couleur n'est pas seulement un accent, mais aussi un vecteur permettant de distinguer et de renforcer l'image qui est en contexte pour les options. Dans l'ensemble, la page d'accueil est un peu plus dynamique et l'outil lui-même est un peu plus clair et concis.
Et après ?
Nous prévoyons de continuer à travailler sur Squoosh. À mesure que le nouveau format d'image sera publié, nous voulons que nos utilisateurs disposent d'un endroit où ils pourront jouer avec le codec sans avoir à faire de gros efforts. Nous espérons également étendre l'utilisation de Squoosh CLI et l'intégrer davantage au processus de compilation d'une application Web.
Squoosh a toujours été Open Source, mais nous n'avons jamais cherché à développer la communauté. En 2021, nous prévoyons d'élargir notre base de contributeurs et de mettre en place un meilleur processus d'intégration au projet.
Avez-vous des idées pour Squoosh ? N'hésitez pas à nous en faire part dans notre outil de suivi des problèmes. L'équipe part en vacances d'hiver prolongées, mais nous vous promettons de vous recontacter au début de l'année prochaine.