Dukungan codec baru, desain yang diperbarui, dan dukungan CLI.
Squoosh adalah aplikasi kompresi gambar yang dibuat oleh tim kami dan diperkenalkan di Chrome Dev Summit 2018. Kami membangunnya untuk mempermudah eksperimen dengan berbagai codec gambar dan untuk menampilkan kemampuan web modern.
Hari ini, kami merilis update besar pada aplikasi dengan dukungan codec yang lebih banyak, desain baru, dan cara baru untuk menggunakan Squoosh di command line yang disebut Squoosh CLI.
Dukungan codec baru
Kami kini mendukung OxiPNG, MozJPEG, WebP, dan AVIF, selain codec yang didukung secara native di browser Anda. Codec baru dapat digunakan kembali dengan penggunaan WebAssembly. Dengan mengompilasi encoder dan decoder codec sebagai modul WebAssembly, pengguna dapat mengakses dan bereksperimen dengan codec yang lebih baru meskipun browser pilihan mereka tidak mendukungnya.
Meluncurkan command line Squoosh!
Sejak peluncuran awalnya pada tahun 2018, permintaan umum pengguna adalah berinteraksi dengan Squoosh secara terprogram tanpa UI. Kami merasa sedikit bertentangan dengan jalur ini karena aplikasi kami adalah UI di atas alat codec berbasis command line. Namun, kami memahami keinginan untuk berinteraksi dengan seluruh paket codec, bukan beberapa alat. Squoosh CLI melakukan hal tersebut.
Anda dapat menginstal Squoosh CLI versi beta dengan menjalankan npm i @squoosh/cli atau menjalankannya
secara langsung menggunakan npx @squoosh/cli [parameters].
CLI Squoosh ditulis dalam Node dan menggunakan modul WebAssembly yang sama persis dengan yang digunakan PWA. Melalui penggunaan worker yang ekstensif, semua gambar didekode, diproses, dan dienkode secara paralel.
Kami juga menggunakan Rollup untuk menggabungkan semuanya ke dalam satu file JavaScript guna memastikan penginstalan melalui
npx berjalan cepat dan lancar. CLI juga menawarkan kompresi otomatis, yang mencoba mengurangi kualitas gambar sebanyak mungkin tanpa menurunkan kualitas visual (menggunakan metrik Butteraugli).
Dengan Squoosh CLI, Anda dapat mengompresi gambar di aplikasi web ke beberapa format dan menggunakan elemen <picture> untuk memungkinkan browser memilih versi terbaik. Kami juga berencana membuat plugin untuk Webpack, Rollup, dan alat build lainnya untuk menjadikan kompresi gambar sebagai bagian otomatis dari proses build Anda.
Perubahan proses build dari Webpack ke Rollup
Tim yang sama yang membuat Squoosh telah menghabiskan banyak waktu untuk mempelajari alat build tahun ini untuk Tooling Report, dan memutuskan untuk mengalihkan proses build kami dari Webpack ke Rollup.
Project ini awalnya dimulai dengan Webpack karena kami ingin mencobanya sebagai tim, dan pada saat itu pada tahun 2018, Webpack adalah satu-satunya alat yang memberi kami kontrol yang cukup untuk menyiapkan project sesuai keinginan kami. Seiring waktu, kami menemukan bahwa sistem plugin Rollup yang mudah dan kesederhanaannya dengan ESM menjadikannya pilihan alami untuk project ini.
Desain UI yang diperbarui
Kami juga telah memperbarui desain UI aplikasi yang menampilkan blobs sebagai elemen visual. Ini adalah sedikit permainan kata tentang cara kami memperlakukan data dalam kode kami. Squoosh meneruskan data gambar sebagai blob, sehingga terasa alami untuk menyertakan beberapa blob dalam desain (paham?).
Penggunaan warna juga disempurnakan, sehingga warna tidak hanya menjadi aksen, tetapi juga vektor untuk membedakan dan memperkuat gambar mana yang sesuai dengan konteks untuk opsi. Secara keseluruhan, halaman beranda menjadi sedikit lebih menarik dan alat itu sendiri menjadi sedikit lebih jelas dan ringkas.
Apa langkah selanjutnya?
Kami berencana untuk terus mengembangkan Squoosh. Saat format gambar baru dirilis, kami ingin pengguna kami memiliki tempat untuk bereksperimen dengan codec tanpa perlu melakukan banyak hal. Kami juga berharap dapat memperluas penggunaan Squoosh CLI dan mengintegrasikannya lebih banyak ke dalam proses build aplikasi web.
Squoosh selalu bersifat open source, tetapi kami tidak pernah berfokus untuk mengembangkan komunitas. Pada tahun 2021, kami berencana untuk memperluas basis kontributor dan memiliki proses aktivasi yang lebih baik untuk project ini.
Apakah Anda punya ide untuk Squoosh? Harap beri tahu kami di issue tracker kami. Tim kami akan berlibur musim dingin yang lebih lama, tetapi kami berjanji akan menghubungi Anda kembali pada tahun baru.