Prise en charge de nouveaux codecs, conception mise à jour et prise en charge de l'interface de ligne de commande !
Squoosh est une application de compression d'images conçue par notre équipe et lancée lors du Chrome Dev Summit 2018. Nous l'avons conçu pour vous permettre de tester facilement différents codecs image et de montrer les capacités du Web moderne.
Aujourd'hui, nous publions une mise à jour majeure de l'application avec davantage de prise en charge des codecs, une nouvelle conception et une nouvelle façon d'utiliser Squoosh sur votre ligne de commande appelée Squoosh CLI.
Nouveaux codecs compatibles
Outre les codecs compatibles nativement avec votre navigateur, nous acceptons désormais OxiPNG, MozJPEG, WebP et AVIF. Un nouveau codec a été rendu possible grâce à WebAssembly. En compilant un encodeur et un décodeur de codec afin que les utilisateurs du module WebAssembly puissent accéder aux codecs les 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 souhaitaient souvent interagir avec Squoosh par programmation sans interface utilisateur. Ce chemin d'accès semblait un peu contradictoire, car notre application était une UI reposant sur des outils de codec basés sur la ligne de commande. Mais nous comprenons que vous souhaitez interagir avec l'ensemble des codecs plutôt qu'avec plusieurs outils. C'est exactement ce que fait la Squoosh CLI.
Vous pouvez installer la version bêta de la CLI Squoosh en exécutant npm i @squoosh/cli ou l'exécuter directement à l'aide de npx @squoosh/cli [parameters].
La CLI Squoosh est écrite en Node et utilise exactement les mêmes modules WebAssembly que la PWA. Grâce à l'utilisation intensive des nœuds de calcul, toutes les images sont décodées, traitées et encodées en parallèle.
Nous utilisons également la propriété de consolidation pour tout regrouper dans un seul fichier JavaScript afin de garantir que l'installation via npx est rapide et fluide. La CLI propose également une compression automatique, qui permet de réduire autant que possible la qualité d'une image sans en dégrader la fidélité visuelle (à l'aide de la métrique Butteraugli).
Avec la CLI Squoosh, vous pouvez compresser les images de votre application Web dans plusieurs formats et utiliser l'élément <picture> pour laisser le navigateur choisir la meilleure version. Nous prévoyons également de créer des plug-ins pour Webpack, Rollup et d'autres outils de compilation afin d'intégrer automatiquement la compression d'image à votre processus de compilation.
Passage du processus de compilation de Webpack à "Rollup"
Cette année, l'équipe qui a créé Squoosh a passé beaucoup de temps à se pencher sur les outils de compilation pour le rapport sur les outils. Elle a décidé de passer de Webpack à Rollup pour notre processus de compilation.
Le projet a commencé avec Webpack, car nous voulions l'essayer en équipe. À l'époque, en 2018, Webpack était le seul outil qui nous donnait suffisamment de contrôle pour configurer le projet comme nous le voulions. Au fil du temps, nous avons constaté que le système de plug-ins facile à utiliser et la simplicité d'ESM de Rollup représentaient le choix idéal pour ce projet.
Interface utilisateur repensée
Nous avons également modifié la conception de l'interface utilisateur de l'application, en intégrant 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 des données d'image sous forme de blob. Il était donc naturel d'inclure des blobs dans la conception.
L'utilisation des couleurs a également été affinée : la couleur était plus qu'un accent, mais aussi un vecteur pour distinguer et renforcer l'image en contexte pour les options. Dans l'ensemble, la page d'accueil est un peu plus dynamique et l'outil lui-même un peu plus clair et concis.
Quelle est la prochaine étape ?
Nous prévoyons de continuer à travailler sur Squoosh. Avec le nouveau format d'image, nous voulons offrir aux utilisateurs un espace leur permettant de jouer avec le codec sans effort. Nous espérons également étendre l'utilisation de la CLI Squoosh et en intégrer davantage dans le processus de création d'une application Web.
Squoosh a toujours été Open Source, mais nous ne nous sommes jamais concentrés sur le développement de la communauté. En 2021, nous prévoyons d'élargir notre base de contributeurs et d'améliorer le processus d'intégration au projet.
Vous avez des idées pour Squoosh ? Veuillez nous en informer via notre Issue Tracker. Notre équipe s'apprête à partir en vacances d'hiver prolongées, mais nous promettons de vous recontacter pour la nouvelle année.