Nuovo supporto codec, design aggiornato e supporto CLI.
Squoosh è un'app di compressione delle immagini che il nostro team ha creato e presentato al Chrome Dev Summit 2018. L'abbiamo creata per semplificare la sperimentazione con diversi codec immagine e per mostrare le funzionalità del web moderno.
Oggi rilasciamo un aggiornamento importante dell'app con un maggiore supporto codec, un nuovo design e un nuovo modo per utilizzare Squoosh nella riga di comando chiamato Squoosh CLI.
Nuovo supporto codec
Ora supportiamo OxiPNG, MozJPEG, WebP e AVIF, oltre ai codec supportati in modo nativo nel tuo browser. Un nuovo codec è stato reso possibile ancora una volta grazie all'utilizzo di WebAssembly. Compilando un codificatore e un decodificatore di codec come modulo WebAssembly, gli utenti possono accedere e sperimentare con codec più recenti anche se il browser che preferiscono non li supporta.
Lancio di Squoosh da riga di comando.
Fin dal lancio originale nel 2018, una richiesta comune degli utenti era quella di interagire con Squoosh a livello di programmazione senza UI. Eravamo un po' in conflitto con questo percorso, poiché la nostra app era un'interfaccia utente basata su strumenti codec da riga di comando. Tuttavia, comprendiamo il desiderio di interagire con l' intero pacchetto di codec anziché con più strumenti. Squoosh CLI fa proprio questo.
Puoi installare la versione beta di Squoosh CLI eseguendo npm i @squoosh/cli o eseguirla
direttamente utilizzando npx @squoosh/cli [parameters].
Squoosh CLI è scritto in Node e utilizza gli stessi moduli WebAssembly utilizzati dalla PWA
utilizza. Grazie all'utilizzo estensivo dei worker, tutte le immagini vengono decodificate, elaborate e codificate in parallelo.
Utilizziamo anche Rollup per raggruppare tutto in un unico file JavaScript per assicurarci che l'installazione tramite
npx sia rapida e senza problemi. La CLI offre anche la compressione automatica, in cui tenta di ridurre il
più possibile la qualità di un'immagine senza degradare la fedeltà visiva
(utilizzando la metrica Butteraugli).
Con Squoosh CLI 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 anche di creare
plug-in per Webpack, Rollup e altri strumenti di compilazione per rendere la compressione delle immagini
una parte automatica del processo di compilazione.
Modifica del processo di compilazione da Webpack a Rollup
Lo stesso team che ha creato Squoosh ha trascorso una notevole quantità di tempo a esaminare gli strumenti di compilazione quest'anno per il report sugli strumenti e ha deciso di passare dal processo di compilazione da Webpack a Rollup.
Il progetto è stato avviato inizialmente con Webpack perché volevamo provarlo come team e, all' epoca, nel 2018, Webpack era l'unico strumento che ci dava un controllo sufficiente per configurare il progetto nel modo desiderato. Nel corso del tempo, abbiamo scoperto che il semplice sistema di plug-in e la semplicità di Rollup con ESM lo hanno reso una scelta naturale per questo progetto.
Design dell'interfaccia utente aggiornato
Abbiamo anche aggiornato il design dell'interfaccia utente dell'app con blobs come elemento visivo. È un piccolo
gioco di parole su come trattiamo i dati nel nostro codice. Squoosh passa i dati delle immagini come blob, quindi ci è sembrato
naturale includere alcuni blob nel design (capisci?).
Anche l'utilizzo dei colori è stato perfezionato, in modo che il colore non fosse solo un accento, ma anche un vettore per distinguere e rafforzare l'immagine nel contesto delle opzioni. Nel complesso, la home page è un po' più vivace e lo strumento stesso è un po' più chiaro e conciso.
Quali sono i prossimi passi?
Abbiamo in programma di continuare a lavorare su Squoosh. Man mano che viene rilasciato il nuovo formato immagine, vogliamo che i nostri utenti abbiano un posto in cui possano giocare con il codec senza dover fare sforzi eccessivi. Ci auguriamo anche di espandere l'utilizzo di Squoosh CLI e di integrarlo maggiormente nel processo di compilazione di un'applicazione web.
Squoosh è sempre stato open source, ma non ci siamo mai concentrati sulla crescita della community. Nel 2021, prevediamo di espandere la nostra base di contributori e di migliorare il processo di onboarding al progetto.
Hai qualche idea per Squoosh? Comunicacelo nel nostro strumento di monitoraggio dei problemi. Il team è in vacanza invernale prolungata, ma promettiamo di ricontattarti nel nuovo anno.