Panduan Lengkap Ukuran File Gambar untuk Web: Target KB per Konteks
Setiap gambar di website Anda memiliki "anggaran" ukuran file. Melebihinya dan halaman terasa lambat; tetap di dalamnya dan semuanya terasa instan. Tantangannya adalah target ini berbeda-beda tergantung di mana gambar digunakan.
Panduan ini menyediakan target KB konkret untuk setiap konteks penggunaan, cara memilih format yang tepat, dan langkah-langkah praktis untuk mencapai target tersebut.
Tabel Referensi: Target Ukuran File per Konteks
| Konteks penggunaan | Dimensi piksel | Target JPEG | Target WebP | Target AVIF |
|---|---|---|---|---|
| Hero image (lebar penuh) | 1.920×1.080 | <300 KB | <200 KB | <150 KB |
| Gambar artikel blog | 1.200×675 | <200 KB | <130 KB | <100 KB |
| Thumbnail / kartu produk | 400×400 | <60 KB | <40 KB | <30 KB |
| Foto produk e-commerce | 800×800 | <150 KB | <100 KB | <70 KB |
| Avatar / foto profil | 128×128 | <20 KB | <12 KB | <8 KB |
| Logo / ikon | Variabel | Gunakan SVG | Gunakan SVG | SVG: 5–30 KB |
Format Membuat Perbedaan Terbesar
Pilihan format adalah keputusan paling berdampak. Untuk foto dan gambar umum:
- WebP: 25–35% lebih kecil dari JPEG setara. Didukung di 97%+ browser. Ini pilihan default terbaik untuk 2026.
- AVIF: 40–50% lebih kecil dari JPEG. Dukungan browser ~95%. Ideal untuk gambar hero dan foto berkualitas tinggi.
- JPEG: Tetap tersedia sebagai fallback. Gunakan saat WebP tidak bisa digunakan.
- PNG: Untuk gambar dengan transparansi, logo, dan screenshot. Lossless tapi file besar untuk foto.
- SVG: Untuk logo, ikon, dan ilustrasi vektor. Bisa diskala tanpa batas, ukuran file sangat kecil untuk grafis sederhana.
Konversi format dengan mudah menggunakan Vizua: JPG ke WebP, ke AVIF, atau konversi massal.
Dimensi Piksel: Pengali yang Sering Diabaikan
Mengubah ukuran gambar ke dimensi tampilan sebenarnya adalah cara paling efektif mengurangi ukuran file. Ini cara kerjanya:
Jika Anda memiliki gambar 3.000×2.000 piksel (6 juta piksel) dan menampilkannya di container 600×400 piksel (240.000 piksel), Anda mengirimkan 25× lebih banyak piksel dari yang diperlukan. Mengubah ukuran ke dimensi tampilan saja (ditambah 2× untuk retina) mengurangi ukuran file hingga 80–90%.
Rumus praktis: Ukuran tampilan × 2 = dimensi gambar yang optimal. Untuk container 600 piksel, simpan gambar 1.200 piksel.
Gunakan alat Ubah Ukuran Gambar Vizua untuk menyesuaikan dimensi, lalu kompresi menggunakan kompresor JPEG atau kompresor PNG.
Panduan Khusus untuk Foto Produk E-commerce Indonesia
Platform e-commerce Indonesia memiliki spesifikasi yang perlu diperhatikan:
| Platform | Ukuran minimum | Ukuran optimal | Batas ukuran file | Format diterima |
|---|---|---|---|---|
| Tokopedia | 500×500 px | 1.000×1.000 px | 5 MB | JPG, PNG |
| Shopee | 500×500 px | 1.500×1.500 px | 2 MB | JPG, PNG |
| Lazada | 600×600 px | 800×800 px | 3 MB | JPG, PNG |
| Bukalapak | 500×500 px | 1.000×1.000 px | 5 MB | JPG, PNG |
Catatan: Semua platform e-commerce Indonesia di atas menerima JPEG dan PNG, tetapi belum menerima WebP secara langsung. Konversi ke JPEG setelah mengompres dengan WebP, atau simpan langsung sebagai JPEG. Gunakan alat Hapus Latar Belakang untuk membuat foto produk dengan latar putih bersih sesuai standar marketplace.
Total Anggaran Gambar per Halaman
Selain ukuran per gambar, perhatikan total berat gambar per halaman:
- Halaman landing / beranda: Target <500 KB total
- Halaman produk e-commerce: Target <800 KB total (5–8 foto produk)
- Halaman artikel blog: Target <400 KB total
- Halaman daftar produk: Target <600 KB total (banyak thumbnail)
Audit total berat gambar menggunakan Chrome DevTools (F12) → tab Network → filter "Img" untuk melihat ukuran setiap gambar yang dimuat.
Pertanyaan Umum
Berapa ukuran file ideal untuk gambar website?
Tergantung konteksnya. Gambar hero: di bawah 200 KB. Gambar konten artikel: di bawah 150 KB. Thumbnail/kartu: di bawah 50 KB. Avatar: di bawah 20 KB. Target ini mengasumsikan penggunaan WebP atau AVIF dengan kompresi yang tepat.
Apakah ukuran file gambar mempengaruhi SEO?
Ya, secara langsung. Gambar mempengaruhi LCP (Largest Contentful Paint), salah satu dari tiga Core Web Vitals Google. LCP yang lambat — biasanya disebabkan gambar hero terlalu besar — dapat menurunkan peringkat di hasil pencarian.
Bagaimana cara mengurangi ukuran file tanpa terlihat beda?
Tiga langkah berurutan: (1) ubah ukuran ke dimensi tampilan sebenarnya — jangan sajikan gambar lebih besar dari yang ditampilkan; (2) konversi ke WebP atau AVIF; (3) kompres di kualitas 75–85 untuk foto. Ini biasanya mengurangi ukuran file 50–70% tanpa perbedaan visual yang terlihat.
Berapa total anggaran gambar yang baik per halaman web?
Target total berat gambar di bawah 500 KB per halaman untuk performa baik di jaringan 4G. Untuk halaman landing atau e-commerce yang dioptimalkan secara agresif, target di bawah 300 KB sangat dicapai dengan WebP/AVIF. Sumber: rekomendasi Google Web Vitals dan data HTTP Archive.
Capai target ukuran file Anda
Kompres, ubah ukuran, konversi — gratis, privat, di browser Anda.