Generator Gambar Placeholder

Buat Gambar Placeholder dalam Hitungan Detik

Generator gambar placeholder ini membuat dummy image kustom untuk mockup, wireframe, prototipe, dan pengembangan front-end — sepenuhnya di browser Anda. Atur lebar dan tinggi, pilih warna latar dan warna teks, tambahkan label opsional, dan Anda mendapatkan placeholder bersih yang siap diunduh atau ditempel langsung ke kode Anda.

Berbeda dari layanan hosted yang merender gambar di server (placehold.co, dummyimage.com, via.placeholder.com), setiap gambar di sini dibuat secara lokal dengan SVG dan HTML Canvas API. Itu membuatnya instan, privat, gratis, dan tetap berfungsi offline — tanpa request, tanpa rate limit, dan tidak ada yang pernah diunggah ke server mana pun.

Langkah demi Langkah: Cara Membuat Placeholder Kustom

Membuat placeholder hanya butuh kurang dari 10 detik: 1) Ketik lebar dan tinggi dalam piksel, atau pilih preset ukuran (1200×630 untuk gambar OG, 1080×1080 untuk Instagram, 1280×720 untuk thumbnail video, 256×256 untuk avatar). 2) Pilih warna latar menggunakan color picker, atau pilih preset palet seperti 'Gray' untuk tampilan placeholder klasik. 3) Opsional, tambahkan teks kustom — jika dikosongkan, gambar otomatis menampilkan dimensinya sendiri. 4) Pilih format ekspor: SVG untuk penggunaan web (paling kecil, paling tajam), PNG untuk raster dengan transparansi, JPG atau WebP untuk format yang kompatibel dengan foto. 5) Klik Download untuk menyimpan file, atau beralih ke tab Code untuk menyalin data URI, tag <img>, atau aturan CSS background yang siap ditempel ke proyek Anda.

SVG, PNG, JPG, atau WebP — Memilih Format yang Tepat

Untuk kotak warna polos dengan label, SVG biasanya pilihan yang tepat: hanya beberapa ratus byte, tetap tajam di resolusi berapa pun, dan tertanam rapi sebagai data URI. Format ini menjadi default di sini, dan merupakan peningkatan dari keluaran khusus PNG yang dimiliki kebanyakan alat placeholder. Data URI SVG juga berfungsi di setiap browser modern dan klien email.

Butuh file raster? Ekspor PNG (dengan dukungan transparansi penuh), JPG untuk format paling kompatibel secara luas, atau WebP untuk ukuran file raster terkecil. Apa pun yang Anda pilih, pratinjau langsung menampilkan persis apa yang akan Anda dapatkan sebelum disimpan — tidak ada kejutan saat Anda membuka filenya.

Mengapa Alat Ini Lebih Unggul dari placehold.co dan Layanan Hosted Lainnya

Layanan seperti placehold.co, dummyimage.com, dan via.placeholder.com memberi Anda URL yang hotlink ke server mereka. Ini menciptakan ketergantungan: jika layanan mereka down, kena rate limit, atau diblokir oleh Content Security Policy, mockup Anda menjadi rusak. Mereka juga melacak halaman mana yang hotlink ke gambar mereka, menimbulkan kekhawatiran privasi untuk prototipe internal.

Alat ini memberi Anda sesuatu yang lebih portabel: data URI mandiri yang bisa Anda masukkan ke <img src> atau CSS url(), markup SVG mentah, potongan <img> siap tempel dengan dimensi yang sesuai, atau aturan CSS background. Karena gambar tertanam langsung, tidak ada file tambahan yang perlu diunggah, tidak ada hotlink rusak jika sebuah layanan down, dan tidak ada pelacakan penggunaan oleh pihak ketiga. Salin, tempel, selesai.

Preset untuk Media Sosial, Iklan, Avatar, dan Thumbnail

Sedang membangun layout yang butuh banyak slot gambar? Ukuran preset di sini mencakup format yang paling sering Anda perlukan — gambar sosial dan OG (1200×630), unit iklan (728×90, 300×250), post persegi (1080×1080), stories (1080×1920), banner, foto produk, sampul buku, dan thumbnail video (1280×720). Menyesuaikan ukuran placeholder dengan slot aslinya menjaga layout tetap stabil dan mencegah cumulative layout shift (CLS) yang merugikan skor Core Web Vitals.

Preset rasio aspek (1:1, 4:3, 16:9, 9:16, dan lainnya) dengan kunci aspek opsional memungkinkan Anda mempertahankan proporsi saat mengubah skala. Aktifkan kunci, ubah satu dimensi, dan dimensi lainnya menyesuaikan otomatis — sempurna untuk merancang grid gambar responsif di mana setiap kartu harus mempertahankan rasio yang sama terlepas dari lebar kontainer.

Privat, Instan, dan Gratis — Berfungsi di Semua Perangkat

Tidak ada akun, tidak ada watermark, dan tidak ada batas berapa banyak gambar yang Anda buat. Setiap placeholder dibuat di perangkat Anda sendiri, menjadikannya alat yang cepat dan ramah privasi bagi desainer dan developer yang mengerjakan desain rahasia atau mockup internal. Berfungsi di Windows, Mac, Linux, iPhone, iPad, dan Android — buka di browser modern mana pun dan langsung mulai membuat.

Alat ini bahkan berfungsi offline setelah halaman dimuat. Simpan sebagai bookmark dan buat gambar placeholder berukuran sempurna begitu mockup membutuhkannya — tanpa mencari URL layanan placeholder, tanpa khawatir soal rate limit, dan tanpa akun untuk login. Desain Anda tetap milik Anda.

Dimensi Gambar Standar yang Wajib Diketahui Setiap Desainer Web

Menyesuaikan placeholder Anda dengan dimensi dunia nyata menghilangkan tebak-tebakan saat aset final tiba. Banner hero biasanya berukuran 1920×1080 px (full-HD, 16:9) atau 1440×600 px (crop sinematik yang lebih pendek, umum di situs marketing). Gambar share Open Graph — kartu pratinjau yang muncul saat URL dibagikan di Twitter/X, Facebook, dan LinkedIn — harus berukuran minimal 1200×630 px; yang lebih kecil akan digantikan oleh ikon generik platform tersebut. Gambar unggulan post blog mengikuti rasio 16:9 yang sama pada 1200×675 px, yang menskalakan dengan bersih dari kartu desktop ke lebar penuh mobile.

Thumbnail secara default menggunakan rasio klasik 4:3 pada 400×300 px atau rasio video standar saat ini 320×180 px (16:9). Gambar avatar dan profil hampir selalu ditampilkan sebagai lingkaran tetapi disimpan persegi — 400×400 px adalah minimum aman sebelum platform seperti Twitter/X atau LinkedIn mengompresi detailnya. Gambar produk untuk e-commerce bersifat persegi menurut konvensi, dengan 800×800 px memberikan resolusi cukup untuk fungsi zoom tanpa ukuran file yang terlalu besar. Header email berukuran sempit dan pendek: lebar 600 px (maksimum yang dirender kebanyakan klien email) dan tinggi 200–300 px. Untuk desain mobile-first, 390×844 px sesuai dengan kanvas logis iPhone 15 dan 393×873 px sesuai dengan iPhone 16, memberi Anda placeholder layar penuh yang akurat untuk mockup web app yang terasa native.

Mengetahui angka-angka ini berarti Anda bisa membuat prototipe pada skala nyata sejak hari pertama. Placeholder OG 1200×630 di meta tag Anda memungkinkan Anda memverifikasi layout kartu share di alat pratinjau browser sebelum fotografi selesai dikerjakan. Avatar 400×400 di thread komentar menunjukkan persis seberapa banyak wajah yang akan terlihat dalam crop lingkaran pada diameter render 40 px-nya. Membuat ukuran yang tepat sejak tahap placeholder adalah cara termurah untuk menangkap masalah layout sebelum aset produksi ada.

Rasio Aspek, CSS aspect-ratio, dan Cumulative Layout Shift

Rasio aspek adalah hubungan proporsional antara lebar dan tinggi sebuah gambar, dinyatakan sebagai lebar:tinggi — misalnya 16:9 (video widescreen dan sebagian besar hero desktop), 4:3 (televisi klasik dan banyak thumbnail kartu), 1:1 (persegi: post Instagram, tile produk, avatar), atau 2:3 (potret: pin Pinterest, sampul buku, stories mobile-first). Rasio lebih penting daripada dimensi piksel absolut untuk layout, karena grid CSS berisi kartu 16:9 tetap konsisten secara visual baik setiap kartu berukuran 320 px maupun 800 px.

Properti CSS aspect-ratio — diperkenalkan pada 2021 dan kini didukung secara universal di Chrome, Safari, Firefox, dan Edge — memungkinkan browser mencadangkan ruang vertikal yang tepat untuk sebuah gambar sebelum file-nya selesai diunduh. Menulis img { aspect-ratio: 16 / 9; width: 100%; } membuat browser langsung menggambar kotak 16:9, sehingga konten di sekitarnya tidak pernah terdorong ke bawah saat gambar tiba. Tanpa ini, browser melihat tinggi nol hingga gambar dimuat, lalu tiba-tiba menggeser semua yang ada di bawahnya — inilah masalah Cumulative Layout Shift (CLS), salah satu dari tiga Core Web Vitals Google. Skor CLS di atas 0,1 dikenai penalti dalam peringkat pencarian, menjadikan aspect-ratio sebagai perhatian SEO sekaligus perhatian desain.

Inilah juga sebabnya gambar placeholder dengan atribut width dan height eksplisit itu penting: <img width="1200" height="630"> memberi browser rasio yang dibutuhkannya untuk mencadangkan ruang sebelum CSS atau JavaScript apa pun dimuat. Browser modern menghitung rasio aspek intrinsik dari atribut tersebut dan menerapkannya seketika — perilaku yang distandarkan dalam HTML5 dan kini menjadi praktik yang direkomendasikan dalam panduan performa web Google. Saat Anda menyalin tag <img> dari alat ini, width dan height yang sesuai sudah disertakan, sehingga slot-nya tidak pernah bergeser saat konten asli dimuat.

Placeholder SVG, Data URI, dan Pola Shimmer Skeleton

Placeholder SVG tidak lebih dari elemen <rect> yang diisi warna, dibungkus dalam tag <svg> dengan width dan height yang sesuai. Pada bentuk paling sederhananya, seluruh file berukuran di bawah 200 byte — jauh lebih kecil dari GIF 1×1 sekalipun. Karena SVG adalah format teks XML, ia menskalakan ke resolusi tampilan berapa pun tanpa buram, menjadikannya placeholder paling tajam yang mungkin di kerapatan layar berapa pun termasuk layar Retina 3×. SVG juga mendukung class CSS dan custom property, sehingga placeholder yang sama bisa beralih antara abu-abu terang mode-terang dan slate mode-gelap dengan satu aturan CSS tanpa unduhan tambahan.

Data URI mengodekan gambar langsung di dalam nilai atribut, sepenuhnya menghilangkan kebutuhan akan request HTTP terpisah. Pola src="data:image/svg+xml,%3Csvg…%3E" (URL-encoded) atau varian base64 menyematkan file secara inline di HTML atau CSS Anda. Ini ideal untuk placeholder above-the-fold yang kritis: browser menggambarnya selama parsing HTML awal, sebelum resource eksternal apa pun diambil, sehingga tidak ada flash-of-missing-image sama sekali. Trade-off-nya adalah string yang di-encode menambah byte ke dokumen HTML itu sendiri — biasanya overhead 30–40% untuk base64 — sehingga data URI paling baik disediakan untuk placeholder kecil, bukan foto besar.

Untuk performa yang dirasakan, banyak platform besar — Facebook, YouTube, LinkedIn — menggunakan animasi shimmer skeleton: sebuah kotak abu-abu pucat dengan highlight terang yang menyapu dari kiri ke kanan secara berulang, meniru gerakan dan menandakan bahwa konten sedang dimuat. Riset pengguna secara konsisten menunjukkan bahwa placeholder beranimasi terasa lebih cepat daripada ruang kosong yang setara, bahkan ketika waktu muat sebenarnya identik. Efek ini diimplementasikan dengan animasi CSS @keyframes yang menggerakkan gradien linear di sepanjang elemen — CSS murni, tanpa JavaScript sama sekali, tanpa gambar. Sebagai placeholder pengembangan Anda tidak memerlukan animasinya, tetapi memahami hal ini memperjelas mengapa kotak abu-abu polos tetap menjadi standar desain: mereka berbagi bahasa visual netral yang sama dengan shimmer skeleton, sehingga developer dan desainer langsung memahaminya sebagai 'konten belum dimuat' alih-alih aset yang hilang atau rusak.

Gambar Responsif, LQIP, dan Kaitannya dengan Largest Contentful Paint

Satu ukuran placeholder saja sudah cukup untuk prototyping, tetapi mengirim gambar asli ke produksi berarti memutuskan dimensi piksel mana yang benar-benar akan disajikan. Atribut srcset memungkinkan Anda mendaftar beberapa versi gambar yang sama dengan ukuran berbeda (image-480w.jpg 480w, image-1200w.jpg 1200w), dan browser memilih yang paling sesuai berdasarkan lebar layar dan kerapatan piksel perangkat. Dipasangkan dengan atribut sizes — yang memberi tahu browser seberapa lebar gambar akan dirender pada setiap breakpoint viewport — kombinasi ini bisa memangkas payload gambar 50–70% di perangkat mobile tanpa JavaScript apa pun. Placeholder Anda sebaiknya sesuai dengan ukuran srcset terbesar sehingga layout tidak pernah bergeser saat versi terbesar dimuat.

Pola Low-Quality Image Placeholder (LQIP) membawa data URI selangkah lebih jauh: alih-alih kotak kosong, Anda menyematkan thumbnail kecil yang sangat blur (sering sekecil 10×10 px, di-encode base64) sebagai src placeholder. Ini memberi pengguna pratinjau langsung — meski buram — dari konten gambar sebenarnya sementara versi resolusi penuh dimuat di latar belakang. JavaScript (atau loading="lazy" native) menukar src begitu gambar penuh siap. Pratinjau blur menempati ruang yang persis sama dengan gambar final, sehingga tidak ada layout shift sama sekali, dan transisi visual dari blur ke tajam mengomunikasikan progres jauh lebih jelas daripada kotak abu-abu. Alat seperti next/image Next.js dan plugin gambar Gatsby menghasilkan data LQIP secara otomatis selama langkah build.

Gambar hero atau gambar unggulan di bagian atas halaman hampir selalu menjadi elemen Largest Contentful Paint (LCP) browser — metrik yang digunakan Google untuk mengukur seberapa cepat sebuah halaman terasa selesai dimuat. LCP harus selesai dalam waktu kurang dari 2,5 detik pada koneksi mobile median untuk mendapat skor 'Good' di Core Web Vitals. Menggunakan loading="eager" (default untuk gambar above-the-fold), melakukan preload gambar dengan <link rel="preload" as="image">, dan menyajikan format generasi berikutnya seperti WebP atau AVIF melalui elemen <picture> adalah tiga optimasi berdampak tertinggi untuk LCP. Strategi placeholder Anda memengaruhi skor ini secara langsung: placeholder berukuran tepat dengan dimensi eksplisit memberi tahu browser untuk mencadangkan ruang seketika, dan gambar asli yang di-preload mengisi ruang tersebut sebelum pengguna menyadari pergantiannya — menjaga LCP tetap cepat dan CLS tetap nol.