Cara mengompres gambar untuk website

Satu foto yang belum dioptimalkan bisa lebih berat daripada seluruh sisa halaman digabung. Membenahi gambar adalah cara termurah untuk mendongkrak performa, dan langsung memengaruhi Largest Contentful Paint — salah satu Core Web Vitals yang jadi patokan peringkat Google.

1. Ubah ukuran sesuai tampilan sebenarnya

Gambar hero yang ditampilkan selebar 1200 px tidak butuh resolusi 4000 px. Buka Ubah ukuran gambar, atur lebarnya (1600 px aman sebagai maksimum untuk gambar full-width di layar retina, 800 px untuk gambar konten) lalu proses seluruh folder sekaligus.

2. Pilih format yang tepat

• Foto → WebP (atau JPG kalau masih harus mendukung browser sangat lama). WebP 25–35% lebih kecil dari JPG pada kualitas yang sama, dan semua browser modern bisa membukanya.
• Logo, ikon, screenshot dengan warna flat → PNG, lalu kuantisasi. Foto disimpan sebagai PNG itu keliru: ukurannya bisa lima sampai sepuluh kali lebih besar tanpa manfaat apa pun.
• Ikon dan ilustrasi sederhana → SVG kapan pun versi vektornya tersedia.

3. Kompres

• JPG ke WebP pada kualitas 80–85% untuk foto.
• Kompres PNG — kuantisasi palet, trik yang sama dengan pngquant, memangkas grafik flat 50–70% tanpa perubahan yang terlihat dan tetap mempertahankan transparansi.
• Kompres JPG pada 75–80% kalau masih bertahan dengan JPG.

4. Sajikan dengan benar

Tambahkan atribut width dan height di setiap <img> supaya browser sudah menyiapkan ruangnya (tidak ada layout shift), aktifkan lazy-load untuk gambar di bawah lipatan layar dengan loading="lazy", dan pakai srcset kalau mau lebih maksimal lagi. Langkah kompresi di atas justru yang paling sering dilewatkan kebanyakan situs, padahal dampaknya paling besar.