Kompres Gambar Online — JPEG, PNG & WebP

Apa Itu Kompresi Gambar?

// Compress a JPEG image in the browser using the Canvas API
async function compressImage(file, quality = 0.75) {
  const img = await createImageBitmap(file); // decode the image
  const canvas = document.createElement('canvas');
  canvas.width = img.width;
  canvas.height = img.height;
  canvas.getContext('2d').drawImage(img, 0, 0);
  // quality: 0.0 (smallest file) → 1.0 (original quality)
  return new Promise((resolve) =>
    canvas.toBlob(resolve, 'image/jpeg', quality)
  );
}

// file comes from an <input type="file"> or drag-and-drop
const blob = await compressImage(file, 0.75);
console.log(`Original:   ${file.size} bytes`);
console.log(`Compressed: ${blob.size} bytes`);
// → Original:   2100000 bytes
// → Compressed:  672000 bytes  (~68% reduction)

Fitur Utama

JPEG vs PNG vs WebP

Contoh Kompresi

photo-landscape.jpg (2.1 MB, 4000×3000)

photo-landscape.jpg (680 KB at quality 75)

logo-transparent.png (43 KB, 1200×800)

logo-transparent.png (19 KB pada kualitas 80)

hero-banner.webp (800 KB, 1920×1080)

hero-banner.webp (250 KB at quality 75)

Cara Mengompres Gambar Online

1. 1

   Unggah Gambar Anda

   Seret dan lepas gambar ke area upload, atau klik untuk memilih file Anda. Anda dapat memilih hingga 20 gambar JPEG, PNG, atau WebP sekaligus, masing-masing hingga 10MB.

2. 2

   Atur Kualitas

   Gunakan slider kualitas untuk mengatur tingkat kompresi yang diinginkan (0–100). Default-nya adalah 75, yang menawarkan keseimbangan yang baik. Perhatikan ukuran file dan rasio kompresi yang diperbarui secara real-time.

3. 3

   Unduh Hasil

   Klik Unduh pada file individual mana pun, atau gunakan Unduh Semua untuk menyimpan semua gambar yang telah dikompres. Gunakan tombol Bandingkan untuk memeriksa kualitas secara visual sebelum mengunduh.

Kasus Penggunaan

Optimasi Performa Website

Kurangi ukuran file gambar sebelum mengunggah ke website Anda. Gambar yang lebih kecil dimuat lebih cepat, meningkatkan skor Core Web Vitals (terutama Largest Contentful Paint), mengurangi biaya bandwidth, dan meningkatkan peringkat SEO.

Pengurangan Ukuran Lampiran Email

Kompres gambar sebelum melampirkannya ke email agar tetap dalam batas ukuran lampiran (biasanya 10–25MB). Batch 20 foto seringkali dapat dikompres dari 50MB menjadi di bawah 10MB.

Persiapan Upload Media Sosial

Pra-kompres gambar sebelum mengunggah ke platform media sosial. Meskipun platform mengompres ulang gambar secara otomatis, memulai dengan file yang dikompres optimal memberi Anda lebih banyak kontrol atas kualitas akhir.

Optimasi Aset Aplikasi dan Game

Kompres aset UI, tekstur, dan sprite untuk aplikasi mobile, game, dan progressive web app. Aset yang lebih kecil berarti unduhan lebih cepat, penggunaan penyimpanan lebih sedikit, dan pengalaman pengguna yang lebih lancar.

Optimasi Dokumen dan Presentasi

Kurangi ukuran gambar yang disematkan dalam PDF, dokumen Word, dan presentasi. Slide deck 50MB dengan foto resolusi tinggi seringkali dapat dikurangi menjadi 10MB tanpa kehilangan kualitas yang terlihat.

Detail Teknis

Kompresi Canvas API

Alat ini menggunakan metode toBlob() dari HTML5 Canvas API untuk kompresi. Gambar digambar pada elemen canvas tersembunyi, kemudian di-encode ulang dengan parameter kualitas yang ditentukan. Untuk JPEG dan WebP, parameter kualitas (0.0–1.0) mengontrol tingkat kompresi lossy. Untuk PNG, Canvas API mengabaikan parameter kualitas sepenuhnya — encoding PNG melalui Canvas selalu lossless.

Kuantisasi Palet PNG

Karena Canvas toBlob() mengabaikan parameter kualitas untuk PNG, output PNG sama sekali tidak melewati Canvas. Sebagai gantinya gambar dikuantisasi ke sebuah palet warna: slider kualitas menentukan ukuran palet — kualitas 75 menghasilkan 192 warna — dan hasilnya ditulis kembali sebagai PNG sungguhan dengan kanal alfa yang utuh. Kualitas 100 berarti encoding ulang lossless yang tidak mengubah satu piksel pun. Jika file hasil kuantisasi tidak lebih kecil dari aslinya, alat ini membuangnya dan mempertahankan byte asli Anda.

Perilaku Parameter Kualitas

Slider kualitas dipetakan ke parameter kualitas Canvas toBlob(): 100 = 1.0 (kualitas tertinggi, file terbesar), 0 = 0.0 (kualitas terendah, file terkecil). Untuk JPEG, kualitas 75 (0.75) umumnya merupakan titik optimal — di bawah 50, artefak menjadi terlihat. Untuk WebP, nilai kualitas yang sama menghasilkan file sedikit lebih kecil dari JPEG dengan kualitas visual sebanding.

Memori Browser dan Batas

Setiap gambar ada di memori sebagai objek File asli dan Blob terkompres, ditambah dua object URL untuk tampilan pratinjau. Dengan 20 gambar masing-masing 10MB, penggunaan memori puncak dapat mencapai sekitar 400MB. Object URL dicabut ketika gambar dihapus atau halaman ditutup untuk mencegah kebocoran memori.

Praktik Terbaik

Mulai dari Kualitas 75 untuk JPEG/WebP

Kualitas 75 adalah titik awal yang direkomendasikan untuk sebagian besar kasus penggunaan. Ini biasanya mengurangi ukuran file sebesar 60–80% dengan kehilangan kualitas visual minimal. Hanya tingkatkan kualitas di atas 85 untuk gambar yang memerlukan preservasi detail halus (misalnya pencitraan medis, fotografi berkualitas cetak).

Gunakan WebP Bila Memungkinkan

WebP menghasilkan file 25–35% lebih kecil dari JPEG pada kualitas visual yang sama dan mendukung transparansi seperti PNG. Semua browser modern mendukung WebP sejak 2024. Konversi gambar JPEG dan PNG ke WebP untuk rasio kompresi-ke-kualitas terbaik di web.

Simpan File Asli

Selalu simpan gambar asli yang belum dikompres sebagai file sumber. Kompresi lossy bersifat permanen — mengompres ulang gambar yang sudah dikompres akan menurunkan kualitas lebih lanjut tanpa pengurangan ukuran yang signifikan (dikenal sebagai generation loss).

Periksa Kualitas Sebelum Mengunduh

Gunakan tombol Bandingkan untuk memeriksa artefak kompresi secara visual sebelum mengunduh. Perhatikan khususnya area dengan teks, tepi tajam, dan gradien halus — di sinilah artefak JPEG paling terlihat.

Batch Gambar Serupa Bersama

Gambar dengan karakteristik serupa (jenis subjek, resolusi, kedalaman warna yang sama) dikompres paling baik dengan pengaturan kualitas yang sama. Batch foto Anda secara terpisah dari grafis/logo untuk hasil optimal.

Pertanyaan yang Sering Diajukan