Dukungan codec baru, desain yang diperbarui, dan dukungan CLI!
Squoosh adalah aplikasi kompresi gambar yang dibuat dan didebutkan 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 tersebut dengan lebih banyak dukungan codec, desain baru, dan cara baru menggunakan Squoosh pada baris perintah Anda yang disebut Squoosh CLI.
Dukungan codec baru
Kini kami mendukung OxiPNG, MozJPEG, WebP, dan AVIF, selain codec yang telah didukung secara native di browser Anda. Codec baru dimungkinkan lagi dengan penggunaan WebAssembly. Dengan mengompilasi codec encoder dan decoder 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 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. Akan tetapi, kami memahami keinginan untuk berinteraksi dengan seluruh paket codec, bukan dengan banyak alat. Hal itu dilakukan oleh {i>Squoosh CLI<i}.
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 menggunakan 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 menggabungkan semuanya menjadi satu file JavaScript guna memastikan penginstalan melalui npx cepat dan lancar. CLI juga menawarkan kompresi otomatis, yang digunakan untuk mengurangi kualitas gambar sebanyak mungkin tanpa menurunkan fidelitas visual (menggunakan metrik Butteraugli).
Dengan Squoosh CLI, Anda dapat mengompresi gambar di aplikasi web ke berbagai format dan menggunakan elemen <picture> agar browser memilih versi terbaik. Kami juga berencana membangun
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 membangun Squoosh telah menghabiskan banyak waktu 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 saat ini Webpack adalah satu-satunya alat yang memberi kami kontrol yang cukup untuk menyiapkan project sesuai keinginan kami. Seiring waktu, kami telah menemukan sistem plugin mudah dari Rollup dan kesederhanaan dengan ESM menjadikannya pilihan yang wajar untuk project ini.
Desain UI yang diperbarui
Kami juga telah mengupdate desain UI aplikasi yang menampilkan blobs sebagai elemen visual. Ini adalah sedikit gambaran tentang
cara kita memperlakukan data dalam kode. Squoosh meneruskan data gambar sebagai blob, jadi terasa wajar untuk menyertakan beberapa blob dalam desain (mengerti?).
Penggunaan warna juga diasah, sehingga warna tersebut lebih dari sekadar aksen, tetapi juga merupakan vektor untuk membedakan dan memperkuat gambar yang ada dalam konteks pilihan. Secara keseluruhan, halaman beranda sedikit lebih dinamis dan alatnya 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 codec tanpa kesulitan. Kami juga berharap dapat memperluas penggunaan Squoosh CLI dan mengintegrasikan lebih banyak ke dalam proses build aplikasi web.
Squoosh selalu bersifat open source, tetapi kami tidak pernah fokus mengembangkan komunitas ini. Pada tahun 2021, kami berencana memperluas basis kontributor dan menerapkan proses orientasi yang lebih baik ke project.
Apakah kamu punya ide untuk Squoosh? Beri tahu kami di issue tracker kami. Tim akan pergi ke liburan musim dingin yang lebih lama, tetapi kami berjanji untuk kembali bertemu Anda di tahun baru.