Cara mengompres gambar untuk situs web

Menurut Web Almanac 2025 dari HTTP Archive, median bobot halaman beranda di ponsel adalah 2,56 MB, dan 911 KB di antaranya berupa gambar. Di desktop, median halaman memuat 1.058 KB gambar. Gambar juga yang paling ditunggu pengunjung: elemen terbesar di layar saat halaman dimuat, yaitu Largest Contentful Paint (LCP), berupa gambar di 76% halaman seluler.

Gambar yang lebih ringan lebih cepat dimuat di koneksi lambat, menghemat kuota data seluler pengunjung, dan memangkas biaya bandwidth Anda. LCP adalah salah satu Core Web Vitals, yaitu metrik yang dipakai Google untuk menilai pengalaman halaman, jadi dampak gambar yang berat bisa lebih dari sekadar membuat pengunjung menunggu beberapa detik.

Kompresi tidak bisa menyelamatkan gambar yang jauh lebih besar daripada ruang yang diisinya. Foto kamera selebar 4000 piksel yang ditampilkan di kolom 800 piksel membawa piksel 25 kali lebih banyak daripada yang bisa dipakai halaman. web.dev mencatat bahwa mengirim gambar berukuran desktop ke ponsel bisa memakai data 2–4 kali lebih banyak daripada yang dibutuhkan.

• Banner selebar halaman: lebar sekitar 1600–2000 piksel sudah cukup untuk sebagian besar tata letak.
• Gambar di kolom artikel: sekitar dua kali lebar kolom, agar tetap tajam di layar beresolusi tinggi (misalnya 1400 piksel untuk kolom 700 piksel).
• Thumbnail dan avatar: dua kali ukuran tampilnya, sering kali 200–400 piksel.

Format menentukan seberapa efisien sebuah gambar bisa disimpan. Singkatnya: foto cocok dengan JPG atau WebP; logo, tangkapan layar, dan apa pun yang memiliki transparansi cocok dengan PNG atau WebP. Artikel perbandingan JPG, PNG, dan WebP kami menjelaskan kapan masing-masing format paling unggul.

Sekitar 97% browser yang dipakai saat ini bisa menampilkan WebP, dan ukurannya sering kali jelas lebih kecil. Untuk mencobanya, konversi dengan JPG ke WebP atau PNG ke WebP, lalu bandingkan hasilnya dengan aslinya: file hasil konversi tidak selalu lebih kecil, terutama untuk grafis sederhana.

Kompresi membuang data yang kemungkinan besar tidak akan disadari mata. Di alat kompres gambar Bitinz, Anda bisa meletakkan banyak file JPG, PNG, atau WebP sekaligus dan memilih salah satu dari tiga level:

• Cepat: mengutamakan kecepatan, untuk batch besar.
• Seimbang: level bawaan, dan pilihan yang pas untuk sebagian besar gambar situs web.
• Terbaik: sedikit lebih lama demi file yang lebih kecil; layak dipakai untuk gambar yang muncul di setiap halaman, seperti banner dan latar belakang.

Jika format dipertahankan, Bitinz tidak pernah mengembalikan file yang lebih besar daripada yang Anda unggah. Bandingkan hasilnya dengan aslinya dalam ukuran penuh, terutama gambar dengan teks kecil atau gradasi halus, lalu unduh yang sudah sesuai harapan Anda.

Gambar yang sudah dikompres dengan baik tetap bisa memperlambat halaman jika dimuat pada waktu yang salah atau dalam ukuran yang salah. Beberapa atribut HTML sudah menangani sebagian besar pekerjaannya:

• Tetapkan width dan height pada setiap gambar, agar browser bisa menyiapkan ruangnya dan tata letak tidak bergeser saat gambar dimuat.
• Tambahkan loading="lazy" pada gambar yang letaknya lebih ke bawah, agar gambar baru dimuat saat pengunjung menggulir mendekatinya.
• Jangan pernah memakai lazy loading untuk gambar utama di bagian atas halaman. Untuk gambar itu, web.dev justru menyarankan fetchpriority="high", dan tidak lebih dari satu atau dua gambar saja.
• Gunakan srcset dan sizes untuk menyediakan beberapa lebar dari gambar yang sama, agar ponsel mengunduh file yang lebih kecil daripada layar besar.
• Sajikan gambar dengan masa cache yang panjang, melalui CDN jika Anda punya, agar pengunjung yang kembali tidak perlu mengunduhnya lagi.

Uji halaman Anda dengan PageSpeed Insights atau panel Lighthouse di Chrome. Sejak Lighthouse 13, pemeriksaan gambar dikelompokkan menjadi satu insight bernama “Improve image delivery”, yang mencantumkan gambar yang masih bisa dikompres lebih jauh, disajikan dalam format modern, atau diperkecil ukurannya. Gambar yang penghematannya kurang dari 4 KiB tidak dicantumkan, jadi daftar yang pendek adalah pertanda baik.

Setelah itu, lihat sendiri halamannya di ponsel. Tepi yang tajam, teks di dalam gambar, dan warna kulit adalah bagian yang paling dulu memperlihatkan masalah kompresi.

Jika situs Anda bertambah gambar setiap hari, misalnya lewat sistem manajemen konten atau toko online, kompres gambar saat diunggah atau dipublikasikan, bukan secara manual. API pengembang Bitinz menerima gambar melalui HTTP dan mengembalikan tautan ke file hasil kompresi, sehingga bisa dijalankan dari skrip atau pipeline build. Setiap akun punya kuota bulanan gratis.

1. 01Ubah ukuran setiap gambar menjadi sekitar dua kali ukuran tampilnya.
2. 02Gunakan JPG atau WebP untuk foto, serta PNG atau WebP untuk grafis dan transparansi.
3. 03Kompres dengan level Seimbang, dan coba Terbaik untuk gambar yang paling besar.
4. 04Bandingkan hasilnya dengan aslinya sebelum menggantinya.
5. 05Tetapkan width dan height, gunakan lazy loading untuk gambar di bawah layar pertama, dan jangan pernah untuk gambar utama.
6. 06Periksa ulang halaman di PageSpeed Insights.

Mengunggah gambar ke tempat lain selain situs web Anda sendiri? Setiap platform punya aturannya sendiri: lihat persyaratan ukuran gambar untuk email dan toko online.