Prise en charge des nouveaux codecs, mise à jour de la conception et compatibilité de la CLI !
Squoosh est une application de compression d'images créée par notre équipe et présentée lors du Chrome Dev Summit 2018. Nous l'avons conçu pour faciliter l'expérimentation avec différents codecs d'images et pour mettre en valeur les capacités du Web moderne.
Nous publions aujourd'hui une mise à jour majeure de l'application, qui offre une plus grande compatibilité avec les codecs, une nouvelle conception et une nouvelle façon d'utiliser Squoosh dans votre ligne de commande appelée Squoosh CLI.
Prise en charge des nouveaux codecs
Nous acceptons désormais OxiPNG, MozJPEG, WebP et AVIF, en plus des codecs nativement pris en charge dans votre navigateur. Un nouveau codec a de nouveau été rendu possible grâce à WebAssembly. En compilant un encodeur et un décodeur de codec en tant que module WebAssembly, les utilisateurs peuvent accéder à de nouveaux codecs et les tester, même si leur navigateur préféré ne les prend pas en charge.
Lancer une ligne de commande Squoosh
Depuis le lancement initial en 2018, les utilisateurs demandent souvent à interagir avec Squoosh de manière programmatique sans interface utilisateur. Nous avons eu un sentiment de conflit concernant ce chemin, car notre application était une UI basée sur des outils de codec basés sur la ligne de commande. Cependant, nous comprenons votre souhait d'interagir avec l'ensemble du paquet de codecs au lieu de plusieurs outils. C’est exactement ce que fait 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 à une 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 regrouper tous les éléments dans un seul fichier JavaScript afin que l'installation via npx soit rapide et fluide. La CLI propose également la compression automatique, qui tente de réduire la qualité d'une image autant que possible sans 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 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 d'intégrer automatiquement la compression d'images à votre processus de compilation.
Changement de processus de compilation de Webpack à Rollup
L'équipe qui a créé Squoosh a passé beaucoup de temps à étudier cette année les outils de création du rapport d'outils. Elle a donc décidé de passer de Webpack à Rollup.
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 de Rollup et la simplicité de l'ESM en faisaient un choix naturel pour ce projet.
Nouvelle conception de l'interface utilisateur
Nous avons également mis à jour l'interface utilisateur de l'application avec blobs comme élément visuel. C'est 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 en tant que blob. Il semble donc naturel d'inclure des blobs dans la conception.
L'utilisation des couleurs a également été affinée, de sorte que la couleur était plus qu'un accent, mais qu'elle était également 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 est un peu plus clair et concis.
Quelle est l'étape suivante ?
Nous prévoyons de continuer à travailler sur Squoosh. Avec le lancement du nouveau format d'image, nous voulons que nos utilisateurs puissent jouer avec le codec sans charge de travail. Nous espérons également étendre l'utilisation de la CLI Squoosh et l'intégrer davantage au processus de création d'une application Web.
Squoosh a toujours été Open Source, mais nous n'avons jamais mis l'accent 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.
Avez-vous des idées pour Squoosh ? Veuillez nous en informer via notre Issue Tracker. L'équipe prévoit de prolonger ses vacances d'hiver, mais nous vous promettons de vous recontacter au début de l'année.