Cara mengompresi gambar untuk web tanpa kehilangan kualitas

Gambar biasanya hal terberat di sebuah halaman web. Satu foto tanpa optimasi langsung dari kamera ponsel bisa berbobot beberapa megabyte — lebih besar daripada seluruh teks, kode, dan gaya sebuah situs digabung. Mengompresi gambar adalah perubahan paling berdampak yang bisa dilakukan kebanyakan orang untuk kecepatan halaman, dan bila dilakukan dengan baik, tak terlihat oleh pengunjung. Panduan ini membahas cara kerja kompresi gambar dan cara mengecilkan berkas tanpa penurunan kualitas yang kentara.

Mengapa ukuran gambar penting

Setiap kilobyte tambahan adalah data yang harus diunduh browser pengunjung sebelum bisa menampilkan halaman Anda. Pada koneksi desktop cepat mungkin tak terasa, tetapi pada jaringan seluler ia langsung menambah waktu muat, membuat pengguna frustrasi, dan merusak peringkat pencarian — Google memakai sinyal pengalaman halaman seperti kecepatan muat sebagai faktor peringkat. Gambar lebih kecil berarti halaman lebih cepat, tagihan bandwidth lebih rendah, dan pengunjung lebih senang.

Kompresi lossy vs. lossless

Ada dua cara yang secara mendasar berbeda untuk mengecilkan berkas gambar.

Kompresi lossless

Metode lossless mengemas data lebih efisien tanpa membuang apa pun — dekompresi mengembalikan salinan yang identik piksel-demi-piksel dengan aslinya. Aman, tetapi penghematannya sedang, biasanya 10–50%. PNG memakai kompresi lossless, itulah sebabnya ia bagus untuk logo, tangkapan layar, dan grafik dengan tepi tajam dan warna rata.

Kompresi lossy

Metode lossy membuang informasi yang tak mungkin diperhatikan mata manusia — variasi warna halus, detail lembut di area yang ramai — untuk mencapai penghematan jauh lebih besar, sering 70–90%. JPEG dan WebP memakai kompresi lossy. Kompromi ini dikendalikan oleh setelan kualitas: kualitas lebih rendah berarti berkas lebih kecil tetapi artefak lebih terlihat. Untuk foto, kompresi lossy pada tingkat kualitas yang masuk akal hampir selalu pilihan yang tepat.

Memilih format yang tepat

Format yang Anda pilih sama pentingnya dengan tingkat kompresi:

• JPEG — kuda beban untuk foto. Didukung luas di mana-mana. Kompresi bagus, tetapi tanpa transparansi.
• PNG — terbaik untuk grafik dengan garis tajam, teks, atau transparansi (logo, ikon, tangkapan layar). Lossless, jadi foto keluar besar.
• WebP — format modern yang biasanya menghasilkan berkas 25–35% lebih kecil dari JPEG pada kualitas visual yang sama, dan mendukung transparansi seperti PNG. Didukung semua browser saat ini. Untuk kebanyakan gambar web sekarang, WebP adalah default terbaik.
• SVG — sama sekali bukan format foto terkompresi, tetapi untuk logo dan ikon sederhana SVG vektor tetap setajam silet di ukuran apa pun dan sering hanya beberapa kilobyte.

Seberapa banyak kualitas yang bisa Anda korbankan?

Untuk format lossy, kualitas biasanya dinyatakan pada skala 0–100. Berlawanan dengan dugaan, ujung atas rentang itu boros: perbedaan antara kualitas 100 dan kualitas 80 sering mustahil dilihat, padahal kualitas 80 bisa separuh ukuran berkas. Titik awal yang praktis:

• Kualitas 75–85 — titik manis untuk kebanyakan foto web. Penghematan besar, tanpa kehilangan yang terlihat pada penampilan biasa.
• Kualitas 60–75 — cocok untuk gambar latar besar atau thumbnail yang ketajaman mutlaknya tidak krusial.
• Di bawah 60 — penghematan mendatar sementara artefak (langit kotak-kotak, halo di sekitar tepi) menjadi kentara. Biasanya tak sepadan.

Pendekatan terbaik adalah membandingkan, bukan menebak. Kompres pada kualitas tertentu, lihat hasilnya pada ukuran yang benar-benar ditampilkan, dan turunkan kualitas setahap demi setahap sampai Anda baru mulai melihat perbedaan — lalu naik satu tingkat.

Ubah ukuran sebelum mengompresi

Kompresi hanya bisa berbuat sebatas itu jika gambar jauh lebih besar dari yang diperlukan. Foto selebar 4000 piksel yang ditampilkan di kolom selebar 800 piksel membawa lima kali lebih banyak piksel daripada yang akan dilihat siapa pun. Mengubah ukuran gambar kira-kira ke dimensi tampilnya — lalu mengompresi — sering kali adalah penghematan tunggal terbesar. Pengubah ukuran gambar kami menangani pemotongan, rotasi, dan pengubahan ukuran dalam sekali jalan, sepenuhnya di browser Anda.

Alur kerja sederhana

1. Ubah ukuran gambar ke ukuran terbesar saat ia akan ditampilkan.
2. Pilih WebP bila bisa, JPEG untuk kompatibilitas maksimal, PNG untuk grafik dengan transparansi.
3. Kompres pada kualitas ~80 dan lihat hasilnya pada ukuran tampilan.
4. Turunkan kualitas sampai Anda menyadari perbedaan, lalu naik satu langkah.

Tiga langkah terakhir bisa Anda lakukan dalam hitungan detik dengan pengompres gambar kami: masukkan satu atau banyak gambar dan semuanya langsung dikompresi di perangkat Anda sendiri — tak ada yang diunggah ke server, jadi aman untuk foto pribadi. Bandingkan ukuran sebelum dan sesudah, lalu unduh saat Anda puas dengan hasilnya.