Ringkas: gambar placeholder adalah grafik dummy abu-abu (atau berwarna) berdimensi persis yang menggantikan foto asli saat Anda mendesain. Nilai sejatinya adalah memesan ruang yang benar sejak awal, sehingga tata letak berperilaku sama sebelum dan sesudah aset final tiba — tanpa pengaliran ulang (reflow), tanpa kejutan. Panduan ini membahas kapan memakainya, format mana yang diekspor, dan cara mencegah pergeseran tata letak.
Menunggu fotografi final sebelum membangun tata letak itu terbalik. Gambar placeholder membiarkan Anda menetapkan dimensi lebih dulu, lalu menyisipkan visual asli tanpa membuat tata letak bergeser tiba-tiba.
Pesan ruangnya, bukan sekadar mengisinya
Hal paling berharga dari placeholder adalah menahan lebar dan tinggi persis yang akan dipakai gambar asli. Jika tata letak dibangun di sekitar gambar tanpa dimensi terpesan, menaruh aset final membuat semuanya melompat — teks mengalir ulang, tombol bergeser, dan di web muncul sebagai Cumulative Layout Shift. Mendesain sejak awal dengan placeholder berukuran benar membuat pergantian final mengubah gambar, bukan posisi.
Cocokkan dimensi dan rasio asli
Placeholder hanya berguna bila cocok dengan yang akan datang. Setel dimensi piksel sebenarnya dan rasio aspek gambar final — hero 16:9, avatar 1:1, thumbnail 4:3 — agar mockup mencerminkan kenyataan. Melabeli tiap placeholder dengan ukurannya (banyak generator mencetaknya di gambar) memudahkan menemukan ketidakcocokan saat tinjauan.
Retina dan DPI tinggi
Pada layar berkerapatan tinggi, gambar butuh lebih banyak piksel fisik daripada ukuran tata letaknya. Mengekspor placeholder pada 2×, 3×, atau 4× membiarkan Anda menguji tampilan aset asli di layar retina dan memastikan Anda telah merencanakan berkas lebih besar yang akan dibutuhkan versi final.
Format mana yang diekspor
- PNG / WebP — untuk mockup dan prototipe di layar.
- SVG — bebas resolusi, mungil, ideal saat ukuran persis masih cair.
- Base64 / Data URI — menyematkan placeholder langsung di HTML atau CSS, praktis untuk prototipe mandiri tanpa berkas eksternal.
Alur praktis
- Daftar slot gambar pada tata letak Anda dan dimensi aslinya.
- Buat di Pembuat Gambar Placeholder — pakai mode batch untuk menghasilkan semua ukuran sekaligus.
- Taruh di desain dan pastikan tak ada yang bergeser saat mengubah ukuran viewport.
- Ganti aset asli satu per satu; karena ruang terpesan, tata letak tetap diam.
Jika Anda juga butuh teks dummy untuk mengisi konten di sekitar gambar itu, padukan Generator Lorem Ipsum agar seluruh mockup terbaca dengan kepadatan realistis.
Kesalahan umum yang harus dihindari
- Memakai placeholder dengan rasio salah, sehingga gambar asli terpotong tak terduga.
- Tidak memesan dimensi gambar, menimbulkan pergeseran tata letak saat gambar final tiba.
- Mengabaikan penskalaan retina dan meremehkan ukuran berkas.
- Mengirim placeholder ke produksi karena tak pernah diganti.