Generator Gambar Placeholder Online
Gambar pengisi untuk desain dan pengembangan web, gratis.
Kegunaannya
Placeholder kustom dalam hitungan detik
Tanpa dependensi
Dibuat di browser Anda, tanpa panggilan ke layanan eksternal. Bekerja secara offline.
100% privat
Tidak ada data atau gambar yang dikirim ke server. Semua terjadi secara lokal.
Warna kustom
Sesuaikan latar belakang, teks, dan label agar sesuai dengan palet desain Anda.
Instan
Gambar dihasilkan dalam milidetik. Tanpa menunggu, tanpa antrean.
Cara kerjanya
Tiga langkah, tanpa kerumitan
Tentukan dimensi
Masukkan lebar dan tinggi dalam piksel untuk gambar placeholder Anda.
Sesuaikan warna dan teks
Pilih warna latar belakang, warna teks, dan teks label (default menampilkan dimensi).
Unduh atau salin URI
Unduh PNG secara langsung atau gunakan data URI yang dihasilkan untuk menyematkannya di HTML atau CSS Anda.
FAQ
Ada pertanyaan?
Gambar placeholder adalah gambar sementara yang menempati ruang di mana gambar akhir akan ditempatkan selama desain atau pengembangan web. Tujuannya adalah memvisualisasikan tata letak sebelum konten nyata tersedia. Gambar ini digunakan dalam wireframe, prototipe, dan pengembangan front-end.
Ukuran yang umum meliputi: hero (1920x1080 atau 1440x900), kartu produk (400x300), avatar/profil (128x128 atau 64x64), thumbnail blog (800x450 atau 16:9), banner sidebar (300x250 atau 300x600), dan og:image untuk media sosial (1200x630).
Layanan eksternal seperti Lorem Picsum atau Placeholder.com memerlukan koneksi internet dan bisa lambat atau tidak tersedia. Membuat placeholder secara lokal memastikan mockup Anda bekerja secara offline, menghilangkan dependensi eksternal, dan mencegah konten berubah secara tidak terduga.
Dalam HTML, gunakan data URI langsung di atribut src tag img. Dalam CSS, gunakan sebagai background-image. Anda juga dapat mereferensikan URL unduhan jika menyajikannya secara lokal. Untuk React atau Vue, data URI berfungsi sama seperti URL biasa.
Facebook/LinkedIn: 1200x630 untuk og:image. Twitter/X: 1200x675. Instagram persegi: 1080x1080. Instagram story/reels: 1080x1920. Pinterest: 1000x1500. Thumbnail YouTube: 1280x720.
Gambar placeholder: perannya dalam desain dan pengembangan web
Konsep placeholder dalam desain berasal dari wireframing, teknik membuat skema antarmuka dengan fidelitas rendah sebelum konten akhir tersedia. Wireframe menggunakan kotak abu-abu dengan tanda X untuk menunjukkan lokasi gambar. Konvensi visual ini distandarkan pada tahun 1990-an dengan alat seperti Visio, lalu Sketch dan Figma. FPO (For Position Only) adalah istilah profesional untuk jenis konten ini.
Dalam pengembangan front-end, gambar placeholder memecahkan masalah praktis: kode memerlukan gambar agar dapat dirender dengan benar sebelum tim konten menyiapkannya. Layanan seperti Lorem Picsum atau placeholder.com mempopulerkan penggunaan URL gambar pengisi, tetapi bergantung pada server eksternal. Gambar yang dibuat secara lokal menghilangkan ketergantungan ini.
Dalam desain responsif, placeholder juga membantu memverifikasi bahwa tata letak gambar beradaptasi dengan benar pada berbagai ukuran layar. Membuat placeholder dengan dimensi tepat dari desain akhir, misalnya 16:9 untuk video atau 1:1 untuk avatar, memungkinkan validasi perilaku visual sebelum konten nyata tersedia.