Supporto di nuovi codec, design aggiornato e supporto dell'interfaccia a riga di comando.
Squoosh è un'app di compressione delle immagini creata dal nostro team e presentata al Chrome Dev Summit 2018. L'abbiamo sviluppato per semplificare la sperimentazione con diversi codec di immagine e per mostrare le funzionalità del web moderno.
Oggi rilasceremo un aggiornamento importante dell'app con supporto per più codec, un nuovo design e un nuovo modo di utilizzare Squoosh sulla riga di comando, chiamato CLI Squoosh.
Supporto per nuovi codec
Ora sono supportati OxiPNG, MozJPEG, WebP e AVIF, oltre ai codec nativi supportati nel browser. L'uso di WebAssembly ha reso nuovamente possibile un nuovo codec. Compilando un codificatore e decodificatore come modulo WebAssembly, gli utenti possono accedere e sperimentare i codec più recenti anche se il loro browser preferito non li supporta.
Avvio di una riga di comando Squoosh!
Fin dal lancio originale nel 2018, una richiesta comune degli utenti era interagire con Squoosh in modo programmatico senza UI. Abbiamo riscontrato un po' di conflitto su questo percorso perché la nostra app era una UI in cima a strumenti codec a riga di comando. Tuttavia, comprendiamo la volontà di interagire con l'intero pacchetto di codec anziché con più strumenti. L'interfaccia a riga di comando Squoosh fa proprio questo.
Puoi installare la versione beta dell'interfaccia a riga di comando di Squoosh eseguendo npm i @squoosh/cli o eseguirla direttamente utilizzando npx @squoosh/cli [parameters].
L'interfaccia a riga di comando Squoosh è scritta in Node e utilizza gli stessi moduli WebAssembly utilizzati dalla PWA. Grazie all'ampio utilizzo dei worker, tutte le immagini vengono decodificate, elaborate e codificate in parallelo.
Utilizziamo anche la funzionalità di aggregazione per raggruppare tutti i dati in un unico file JavaScript per fare in modo che l'installazione tramite npx sia rapida e senza intoppi. L'interfaccia a riga di comando offre anche la compressione automatica, per ridurre il più possibile la qualità di un'immagine senza compromettere la fedeltà visiva (utilizzando la metrica Butteraugli).
Con l'interfaccia a riga di comando Squoosh, puoi comprimere le immagini nella tua app web in più formati e utilizzare l'elemento <picture> per consentire al browser di scegliere la versione migliore. Prevediamo inoltre di creare plug-in per Webpack, Rollup e altri strumenti di creazione per fare in modo che la compressione delle immagini diventi una parte automatica del processo di compilazione.
Modifica del processo di creazione da Webpack a Riepilogo
Lo stesso team che ha creato Squoosh ha dedicato molto tempo all'analisi degli strumenti di creazione quest'anno per il report sugli strumenti e ha deciso di passare dal processo di creazione Webpack a quello di aggregazione.
Il progetto è stato inizialmente avviato con Webpack perché volevamo provarlo in team e, all'epoca, nel 2018 Webpack era l'unico strumento che ci dava abbastanza controllo per configurare il progetto come volevamo. Nel corso del tempo, abbiamo scoperto che il semplice sistema di plug-in di Rollup e la semplicità con l'ESM lo hanno reso una scelta naturale per questo progetto.
Design aggiornato dell'interfaccia utente
Abbiamo anche aggiornato il design dell'interfaccia utente dell'app che mostra blobs come elemento visivo. Dipende da come trattiamo i dati nel nostro codice. Squoosh trasmette i dati delle immagini come un blob, quindi sembrava naturale includere alcune macchie nel design (comprendi?).
Anche l'utilizzo del colore è stato perfezionato, in modo che il colore sia più che un accento, ma anche un vettore per distinguere e rafforzare l'immagine che si trova nel contesto delle opzioni. Nel complesso, la home page è un po' più vivace e lo strumento in sé è un po' più chiaro e conciso.
Passaggi successivi
Abbiamo intenzione di continuare a lavorare a Squoosh. Con il lancio del nuovo formato delle immagini, vogliamo che i nostri utenti abbiano un luogo in cui giocare con il codec senza sforzi. Speriamo anche di estendere l'utilizzo dell'interfaccia a riga di comando Squoosh e di integrarne di più nel processo di creazione di un'applicazione web.
Squoosh è sempre stato open source, ma non ci siamo mai concentrati sulla crescita della community. Nel 2021, abbiamo in programma di ampliare la base di collaboratori e migliorare la procedura di onboarding del progetto.
Hai qualche idea per Squoosh? Faccelo sapere tramite l'Issue Tracker. Il team sta per prolungare le vacanze invernali, ma promettiamo di risponderti nel nuovo anno.