Supporto di nuovi codec, design aggiornato e supporto dell'interfaccia a riga di comando.
Squoosh è un'app per la compressione delle immagini che il nostro team ha creato e ha debuttato al Chrome Dev Summit 2018. L'abbiamo sviluppata per semplificare gli esperimenti con diversi codec di immagini e per mostrare le capacità del web moderno.
Oggi rilasciamo un aggiornamento importante dell'app con supporto di più codec, un nuovo design e un nuovo modo di usare Squoosh sulla riga di comando: l'interfaccia a riga di comando di Squoosh.
Supporto di nuovi codec
Ora sono supportati OxiPNG, MozJPEG, WebP e AVIF, oltre ai codec supportati in modo nativo nel browser. Un nuovo codec è stato reso di nuovo possibile con l'uso di WebAssembly. Compilando un codec e un decoder come modulo WebAssembly gli utenti possono accedere e sperimentare con i codec più recenti anche se il loro browser preferito non li supporta.
Avvio di uno Squoosh dalla riga di comando.
Sin dal lancio originale nel 2018, la richiesta comune degli utenti era di interagire con Squoosh in modo programmatico senza UI. Ci sembrava un po' in conflitto su questo percorso, dato che la nostra app era una UI in cima a strumenti codec basati sulla riga di comando. Tuttavia, comprendiamo il desiderio 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 Squoosh eseguendo npm i @squoosh/cli o eseguendola 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'utilizzo estensivo 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 in modo da garantire che l'installazione tramite npx sia rapida e fluida. L'interfaccia a riga di comando offre anche la compressione automatica, in cui prova a ridurre il più possibile la qualità di un'immagine senza comprometterne la fedeltà visiva (utilizzando la metrica Butteraugli).
Con l'interfaccia a riga di comando di 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 sviluppare plug-in per Webpack, Rollup e altri strumenti di creazione in modo da rendere automatica la compressione delle immagini nel processo di compilazione.
Modifica del processo di build da Webpack a Rollup
Quest'anno lo stesso team che ha creato Squoosh ha dedicato molto tempo agli strumenti di creazione per il report sugli strumenti e ha deciso di cambiare il nostro processo di build da Webpack a Rollup.
Il progetto è nato inizialmente con Webpack perché volevamo provarlo come team e, all'epoca, nel 2018 Webpack era l'unico strumento che ci diede il controllo sufficiente per configurare il progetto nel modo che volevamo. Nel corso del tempo, abbiamo notato che il sistema di plug-in di Rollup è semplice e che grazie all'ESM lo ha reso una scelta naturale per questo progetto.
Design aggiornato dell'interfaccia utente
Abbiamo anche aggiornato il design dell'interfaccia utente dell'app che include blobs come elemento visivo. Questo è un piccolo motto sul modo in cui trattiamo i dati nel nostro codice. Squoosh trasmette i dati dell'immagine sotto forma di blob, quindi è stato naturale
includere delle macchie nel design (capiscilo?).
Anche l'utilizzo del colore è stato perfezionato, in modo che il colore non fosse solo un accento, ma anche un vettore per distinguere e consolidare 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.
Qual è il passaggio successivo?
Abbiamo intenzione di continuare a lavorare su Squoosh. Con l'uscita del nuovo formato immagine, vogliamo che i nostri utenti abbiano un posto dove giocare con il codec senza dover fare il resto. Speriamo di estendere l'utilizzo dell'interfaccia a riga di comando di 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 prevediamo di espandere la nostra base di collaboratori e migliorare il processo di onboarding del progetto.
Hai un'idea per Squoosh? Faccelo sapere sul nostro strumento di monitoraggio dei problemi. Il team si sta preparando per le vacanze invernali prolungate, ma ti promettiamo di ritornarti l'anno nuovo.