Kompres gambar _

Cara kerja kompresi gambar berbasis browser

Setiap proses kompresi berjalan sepenuhnya dalam JavaScript. Tidak ada pustaka codec yang diunduh dan tidak ada server yang terlibat. Canvas API browser sendiri mendekode gambar, mengkodenya ulang pada kualitas yang lebih rendah, dan memberikan Blob yang dapat dipratinjau, diunduh, atau di-zip oleh halaman. Karena setiap langkah tetap berada di dalam sandbox tab, file asli tidak pernah menyentuh jaringan.

1. Membaca setiap file yang diunggah sebagai Blob dan membuat URL objek agar browser dapat mendekodenya secara lokal, tanpa menyalin byte ke server atau menulisnya ke disk.
2. Menggambar gambar yang didekode ke elemen Canvas layar luar pada dimensi piksel aslinya, siap untuk dikodekan ulang.
3. Memanggil canvas.toBlob(callback, mimeType, quality) untuk mengkode ulang piksel. Dalam mode kualitas, nilai slider langsung dipetakan ke pengaturan kuantisasi encoder; dalam mode ukuran target, halaman membagi nilai kualitas hingga output blob muat di bawah anggaran byte Anda.
4. Menampilkan pembacaan sebelum/sesudah dengan ukuran asli, ukuran yang dikompres, dan persentase penghematan, lalu menawarkan unduhan per gambar atau satu ZIP untuk seluruh batch. ZIP dibuat dalam memori menggunakan fflate, pustaka 8 KB yang dimuat pada penggunaan pertama.

Mengapa mengompres gambar?

• Gambar yang lebih kecil memuat lebih cepat. Memotong hero image 4 MB menjadi 600 KB secara langsung meningkatkan Largest Contentful Paint, yang merupakan salah satu Core Web Vitals yang digunakan Google untuk peringkat. Pada halaman dengan beberapa foto, penghematan bertambah menjadi cat pertama yang lebih cepat.
• Batas unggah dan lampiran ada di mana-mana. Banyak platform CMS, alat tiket, dan sistem email menolak file di atas 1 atau 2 MB. Proses kompresi cepat membuat foto berada di bawah batas tanpa Anda membuka editor penuh.
• Bandwidth dan penyimpanan membutuhkan biaya dalam skala besar. Mengirim WebP dengan kualitas 0,8 sebagai pengganti PNG berukuran penuh dapat memotong muatan gambar sebesar sepertiga atau lebih, yang menurunkan tagihan egress CDN dan penggunaan data seluler pengunjung Anda.
• Privasi penting untuk gambar sensitif. Karena semuanya berjalan di browser Anda, pemindaian KTP, gambar medis, dan tangkapan layar internal tetap ada di perangkat Anda — tidak ada unggahan ke server pihak ketiga seperti TinyPNG yang perlu dikhawatirkan.

Aplikasi umum

Kompresi diperlukan setiap kali gambar lebih besar dari tempat tujuannya. Tiga pola yang kami lihat berulang kali.

• Mempersiapkan foto produk untuk toko online. Asli JPEG dikompres ke kualitas 0,8 (atau target 200 KB) agar tampilan depan toko tetap cepat dan lolos Core Web Vitals di seluler.
• Mengecilkan tangkapan layar sebelum dilampirkan ke bug tracker atau wiki. Batch tangkapan PNG yang dikonversi ke JPEG pada kualitas 0,85 sering turun dari puluhan megabyte menjadi beberapa megabyte.
• Membuat foto berada di bawah batas unggah — portal lamaran kerja yang menolak file di atas 1 MB, sistem email dengan batas lampiran yang ketat, atau avatar forum yang harus muat dalam anggaran byte.

Contoh nyata: JPEG 4 MB ke 400 KB

JPEG 4 MB langsung dari kamera ponsel adalah muatan umum yang melanggar batas unggah dan memperlambat halaman. Ini adalah tolok ukur yang adil untuk apa yang disimpan kompresi.

Taruh JPEG ke zona unggah, biarkan format pada JPEG, lalu seret slider kualitas ke 0,7 atau beralih ke mode ukuran target dan ketik 400 KB. Dalam mode kualitas, pipeline Canvas mengkode ulang sekali dan menampilkan hasilnya, biasanya sekitar 500 hingga 700 KB tergantung fotonya. Dalam mode ukuran target, halaman mencoba beberapa nilai kualitas, memilih yang tertinggi yang masih muat di bawah 400 KB, dan melaporkan persentase penghematan. Klik Unduh pada kartu untuk mengambil file tunggal, atau klik Unduh .zip jika Anda mengompres beberapa gambar sekaligus. Seluruh proses berjalan jauh di bawah satu detik untuk gambar seukuran ini dan mengonsumsi nol bandwidth setelah halaman itu sendiri selesai dimuat.

Apa perbedaan antara mode kualitas dan mode ukuran target?

Mode kualitas memberi Anda satu slider dari 0,1 hingga 1,0 yang dipetakan ke pengaturan kuantisasi encoder JPEG atau WebP — angka lebih rendah berarti file lebih kecil dan artefak lebih terlihat. Mode ukuran target membalik masalah: Anda menyebut ukuran dalam kilobyte dan halaman membagi nilai kualitas, mengkode beberapa kali hingga menemukan kualitas tertinggi yang masih muat di bawah anggaran Anda. Ukuran target berguna ketika batas keras penting (batas unggah 1 MB, misalnya); mode kualitas lebih cepat dan lebih baik ketika Anda hanya menginginkan hasil visual yang dapat diprediksi. PNG bersifat lossless, sehingga tidak ada mode yang berlaku padanya.

Apakah ini terjadi di perangkat saya?

Ya, sepenuhnya. Halaman menggunakan Canvas API native browser dan Web File API untuk mendekode dan mengkode ulang setiap gambar dalam memori. Tidak ada data gambar yang dikirim ke server, tidak ada unggahan sementara, dan tidak ada perjalanan pulang-pergi ke cloud. Anda dapat memverifikasinya sendiri: buka DevTools, beralih ke panel Jaringan, dan jalankan kompresi. Satu-satunya permintaan keluar yang akan Anda lihat adalah muat halaman awal dan panggilan iklan. Tidak ada yang berbentuk gambar yang meninggalkan tab.

Mengapa mengompres PNG terkadang hampir tidak mengecilkannya?

PNG adalah format lossless, sehingga Canvas API tidak dapat membuang detail untuk membuatnya lebih kecil — ia hanya dapat mengemas ulang piksel yang sama. Untuk foto, PNG sudah besar dan pengkodean ulang lossless menyimpan sedikit. Keuntungan nyata datang dari beralih format output ke JPEG atau WebP, yang menggunakan kompresi lossy yang sesuai untuk foto dan secara rutin menghasilkan 4 hingga 10 kali lebih kecil. Pertahankan PNG hanya ketika Anda membutuhkan kualitas lossless atau transparansi; jika tidak, pilih JPEG untuk foto atau WebP untuk keseimbangan ukuran-kualitas terbaik.

Format mana yang harus saya pilih?

Untuk foto, WebP dengan kualitas 0,8 memberikan keseimbangan ukuran-kualitas terbaik dan didukung oleh setiap browser yang dikirimkan sejak 2021; JPEG adalah fallback universal yang aman ketika tujuan lebih lama atau lebih ketat. Pilih PNG hanya ketika Anda membutuhkan kualitas lossless atau saluran alfa — seni garis, tangkapan layar UI, logo dengan transparansi. Jika Anda mengoptimalkan kecepatan halaman dan audiens Anda menggunakan browser modern, WebP hampir selalu pilihan yang tepat; jika Anda memberi makan CMS lama atau pipeline cetak yang menolak WebP, tetap gunakan JPEG.

Taruh gambar Anda, pilih tingkat kualitas atau ukuran target, kompres. Semuanya berjalan di tab Anda. Tanpa unggahan, tanpa akun, tanpa menunggu antrean server.