Catatan dari tim tentang keahlian, format, dan keputusan kecil di balik pemotongan bulat yang baik.
Arsitektur dua jalur dijelaskan
Pratinjau slider dan encode Unduh adalah dua jalur kode terpisah. Pratinjau menggunakan API canvas.toBlob bawaan browser, yang berjalan secara sinkron di thread compositor GPU. Setiap gerakan slider memicu panggilan canvas.toBlob baru dengan nilai kualitas baru, hasilnya digambar ke canvas split-view. Ini sepenuhnya lokal, kamu bisa memverifikasinya dengan membuka DevTools, tab Network, memfilter compress, dan mengamati, nol request muncul selama interaksi slider. Tombol Unduh memicu jalur kode yang sama sekali berbeda. Tombol itu mem-POST file asli (tidak dimodifikasi) ke Cloudflare Worker kami di /api/compress, yang mem-proxy ke server Fastify yang menjalankan Node 24 dan paket sharp (lisensi Apache 2.0) didukung libvips 8.x (LGPL-3.0). Hasil encode dikembalikan di body respons dan disimpan ke folder unduhan browser. Dua jalur, satu alat.
Mengapa encode server mengalahkan encode browser
Encoder JPEG browser menggunakan libjpeg atau implementasi khusus browser yang tidak punya tuning tabel chroma subsampling MozJPEG. MozJPEG, codec yang dipanggil libvips untuk JPEG, dikembangkan di Mozilla pada 2014 sebagai pengganti drop-in libjpeg-turbo dengan fokus menghasilkan file lebih kecil pada kualitas perseptual yang sama. Dalam benchmark yang dijalankan di 50 foto beragam (margasatwa, potret, foto produk, tangkapan layar), encode libvips dan MozJPEG pada kualitas 78 menghasilkan file 10 hingga 20 persen lebih kecil dari canvas.toBlob Chrome pada nilai kualitas yang sama. Untuk PNG, perbedaannya lebih besar, browser menggunakan zlib dengan kompresi default, sementara pnpngquant mengurangi palet warna ke minimum yang dibutuhkan, biasanya memangkas file PNG tidak teroptimasi sebesar 30 hingga 70 persen.
AVIF: apa itu dan kapan menggunakannya
AVIF didasarkan pada prediksi intra-frame codec video AV1, dikembangkan oleh Alliance for Open Media. Format ini mencapai efisiensi kompresi lebih baik daripada JPEG dengan memprediksi nilai piksel di wilayah yang lebih besar dan merepresentasikan residual secara lebih ringkas. Hasil praktisnya adalah file AVIF pada kualitas 60 sering tidak bisa dibedakan secara visual dari file JPEG pada kualitas 80, sambil 40 hingga 60 persen lebih kecil. Trade-off-nya adalah waktu encode, di server kami, foto 8 MP pada kualitas 60 butuh 3 hingga 8 detik dengan libaom-av1. Dukungan browser kuat pada 2026 (Chrome, Firefox, Safari, Edge semua decode AVIF). Alat ini menampilkan hitungan byte AVIF secara real-time bersama JPG dan WebP sehingga kamu bisa memutuskan apakah penghematan ukuran sepadan dengan sedikit waktu tunggu encode untuk alur kerjamu.
Pengaturan kualitas dalam praktik
Slider memetakan langsung ke parameter q encoder untuk format lossy. Pada kualitas 80, pengaturan ini cocok dengan label High di Adobe Photoshop saat mengekspor JPEG, dan default yang dipakai sebagian besar alur kerja profesional. Pada kualitas 60, foto 4 MP rata-rata terkompres menjadi sekitar 200 hingga 400 KB, cukup kecil untuk sebagian besar penggunaan email dan web, dan kehilangan detail hanya terlihat di area tekstur halus pada zoom 1:1. Di bawah kualitas 50, artefak kompresi berbentuk blok mulai muncul di gradien halus dan warna kulit, terlihat bahkan pada jarak pandang normal di layar retina. Di bawah kualitas 30, output bisa dikenali tapi jelas terkompres, hanya cocok untuk pratinjau thumbnail. Penghitung byte di atas slider menampilkan ukuran output persis dalam KB saat kamu menggeser, bukan estimasi.
Pembersihan metadata dan mengapa itu penting
Kedua jalur membersihkan EXIF, GPS, dan metadata kamera dari output secara default. Ini adalah perilaku benar dari libvips dan sharp pada konfigurasi defaultnya, dan punya dua efek praktis. Pertama, ini menghapus data lokasi yang berpotensi sensitif yang ditanamkan kamera smartphone, yang merupakan manfaat privasi untuk gambar yang dibagikan secara publik. Kedua, ini sedikit mengurangi ukuran file (blok EXIF biasa berukuran 10 hingga 40 KB). Tag orientasi visual ditangani secara terpisah, alat ini membaca field orientasi EXIF sebelum pembersihan dan memutar gambar sebelumnya sehingga output diorientasikan dengan benar. Jika kamu perlu mempertahankan metadata untuk alur kerja forensik, pengarsipan, atau cetak, kamu sebaiknya menggunakan editor metadata khusus sebelum mengompres.
Format yang didukung: apa yang masuk dan apa yang keluar
Input menerima JPG, PNG, WebP, dan AVIF di setiap browser modern, divalidasi dengan sniff magic-byte bukan ekstensi file saja. GIF diterima di Chrome dan Firefox tapi hanya frame pertama yang diproses (animasi tidak dipertahankan), jadi GIF beranimasi tidak boleh dikompres dengan alat ini. HEIC dari iPhone bekerja di Safari, yang punya decoder HEIC bawaan, tapi Chrome dan Firefox tidak melakukan decode HEIC secara native. Output bisa berupa JPG, PNG, WebP, atau AVIF terlepas dari format input, jadi kamu juga bisa menggunakan alat ini sebagai jalur convert-dan-kompres satu langkah. Jalur server menerima file hingga 25 MB. File di atas batas itu diproses oleh encoder browser fallback sebagai gantinya.