Berbeda dari media sosial — yang spesifikasinya baku dan terdokumentasi rapi — situs punya layout yang berubah-ubah, tampilan responsif, dan konteks pemakaian yang sangat beragam. Banner beranda memenuhi 100% lebar layar. Foto produk bisa tampil di 400px atau 800px tergantung perangkatnya. Gambar artikel muncul di dalam kolom teks.
Tidak ada satu ukuran tunggal yang benar untuk "gambar situs" — yang ada adalah rentang yang dianjurkan untuk tiap konteks, dan memahaminya adalah beda antara situs yang cepat dan tampil rapi dengan situs yang lamban serta penuh gambar buram atau kelewat berat.
Kenapa Ukuran Gambar Memengaruhi Situs Anda
Ada dua masalah berbeda yang muncul ketika gambar tidak dioptimalkan:
- Gambar kelewat besar dalam piksel: browser mengunduh foto 4000px hanya untuk ditampilkan di 800px — 80% data yang ditransfer langsung dibuang. Situs jadi lambat tanpa keuntungan visual apa pun.
- Gambar kelewat berat dalam KB/MB: meski dimensinya sudah benar, foto tanpa kompresi bisa berbobot 3 MB padahal cukup 150 KB dengan kualitas visual yang sama persis di layar.
Keduanya butuh solusi yang berbeda: yang pertama menuntut ubah ukuran (menyetel pikselnya); yang kedua menuntut kompresi (menekan bobot tanpa mengubah piksel). Dalam praktiknya, menjalankan keduanya berurutan memberi hasil terbaik.
💡 Aturan umum: lebar maksimal gambar web jarang sekali perlu melewati 1920px — lebar sebuah monitor Full HD. Untuk gambar yang memang tidak pernah memenuhi layar (kolom, grid produk, thumbnail), batasnya lebih kecil lagi. Lewat dari itu, Anda cuma membuang bandwidth dan memperlambat pemuatan.
Tabel Acuan — Ukuran Menurut Jenis Gambar
| Jenis gambar | Dimensi yang dianjurkan | Bobot ideal | Format |
|---|---|---|---|
| Banner / hero (selebar layar) | 1920 × 600–900 px | 100–200 KB | WebP / JPG |
| Banner desktop (layout boxed) | 1200–1440 × 400–600 px | 80–150 KB | WebP / JPG |
| Banner ponsel | 768 × 400–600 px | 50–100 KB | WebP / JPG |
| Foto produk (e-commerce) | 800–1200 × 800–1200 px | 60–150 KB | WebP / JPG |
| Thumbnail produk | 300–600 × 300–600 px | 20–50 KB | WebP / JPG |
| Gambar artikel / blog | 1200 × 600–800 px | 60–120 KB | WebP / JPG |
| Thumbnail post (daftar artikel) | 400–600 × 250–400 px | 20–50 KB | WebP / JPG |
| Logo di header | lebar 200–400 px | 5–30 KB | SVG / PNG / WebP |
| Ikon antarmuka | 24–64 px | 1–5 KB | SVG |
| Favicon | 16, 32, 180, 192, 512 px | 1–10 KB per file | .ico + PNG |
| Open Graph (pratinjau media sosial) | 1200 × 630 px | 80–150 KB | JPG / WebP |
| Latar belakang seksi | 1920 × tinggi menyesuaikan | 100–300 KB | WebP / JPG |
| Foto profil / avatar (situs) | 200–400 × 200–400 px | 20–50 KB | WebP / JPG / PNG |
| Gambar testimoni / pelanggan | 80–150 × 80–150 px | 5–20 KB | WebP / JPG |
Dimensi Menurut Jenis Situs
Situs profil perusahaan dan portofolio
Situs profil perusahaan umumnya punya lebar konten maksimal antara 960px dan 1440px. Gambar banner atau hero biasanya memenuhi 100% lebar layout — jadi lebar 1440–1920px sudah cukup untuk monitor masa kini. Gambar per seksi (foto tim, kantor, layanan) jarang perlu lebih lebar dari 800px.
- Banner utama: 1920 × 700–900px, di bawah 200 KB
- Foto tim: 400–600 × 400–600px, di bawah 60 KB
- Foto layanan / seksi: 800–1200 × 500–700px, di bawah 100 KB
Blog dan portal konten
Di blog, kolom konten jarang lebih lebar dari 760–800px. Gambar utama (featured image) berukuran 1200px sudah lebih dari cukup untuk menutupi layout responsif mana pun tanpa pemborosan. Thumbnail di daftar artikel lebih kecil lagi — umumnya 300–500px.
- Featured image: 1200 × 630px, di bawah 100 KB
- Gambar di dalam artikel: lebar 800–1200px, masing-masing di bawah 80 KB
- Thumbnail di daftar artikel: 400 × 250px, di bawah 30 KB
E-commerce dan toko online
Di e-commerce, foto produk adalah elemen paling menentukan — itulah alat utama untuk meyakinkan calon pembeli. Resolusinya harus cukup untuk fitur zoom (kalau situsnya menyediakan), tapi bobotnya wajib dikendalikan supaya halaman daftar produk, yang memuat banyak gambar sekaligus, tidak jadi lambat.
- Foto utama produk (persegi): 800–1200 × 800–1200px, 80–150 KB dalam WebP
- Foto produk tambahan: ukurannya sama dengan foto utama
- Thumbnail di grid produk: 300–500 × 300–500px, 20–50 KB
- Banner kategori / promo: 1440 × 400–600px, 80–150 KB
🛍️ Untuk e-commerce: selalu pakai latar putih atau netral di foto produk — selain memudahkan kompresi (bidang warna rata terkompresi sangat efisien), latar seragam menjaga konsistensi visual antarproduk dari pemasok berbeda dan memudahkan pembeli membandingkan isi keranjangnya.
Landing page
Landing page dirancang untuk satu aksi konversi saja — dan kecepatannya sangat menentukan: berbagai riset menunjukkan setiap detik tambahan waktu muat memangkas tingkat konversi 7–12%. Gambar di landing page harus dioptimalkan seagresif mungkin.
- Hero / latar belakang: lebar 1440–1920px, di bawah 150 KB — prioritas tertinggi
- Foto produk / layanan: 600–800px, di bawah 80 KB
- Ikon daftar keunggulan: pakai SVG kapan pun memungkinkan
- Foto testimoni: 80–120px bulat, di bawah 15 KB
Dampak Faktor 2× (Layar Retina dan HiDPI)
Layar Retina (Apple) dan HiDPI (merek lain) punya kerapatan piksel dua kali lipat — artinya jumlah piksel per inci lebih banyak dibanding monitor biasa. Supaya gambar tetap tajam di layar seperti itu, jumlah pikselnya harus dua kali lipat ruang tampilnya.
Contohnya: gambar yang tampil selebar 400px di layar Retina butuh lebar 800px agar terlihat tajam. Mengunggah 400px saja akan membuatnya tampak sedikit buram di iPhone dan MacBook.
Jalan keluar paling praktis adalah memakai gambar dengan lebar dua kali ruang tampil maksimal — tapi dikompres dengan benar supaya bobotnya tidak ikut berlipat. Gambar 800px yang dikompres rapi dalam WebP biasanya justru lebih ringan daripada 400px dalam PNG yang tidak dioptimalkan.
Format yang Tepat untuk Tiap Situasi
| Situasi | Format ideal | Alasannya |
|---|---|---|
| Fotografi (produk, banner, tim) | WebP lossy | 25–35% lebih ringan dari JPG pada kualitas setara |
| Logo di header | SVG | Vektor, bisa diperbesar tanpa pecah, file paling kecil |
| Logo saat SVG tidak didukung | PNG dengan latar transparan | Mempertahankan transparansi yang dibutuhkan |
| Ikon antarmuka | SVG | Skalabel, bisa dianimasikan lewat CSS, ukuran file mungil |
| Tangkapan layar berisi teks | WebP lossless atau PNG | Teks tetap tajam — JPG memunculkan artefak di sekeliling huruf |
| Open Graph / pratinjau media sosial | JPG atau WebP | Paling luas kompatibilitasnya dengan platform pratinjau |
| Latar dengan transparansi | WebP dengan kanal alfa atau PNG | Satu-satunya format bertransparansi selain PNG |
Cara Menyiapkan Gambar Sebelum Diunggah
Alur yang dianjurkan untuk gambar apa pun yang akan dipasang di situs:
- Tentukan dimensi pemakaiannya. Seberapa besar ruang maksimal yang akan ditempati gambar ini di layout? Pakai tabel acuan di atas atau periksa elemennya langsung di browser (F12 → pilih area gambarnya).
- Ubah ukurannya jadi dua kali lipat ruang tampil. Cukup untuk menutupi layar Retina tanpa pemborosan berlebihan. Pakai Ubah Ukuran Gambar untuk menetapkan lebar persis dalam piksel.
- Konversikan ke WebP. Kalau situs atau CMS Anda mendukung WebP (hampir semua yang modern mendukung), konversikan sebelum diunggah. Pakai Konverter Gambar untuk konversi kilat.
- Kompres. Tekan bobot file sampai masuk ke rentang yang dianjurkan. Pakai Kompres Gambar untuk mengoptimalkan JPG, PNG, dan WebP tanpa penurunan kualitas yang kasatmata.
- Periksa hasilnya. Buka gambar yang sudah dikompres dan bandingkan dengan aslinya. Kalau bedanya tidak kelihatan, hasilnya sudah pas.
Siapkan Gambar Situs Anda Sekarang
Ubah ukuran dan kompres gambar situs Anda dalam hitungan detik — tanpa instal apa pun, tanpa bikin akun.
Mengecek Ukuran Gambar yang Ada di Situs Anda
Untuk mengetahui apakah gambar di situs Anda sekarang sudah optimal, pakai alat-alat berikut:
- Google PageSpeed Insights (pagespeed.web.dev): menganalisis URL dan mendaftar gambar yang masih bisa diperkecil, lengkap dengan perkiraan penghematan dalam KB untuk masing-masing.
- Chrome DevTools → Network → Img: saring permintaan berdasarkan jenis gambar dan lihat bobot tiap file yang dimuat. Urutkan menurut ukuran untuk menemukan yang paling berat.
- WebPageTest.org: analisis rinci berbentuk waterfall, memperlihatkan gambar mana yang dimuat lebih dulu dan berapa lama prosesnya.
Kesalahan Ukuran Gambar yang Paling Sering Terjadi di Situs
- Mengunggah foto langsung dari kamera: foto kamera berbobot 3–12 MB dengan lebar 4000–8000px. Tidak ada situs yang butuh gambar sebesar itu tanpa diubah ukurannya dan dikompres lebih dulu.
- Memakai PNG untuk foto: foto dalam PNG jadi 5–10× lebih berat dibanding JPG atau WebP tanpa keuntungan visual apa pun. Pakai PNG hanya untuk gambar bertransparansi atau grafik bergaris tajam.
- Tidak menyiapkan versi ponsel: mengirim gambar 1920px ke layar ponsel selebar 390px murni pemborosan. Atribut
srcsetdi HTML menyelesaikan ini secara otomatis. - Melupakan gambar Open Graph: saat seseorang membagikan halaman Anda di WhatsApp atau LinkedIn tanpa gambar pratinjau, platform menampilkan thumbnail seadanya atau kotak kosong. Selalu isi meta tag
og:imagedengan gambar 1200×630px. - Logo dalam format JPG: latar putih yang dipaksakan JPG akan kelihatan begitu logo dipasang di atas latar berwarna atau transparan. Logo selalu dalam SVG atau PNG.