Squoosh.app: Kompresi Gambar Tanpa Upload ke Server Berkat WebAssembly

Squoosh.app adalah image compression web app yang dibuat oleh tim Google Chrome Labs. Tampilannya bersih, gratis, open source dan tentunya bebas iklan. Cek source codenya disini.

Yang membuat Squoosh unik adalah cara kerjanya. Berbeda dengan tools online lain yang mengharuskan kita mengunggah (upload) gambar ke server mereka untuk diproses, Squoosh melakukan semuanya di sisi klien (client-side).

Squoosh memanfaatkan teknologi WebAssembly. Sederhananya, mereka membawa codec gambar yang kompleks (biasanya ditulis dengan C/C++) dan menjalankannya langsung di browser. Jadi, gambar kita tidak pernah meninggalkan device. Privasi tetap aman dan prosesnya cepat (tergantung spesifikasi device kalian).

Fitur Utama Squoosh yang wajib dicoba untuk web performance adalah:

• Format Next-Gen: Dukungan convert ke AVIF dan WebP (Format yang sangat disukai Google PageSpeed).
• Visual Comparison: Ada slider geser kanan-kiri untuk melihat perubahan kualitas secara real-time.
• Advanced Settings: Bisa dipakai untuk mengatur quantization, resize, hingga palette reduction untuk kalian yang paham teknis dunia image processing.

Cara Penggunaan (Singkat Saja)

1. Buka squoosh.app.
2. Drag & drop gambar. (Bahkan bisa Paste langsung dari Clipboard)
3. Pilih format target (misal: MozJPEG untuk foto, WebP untuk grafis).
4. Jangan malu-malu untuk geser slider kualitas sampai ukuran file yang diinginkan tercapai.
5. Download. Simpel.

Untuk web developer yang peduli dengan Core Web Vitals, atau blogger yang ingin hemat storage hosting, atau bahkan konten kreator yang ingin ukuran gambar tidak memenuhi disk. Squoosh adalah tool wajib yang harus di-bookmark. Selain gratis, kita juga belajar betapa powerful-nya browser modern saat ini.

Mengintip Jeroan Squoosh

Karna Squoosh adalah project open source, saya menyempatkan diri menelisik dan meng-clone project tersebut ke local. Project ini cukup fenomenal karna beberapa codecs menggunakan library dari Rust, tanpa mereka (developer Squoosh) menulis ulang lagi sebelum transpile ke WebAssembly.

Squoosh memilih Preact sebagai motor utama antarmukanya. Framework ini tergolong ‘kecil-kecil cabai rawit’, ukurannya sangat minimalis tapi memiliki performa yang bandel dan tangguh. Setara kakak kembarnya, React, tapi versi compact.

Kebetulan, saya pribadi cukup sering mengandalkan Preact dalam pengembangan berbagai proyek Browser Extension karena efisiensinya yang luar biasa. 😂

Sama seperti di Browser Extension, di mana setiap byte itu sangatlah amat berharga agar loading terasa instan. Maka, saya cukup yakin, alasan Squoosh menggunakan Preact adalah agar UI mereka tetap responsif saat main-thread sedang sibuk mengolah gambar.

---

Berlanjut ke bagian source code utama dari Squoosh, ini adalah sedikit gambaran peta struktur dari core codecs utama Squoosh:

Squoosh/
├── codecs/                   
│   ├── mozjpeg/              # Codec untuk MozJPEG (C++)
│   ├── oxipng/               # Codec untuk OxiPNG (Rust)
│   ├── avif/                 # Codec AVIF encoder
│   ├── ...                   # (Setiap folder berisi Makefile/Dockerfile untuk build ke WASM)
│
├── src/
│   ├── ...
│   ├── features/             <-- Features adalah penjembatan antara codecs dengan UI
│   │   ├── encoders/         # Logika Encoder (Penulis gambar)
│   │   │   ├── mozJPEG/      # Contoh implementasi fitur MozJPEG
│   │   │   │   ├── client/   # UI settings (slider quality, dsb)
│   │   │   │   └── worker/   # Script yang memanggil WASM di background
│   │   │   └── ...

Folder /codecs di dalam Squoosh adalah bagian paling “hardcore” dari project ini. Di sinilah letak perbedaan Squoosh dengan image resizer biasa.

• /codecs/ tempat kode sumber asli dari library kompresi gambar terkenal yang ditulis dalam C, C++, maupun Rust.
• Squoosh tidak menulis ulang algoritma kompresi JPEG/PNG dalam JavaScript. Sebaliknya, mereka mengambil library native (seperti mozjpeg dari C atau oxipng dari Rust) dan mengompilasinya menjadi WebAssembly (.wasm) menggunakan toolchain seperti Emscripten.
• Ada yang unik di dalamnya, dimana terdapat Dockerfile atau Makefile di setiap subfolder. Dan membuktikan bahwa setiap codec dibuild dalam isolated world untuk memastikan hasil binary WASM yang konsisten.

Inti dari project Squoosh adalah penjembatan antara JavaScript dan C++/Rust.

Meski secara UI mereka menggunakan framework Preact, tapi didalamnya banyak orchestration kompleks yang menjembatani library low-level (C++/Rust) agar bisa berjalan aman dan cepat di dalam browser modern menggunakan WebAssembly dan Web Workers.