Berapa Ukuran Gambar yang Tepat untuk Situs Web?

Target dimensi

Itulah lebar untuk mengekspor. Aturan di baliknya sederhana: jangan pernah menyajikan gambar yang jauh lebih lebar daripada kotak terbesar tempat ia akan pernah ditampilkan.

• Hero atau banner selebar penuh: 1920 px
• Gambar unggulan selebar konten: 1200–1600 px
• Gambar di dalam artikel: 800–1200 px
• Thumbnail kartu atau pratinjau: 400–600 px
• Avatar atau ikon: 100–200 px
• Pratinjau sosial Open Graph: tepat 1200 × 630 px

Target ukuran file

Target ini nyaman tercapai dengan dimensi benar plus kualitas sekitar 75. Jika Anda jauh di atasnya, penyebabnya hampir selalu dimensi, bukan pengaturan kualitas.

• Gambar hero: di bawah 200 KB
• Gambar artikel: di bawah 100 KB
• Thumbnail: di bawah 30 KB
• Seluruh halaman, semua gambar digabung: di bawah 1 MB

Mengapa ini memengaruhi peringkat pencarian Anda

Google mengukur Largest Contentful Paint — berapa lama sampai elemen terlihat terbesar selesai dirender — dan memakainya sebagai sinyal peringkat. Di sebagian besar halaman, elemen terbesar itu adalah gambar.

Efeknya berlipat di seluler. Gambar hero 4 MB yang termuat seketika di broadband kantor bisa butuh banyak detik di ponsel bersinyal lemah, dan pengunjung pergi sebelum ia muncul. Anda kehilangan kunjungan dan sinyal peringkatnya sekaligus.

Layar retina, tanpa berlebihan

Layar kepadatan tinggi memuat dua piksel fisik atau lebih per piksel CSS, jadi gambar yang ditampilkan pada 800 px bisa tampak lembek kecuali Anda memasok data lebih. Saran standarnya mengekspor pada dua kali ukuran tampil.

Dalam praktik, 2× pada kualitas 60 biasanya mengalahkan 1× pada kualitas 90 baik untuk ketajaman maupun ukuran file — karena artefak kompresi jadi tak terlihat begitu pikselnya sekecil itu. Pakai srcset agar browser memilih, alih-alih menyajikan gambar terbesar ke semua orang.

Format mana

WebP didukung semua browser yang dipakai saat ini dan biasanya menghemat 25 sampai 35 persen dibanding JPEG pada kualitas setara. Untuk halaman padat media itu sering peningkatan kecepatan tunggal terbesar yang tersedia.

• Foto: WebP, dengan JPEG sebagai cadangan jika Anda mendukung browser sangat tua.
• Logo, ikon, diagram: SVG bila memungkinkan, selain itu PNG.
• Tangkapan layar: PNG, atau WebP yang menanganinya dengan baik.
• Apa pun yang butuh transparansi: PNG atau WebP, jangan pernah JPEG.

Alur kerja dua menit

1. Tentukan lebar terbesar tempat gambar akan ditampilkan.
2. Ubah ukuran ke lebar itu — atau gandakan untuk layar kepadatan tinggi.
3. Konversikan ke WebP pada kualitas 75.
4. Periksa ukuran file terhadap target di atas.
5. Jika masih terlalu besar, turunkan ke kualitas 60 sebelum mengecilkan dimensi lebih jauh.