Mengumumkan Squoosh v2

Dukungan codec baru, desain yang diperbarui, dan dukungan CLI!

Mariko Kosaka

Squoosh adalah aplikasi kompresi gambar yang dibuat dan diperkenalkan oleh tim kami di Chrome Dev Summit 2018. Kami membuatnya untuk memudahkan eksperimen dengan berbagai codec gambar, dan untuk menampilkan kemampuan web modern.

Hari ini, kami merilis update besar untuk aplikasi dengan lebih banyak dukungan codec, desain baru, dan cara baru untuk menggunakan Squoosh di command line bernama Squoosh CLI.

Dukungan codec baru

Kini kami mendukung OxiPNG, MozJPEG, WebP, dan AVIF, selain codec yang didukung secara native di browser Anda. Codec baru kembali terwujud 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 aslinya pada tahun 2018, permintaan pengguna yang umum 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 itu.

Anda dapat menginstal Squoosh CLI versi beta dengan menjalankan npm i @squoosh/cli atau menjalankannya secara langsung menggunakan npx @squoosh/cli [parameters].

Squoosh CLI ditulis dalam Node dan memanfaatkan modul WebAssembly yang sama persis dengan yang digunakan PWA. Melalui penggunaan pekerja yang ekstensif, semua gambar didekode, diproses, dan dienkode secara paralel. Kami juga menggunakan Rollup untuk memaketkan semuanya menjadi satu file JavaScript guna memastikan penginstalan melalui npx dilakukan dengan cepat dan lancar. CLI juga menawarkan kompresi otomatis untuk mengurangi kualitas gambar sebanyak mungkin tanpa menurunkan fidelitas visual (menggunakan metrik Butteraugli).

Dengan Squoosh CLI, Anda dapat mengompresi gambar di aplikasi web ke beberapa format dan menggunakan elemen <picture> agar browser dapat memilih versi terbaik. Kami juga berencana membangun plugin untuk Webpack, Rollup, dan alat build lainnya guna menjadikan kompresi gambar sebagai bagian otomatis dari proses build Anda.

Perubahan proses build dari Webpack ke Rollup

Tim yang sama yang membangun Squoosh telah menghabiskan banyak waktu untuk mempelajari alat build tahun ini untuk Tooling Report, dan memutuskan untuk mengalihkan proses build dari Webpack ke Rollup.

Project ini awalnya dimulai dengan Webpack karena kami ingin mencobanya sebagai tim, dan saat itu di tahun 2018, Webpack adalah satu-satunya alat yang memberi kami kontrol yang cukup untuk menyiapkan project sesuai keinginan kami. Seiring waktu, kami menemukan sistem plugin yang mudah dari Rollup, dan kesederhanaan dalam 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 contoh singkat tentang cara kita memperlakukan data di kode kita. Squoosh meneruskan data gambar sebagai blob, jadi terasa alami jika menyertakan beberapa blob dalam desainnya (mengerti?).

Penggunaan warna juga diasah, sehingga warna lebih dari sekadar aksen, tetapi juga vektor untuk membedakan dan memperkuat gambar mana yang sesuai dengan konteks opsi. Secara keseluruhan, beranda sedikit lebih dinamis dan alatnya sendiri sedikit lebih jelas dan ringkas.

Apa selanjutnya?

Kami berencana untuk terus mengerjakan Squoosh. Saat format gambar baru dirilis, kami ingin pengguna memiliki tempat untuk bermain dengan codec tanpa kesulitan. Kami juga berharap dapat memperluas penggunaan Squoosh CLI dan lebih banyak mengintegrasikannya ke dalam proses build aplikasi web.

Squoosh selalu menjadi {i>open source<i} tetapi kami tidak pernah fokus untuk mengembangkan komunitas. Pada tahun 2021, kami berencana memperluas basis kontributor dan memiliki proses orientasi yang lebih baik untuk project.

Apakah Anda punya ide untuk Squoosh? Beri tahu kami di Issue Tracker kami. Tim ini akan liburan musim dingin yang diperpanjang, tetapi kami berjanji akan menghubungi Anda kembali di tahun baru.