FakecreditcardUnduh file atau sematkan langsung
Pilih format yang sesuai dengan kebutuhan Anda. SVG hanya berukuran beberapa ratus bita untuk placeholder sederhana dan tetap tajam pada ukuran berapa pun. PNG menjaga ketajaman warna solid serta teks dan merupakan format bitmap yang paling banyak didukung. WebP didukung di semua browser modern dan biasanya menghasilkan ukuran file lebih kecil daripada PNG, termasuk untuk warna solid. JPG cocok untuk aplikasi atau alat yang mewajibkan format ini: tidak mendukung transparansi dan dapat memperlihatkan gradasi warna yang patah (banding). Untuk format bitmap, pilih @2x atau @3x agar gambar tetap tajam di layar resolusi tinggi (Retina) pada ukuran CSS yang sama; gambar yang sangat besar akan diperkecil hingga sekitar 16 megapiksel, batas kanvas pada Safari dan banyak ponsel.
Menu Salin sebagai menyediakan gambar yang disematkan langsung sebagai data URI dalam format kode yang Anda butuhkan: tag <img> lengkap dengan lebar dan tinggi, kode Markdown untuk file README dan dokumentasi, CSS background-image beserta aspect-ratio yang sesuai, atau elemen <img> React. Format SVG menggunakan URL-encoding dan bukan base64, sehingga kodenya tetap mudah dibaca dan ukurannya tidak jauh berbeda dari base64.
Butuh URL seperti /600x400?
Layanan placeholder online biasanya menghasilkan gambar melalui URL seperti /600x400. Layanan ini memang praktis sampai suatu hari layanannya ditutup atau mengubah struktur URL-nya, yang menyebabkan semua mockup yang menggunakan hot-link langsung rusak; selain itu, URL eksternal menambah permintaan jaringan pihak ketiga pada setiap pemuatan halaman. Data URI inline adalah alternatif mandiri: cukup salin sekali dan gambar akan berfungsi secara luring (offline), di dalam prototipe, Storybook story, maupun lingkungan pengujian. Dua pengecualian: banyak aplikasi email client, termasuk Gmail, tidak menampilkan gambar berbasis data URI, jadi unduh file PNG untuk kebutuhan email; dan gambar inline berukuran sangat besar akan membuat file HTML Anda berat, jadi unduh gambar berukuran besar sebagai file terpisah.
Tiga fungsi utama “gambar placeholder”
- Gambar dummy dalam desain: bidang berukuran pas sebagai pengganti sementara foto asli yang belum siap — fungsi utama generator ini.
- Gambar fallback atau default: gambar yang dilihat pengguna saat konten tidak memiliki gambar, misalnya produk tanpa foto atau profil pengguna tanpa avatar. Buat gambar ini senetral mungkin, pertahankan aspek rasio akhir, dan beri teks alt yang menjelaskan konten yang kosong.
- Placeholder saat memuat (loading): pratinjau buram kecil atau warna solid yang ditampilkan saat gambar asli sedang dimuat, seperti
blurDataURLdi Next.js. File SVG kecil berwarna polos atau gradien dari alat ini sangat cocok untuk fungsi ini.
Ukuran placeholder yang sering digunakan
| Penggunaan | Ukuran (px) | Rasio |
|---|---|---|
| Open Graph / pratinjau tautan (Facebook, LinkedIn) | 1200 × 630 | ≈ 1.91:1 |
| Kartu gambar besar X (Twitter) | 1200 × 600 | 2:1 |
| Postingan persegi Instagram | 1080 × 1080 | 1:1 |
| Postingan potret Instagram | 1080 × 1350 | 4:5 |
| Stories, Reels, TikTok | 1080 × 1920 | 9:16 |
| Thumbnail YouTube, video HD | 1280 × 720 | 16:9 |
| Hero banner Full HD atau slide | 1920 × 1080 | 16:9 |
| Gambar blog atau kartu | 600 × 400 / 800 × 600 | 3:2 / 4:3 |
| Gambar produk e-commerce | 1000 × 1000 | 1:1 |
| Iklan medium rectangle (MPU) | 300 × 250 | 6:5 |
| Iklan leaderboard | 728 × 90 | ≈ 8:1 |
| Iklan wide skyscraper | 160 × 600 | 4:15 |
| Iklan banner seluler | 320 × 50 | 32:5 |
| Avatar / foto profil | 150 × 150 (lingkaran) | 1:1 |
Platform media sosial terkadang memperbarui rekomendasi ukuran mereka, jadi pastikan memeriksa spesifikasi terbaru dari masing-masing platform sebelum memproduksi desain final.
Placeholder tanpa merusak tata letak (layout)
- Selalu tentukan atribut width dan height (atau
aspect-ratiodi CSS) pada elemen gambar. Dengan begitu browser akan memesan ruang sebelum gambar dimuat sehingga halaman tidak bergeser tiba-tiba — masalah layout shift yang diukur Core Web Vitals sebagai CLS. - Gunakan rasio aspek final agar masalah pemotongan gambar (cropping) pada desain responsif dan properti
object-fit: coverdapat terdeteksi sejak awal. - Pertahankan teks dimensi gambar saat proses review desain agar tim mengetahui persis ukuran aset gambar yang belum tersedia.
- Beri atribut
alt=""pada placeholder dekoratif dan pastikan mengganti semua gambar dummy sebelum peluncuran: gambar placeholder yang tertinggal di tahap produksi adalah sebuah bug.
Pertanyaan yang sering diajukan
Apa itu gambar placeholder?
Gambar pengganti sementara sebelum gambar asli tersedia: berupa bidang dengan ukuran dan warna yang sesuai, sering kali diberi label dimensi ukurannya, yang digunakan dalam mockup desain, prototipe, dan template. Istilah ini juga digunakan untuk gambar fallback saat konten tidak memiliki gambar, serta pratinjau buram saat gambar asli sedang dimuat.
Berapa ukuran gambar placeholder yang ideal?
Sesuai dengan ukuran persis dari gambar final, atau setidaknya menggunakan rasio aspek yang sama — misalnya 1200 × 630 untuk pratinjau tautan, 1080 × 1080 untuk postingan persegi, atau 1920 × 1080 untuk hero banner layar penuh. Ukuran yang presisi membantu mendeteksi masalah tata letak dan pemotongan (cropping) sebelum gambar asli dimasukkan.
Apakah gambar placeholder ini gratis digunakan?
Ya. Gambar dibuat langsung di perangkat Anda sesuai pengaturan yang dipilih, sehingga tidak ada batasan lisensi: Anda bebas menggunakannya untuk proyek komersial, template, maupun pekerjaan klien tanpa perlu mencantumkan atribusi.
Apakah ada URL yang bisa ditautkan langsung, seperti /600x400?
Tidak, dan ini disengaja: semua gambar dibuat langsung di browser Anda tanpa server untuk hot-linking. Sebagai gantinya, salin gambar sebagai tag <img>, Markdown, atau CSS — format data URI bersifat mandiri dan tetap dapat tampil secara offline.
Bisakah membuat placeholder transparan atau berbentuk lingkaran?
Bisa. Centang opsi Latar belakang transparan untuk format PNG, WebP, atau SVG (format JPG tidak mendukung transparansi sehingga akan diberi latar belakang putih), lalu pilih bentuk lingkaran atau sudut membulat dengan opsi border untuk kebutuhan avatar dan kartu profil.
Berapa ukuran gambar terbesar yang bisa dibuat?
Hingga 4000 × 4000 piksel pada skala @1x. File PNG dan WebP berukuran besar membutuhkan sedikit waktu untuk pemrosesan; sedangkan format SVG diproses secara instan pada ukuran berapa pun.