Ukuran gambar terbaik untuk website: panduan hero, blog, dan thumbnail

Ukuran gambar terbaik untuk website adalah sekitar dua kali lebar tampilan gambar. Sebagai panduan, gunakan lebar 1920 sampai 2560 px untuk gambar hero selebar layar, 1200 sampai 1600 px untuk gambar blog, dan 300 sampai 600 px untuk thumbnail. Simpan sebagai WebP atau JPG terkompresi, dan jaga sebagian besar gambar di bawah sekitar 200 KB.

Ini titik awal yang praktis, bukan standar resmi. Tema dan tata letak Anda yang menentukan angka sebenarnya, dan cara di bawah menunjukkan cara menemukannya.

Berapa ukuran gambar terbaik untuk website?

Mulailah dari ruang yang diisi setiap gambar di tata letak Anda. Buka halaman di browser desktop, klik kanan gambar, lalu pilih Inspect. Developer tools menampilkan lebar yang dirender dalam piksel CSS. Kalikan dua angka itu agar gambar tetap tajam di HP dan laptop dengan layar berkepadatan tinggi.

Ringkasan cepat untuk jenis gambar yang umum:

• Hero atau banner selebar layar: lebar 1920 sampai 2560 px.
• Gambar di dalam artikel blog atau kolom konten: lebar 1200 sampai 1600 px.
• Foto produk: 1000 sampai 2000 px di sisi terpanjang, lebih besar jika toko Anda punya fitur zoom.
• Thumbnail dan kartu: lebar 300 hingga 600 px.
• Logo dan ikon: SVG jika memungkinkan, karena tetap tajam di ukuran apa pun.
• Gambar untuk berbagi di media sosial (Open Graph): 1200 x 630 px adalah ukuran yang paling banyak dipakai.

Kesalahan paling umum adalah mengupload foto 4000 px dari HP atau kamera ke kolom 700 px. Browser mengunduh setiap pikselnya, lalu membuang sebagian besar. Dengan koneksi HP, itu berarti beberapa detik menunggu tanpa guna.

Di web, yang penting hanya dimensi piksel. Angka DPI yang tersimpan di file diabaikan oleh layar, jadi tidak perlu mengatur 72 atau 300 DPI untuk website. Panduan 300 DPI kami menjelaskan kapan angka itu penting (saat mencetak).

Ukuran gambar hero: seberapa lebar dan seberapa tinggi?

Gambar hero adalah banner besar di bagian atas halaman. Karena membentang selebar layar, gambar ini harus menjadi gambar terlebar di situs Anda.

• Lebar: 1920 px mencakup sebagian besar layar desktop. Naikkan hingga 2560 px jika ingin tetap tajam di layar besar berkepadatan tinggi.
• Tinggi: tergantung desain Anda. Banyak hero setinggi 600 sampai 1000 px pada lebar desktop.
• Bentuk: crop lebar seperti 16:9 atau 21:9 cocok di desktop. Di HP, gambar yang sama sering di-crop ke tengah, jadi letakkan objek di tengah.
• Ukuran file: usahakan di bawah sekitar 500 KB, dan makin kecil makin baik.

Hero sering menjadi elemen Largest Contentful Paint di halaman, momen yang dipakai Google untuk menilai seberapa cepat halaman Anda tampil. Panduan web.dev dari Google menyarankan LCP 2,5 detik atau kurang. Hero yang berat adalah alasan umum halaman gagal mencapainya.

Jika ada teks di atas hero, gambar yang sedikit lebih gelap atau di-blur menjaga teks tetap terbaca dan lebih mudah dikompres, karena area halus memakan lebih sedikit byte daripada detail halus.

Ukuran gambar blog untuk artikel dan featured image

Untuk gambar di dalam artikel, lihat lebar kolom konten Anda. Sebagian besar tema blog memakai kolom selebar 600 sampai 800 piksel CSS. Dikalikan dua menjadi 1200 sampai 1600 px, yaitu rentang ukuran gambar blog di atas.

• Gambar di dalam artikel: lebar 1200 px cocok untuk sebagian besar tema. Gunakan 1600 px jika kolom Anda lebar.
• Featured image: periksa dokumentasi tema Anda. Banyak yang memakai crop lebar, dan 1200 x 630 px sekaligus pas sebagai gambar untuk berbagi di media sosial.
• Screenshot: biarkan di ukuran aslinya jika lebih kecil dari lebar kolom, agar teks tidak buram karena diperbesar.
• Ukuran file: targetkan 100 sampai 200 KB untuk foto. Screenshot yang disimpan sebagai PNG bisa lebih besar, jadi coba WebP untuk itu.

Gunakan satu bentuk yang konsisten untuk featured image di seluruh blog. Bentuk yang campur aduk membuat halaman arsip dan kategori terlihat tidak rapi.

Berapa ukuran file untuk gambar website?

Tidak ada batas resmi, tetapi target kasar ini menjaga halaman tetap cepat:

• Sebagian besar gambar konten: di bawah sekitar 200 KB.
• Gambar hero besar: di bawah sekitar 500 KB.
• Thumbnail: sering 20 sampai 50 KB.

Jika target KB dan MB membingungkan, panduan kami tentang berapa KB dalam 1 MB menjelaskannya.

Dimensi yang tepat sudah menyelesaikan sebagian besar pekerjaan. Kompresi menyelesaikan sisanya. Foto 1600 px yang disimpan sebagai JPG dengan kualitas 75 sampai 85, atau sebagai WebP, biasanya sudah masuk rentang. Jika gambar masih berat, gunakan kompresor dengan ukuran target, seperti Kompres Foto dari ConvertorLab. Bandingkan hasilnya dengan aslinya dalam ukuran penuh sebelum dipublikasikan.

Format mana yang sebaiknya dipakai?

• WebP untuk foto dan grafik. Google menyatakan WebP lossy 25 sampai 34% lebih kecil dari JPEG yang sebanding, dan WebP lossless 26% lebih kecil dari PNG. Semua browser utama saat ini mendukungnya.
• SVG untuk logo, ikon, dan ilustrasi sederhana.
• JPG sebagai cadangan, atau jika platform Anda tidak menerima WebP.
• PNG hanya ketika Anda membutuhkan kualitas lossless atau transparansi dan tidak bisa memakai WebP.

Penjelasan kami tentang apa itu file WebP membahas dukungan browser dan aplikasi. Untuk mengonversi file yang sudah ada, gunakan konverter gambar ke WebP.

Cara resize gambar untuk website, langkah demi langkah

1. Simpan file asli beresolusi tinggi di folder terpisah. Jangan pernah mengedit satu-satunya salinan.
2. Crop setiap gambar ke bentuk yang dipakai tata letak Anda, seperti 16:9 untuk banner atau 1:1 untuk kartu.
3. Resize ke lebar target. Alat Resize Foto mengatur lebar atau sisi terpanjang yang tepat untuk seluruh batch dan bisa menghasilkan WebP atau JPG.
4. Kompres ke ukuran file target, lalu periksa beberapa gambar dalam ukuran penuh untuk melihat noda atau banding.
5. Beri nama file dengan nama yang singkat, deskriptif, dan huruf kecil, seperti oak-dining-table.webp.
6. Upload, lalu tambahkan alt text yang deskriptif di CMS Anda.

Banyak platform me-resize dan mengonversi gambar saat diupload. Tetap upload file dengan ukuran yang wajar. Ini menghemat penyimpanan dan memberi platform titik awal yang bersih.

Gambar responsif, lazy loading, dan cara mengecek kecepatan

Cara gambar dimuat sama pentingnya dengan ukurannya. Beberapa kebiasaan HTML sudah menyelesaikan sebagian besar pekerjaan:

• Tambahkan loading="lazy" ke gambar di bagian bawah halaman, agar browser menunggu sampai pembaca menggulir mendekatinya.
• Jangan lazy-load gambar hero. Panduan mengoptimalkan LCP dari web.dev menyatakan gambar LCP tidak boleh di-lazy-load, dan menyarankan fetchpriority="high" untuk gambar itu.
• Selalu atur atribut width dan height pada gambar. Browser menyediakan ruangnya, jadi teks tidak melompat saat halaman dimuat.
• Untuk gambar yang tampil dengan ukuran sangat berbeda di HP dan desktop, sediakan beberapa versi dengan srcset dan sizes. Baca panduan responsive images dari MDN yang menjelaskan sintaksnya.

Untuk menemukan gambar yang paling bermasalah, uji halaman Anda di PageSpeed Insights atau panel Lighthouse di developer tools Chrome. Keduanya menandai gambar yang lebih besar dari ukuran tampilannya, gambar yang bisa memakai format modern, dan gambar di luar layar yang sebaiknya di-lazy-load. Anda juga bisa membuka tab Network, filter dengan Img, lalu urutkan berdasarkan ukuran. Gambar di urutan atas yang beratnya lebih dari beberapa ratus KB layak di-resize lebih dulu.

Pertanyaan yang sering diajukan