Generator Gambar Placeholder

Cara kerjanya

1. Tentukan dimensi: masukkan lebar dan tinggi dalam piksel untuk gambar pengganti Anda.
2. Sesuaikan tampilan: pilih warna latar belakang, warna teks, dan label yang akan ditampilkan (atau biarkan kosong untuk menampilkan dimensi).
3. Gunakan atau unduh: salin URL gambar untuk digunakan dalam HTML/CSS, atau unduh PNG langsung untuk maket dan desain Anda.

Mengapa menggunakan generator gambar pengganti?

Selama pengembangan web dan pembuatan maket, sering kali Anda membutuhkan gambar sebelum konten asli siap. Gambar pengganti mengisi ruang dalam tata letak untuk menunjukkan proporsi, menguji perilaku responsif, dan mengomunikasikan niat desain kepada klien. Daripada mencari foto stok atau membuat gambar kosong secara manual, alat ini secara seketika menghasilkan gambar yang berukuran tepat dengan dimensi dan warna yang Anda inginkan.

Fitur

• Dimensi kustom: lebar dan tinggi piksel apa pun, format persegi, potret, lanskap, atau banner.
• Kustomisasi warna: tetapkan warna latar belakang dan teks melalui kode hex atau pemilih warna.
• Teks label kustom: tampilkan teks apa pun pada gambar, atau biarkan default ke label dimensi (mis. 400×300).
• URL seketika: dapatkan URI data untuk ditempel langsung ke atribut src untuk pengujian.
• Unduh PNG: unduh gambar pengganti sebagai file PNG untuk digunakan dalam alat desain Anda.

Pertanyaan umum

Bisakah saya menggunakannya di atribut src HTML?

Ya. Gambar yang dihasilkan tersedia sebagai URI data yang dapat Anda tempel langsung ke atribut <img src=""> HTML Anda. Tidak diperlukan hosting atau URL eksternal.

Ukuran apa yang umum untuk gambar pengganti?

Ukuran umum: gambar utama (1200×630), thumbnail artikel (400×300), avatar (100×100), gambar Open Graph (1200×628), dan banner iklan (728×90). Masukkan ukuran kustom apa pun sesuai kebutuhan.

Bagaimana menggunakan gambar pengganti di CSS?

Salin URI data dan gunakan sebagai latar belakang CSS: background-image: url("data:image/png;base64,…"). Ini berfungsi di semua browser modern dan tidak memerlukan file eksternal.

Sejarah singkat layanan gambar placeholder

Layanan gambar placeholder muncul pada 2010 ketika desainer web membutuhkan cara cepat untuk mengisi mockup sebelum aset akhir tiba. placehold.it, diluncurkan oleh Dave Reilly pada 2010, adalah layanan pertama yang banyak digunakan: tempel URL seperti placehold.it/300x200 di tag <img> mana saja dan dapatkan kotak abu-abu. placekitten.com menyusul tahun yang sama, mengganti kotak dengan anak kucing acak, dan dummyimage.com (Russell Heimlich, 2010) menambahkan kustomisasi warna. Varian berkembang biak: fillmurray.com (foto Bill Murray, 2013), placebeard.it (jenggot, 2014), placecage.com (Nicolas Cage). Penerus serius datang kemudian: Lorem Pixel (mati sekitar 2017) dan Lorem Picsum oleh David Marby (2018), yang menyajikan foto acak dari Unsplash dalam ukuran apa pun. Sekitar 2014, Facebook mempopulerkan pola «skeleton screen»: menampilkan bentuk abu-abu di tempat konten akan dimuat. Pada 2019, Wolt merilis BlurHash, string 20-byte yang didekode menjadi placeholder buram resolusi rendah dari gambar asli. Hari ini, ThumbHash (Evan Wallace, 2023) dan properti CSS native aspect-ratio (Chrome 88, Januari 2021) membiarkan Anda memesan ruang gambar tanpa layanan eksternal sama sekali.

Ukuran gambar standar yang patut diingat

• Open Graph (1200×630). Ukuran preview tautan kanonik yang ditentukan oleh protokol Open Graph Facebook. LinkedIn, Slack, Discord, Twitter (jika Twitter Card tidak diatur) semua jatuh kembali ke ini. Rasio aspek 1,91:1.
• Twitter Card summary_large_image (1200×675). Rasio 16:9 untuk preview in-feed. 1200×628 yang Anda lihat dikutip adalah standar lama, diganti oleh 1200×675 pada 2023.
• Instagram (1080×1080 persegi, 1080×1350 potret, 1080×1920 story). Apa pun di atas lebar 1080 akan di-downsample. Rasio aspek story adalah 9:16.
• Thumbnail YouTube (1280×720). 16:9. YouTube secara otomatis menghasilkan ini dari frame video; thumbnail kustom yang diunggah harus di bawah 2 MB.
• Ukuran iklan IAB. Interactive Advertising Bureau menstandarisasi dimensi banner: 728×90 (leaderboard), 300×250 (persegi panjang sedang, ukuran yang paling banyak dibeli secara global), 300×600 (setengah halaman), 160×600 (wide skyscraper), 320×50 dan 320×100 (mobile).
• Favicon. 16×16 dan 32×32 untuk tab browser, 180×180 untuk ikon Apple touch, 192×192 dan 512×512 untuk manifest.json Android, minimum 512×512 untuk prompt instalasi PWA.
• Header email (600×200). Sebagian besar klien email membatasi lebar yang dirender hingga 600 px. Lebih lebar akan terjepit atau scrollbar muncul di Outlook desktop.

Placeholder dan Core Web Vitals

Core Web Vitals dari Google (diluncurkan pada Mei 2020) mengukur pengalaman pengguna dan memengaruhi peringkat pencarian. Dua dari tiga metrik bergantung langsung pada cara Anda menangani gambar. CLS (Cumulative Layout Shift) menghukum konten yang melompat saat halaman dimuat. Penyebab paling umum: <img> tanpa atribut width dan height eksplisit, yang memberi browser nol ruang untuk dipesan hingga gambar selesai diunduh. Skor di atas 0,1 gagal metrik. Perbaikannya sepele: selalu atur width dan height, bahkan pada gambar responsif, sehingga browser dapat menghitung rasio aspek. LCP (Largest Contentful Paint) mengukur ketika elemen terbesar yang terlihat dimuat. Untuk sebagian besar halaman, elemen itu adalah gambar hero. Apa pun di atas 2,5 detik gagal. Strategi: sajikan format modern (WebP, AVIF), gunakan loading="lazy" pada gambar di bawah lipatan (Chrome 76, Agustus 2019), dan gunakan fetchpriority="high" pada hero. Placeholder menjembatani kesenjangan secara visual: skeleton screen untuk tata letak, BlurHash atau ThumbHash untuk preview instan palet warna gambar asli.

Panduan keputusan format gambar

• PNG (1996). Lossless, mendukung transparansi, tanpa masalah paten. Terbaik untuk logo, ikon, screenshot, grafik dengan tepi tajam. PNG-8 warna terindeks (256 warna) jauh lebih kecil dari PNG-24 RGB dan sering tidak terlihat untuk ikon UI.
• JPEG (1992). Lossy, tanpa transparansi, dioptimalkan untuk fotografi. Kualitas 75-85 adalah sweet spot untuk web; secara visual tidak dapat dibedakan dari kualitas 95 dengan setengah ukuran. Hindari JPEG untuk apa pun dengan tepi tajam (teks, logo): Anda mendapatkan artefak ringing yang terlihat.
• WebP (Google, 2010). 25-35% lebih kecil dari JPEG pada kualitas visual yang sama, juga lebih kecil dari PNG untuk lossless. Mendukung transparansi, animasi, mode lossy dan lossless. Dukungan browser: 97% pada 2024. Pilihan default untuk situs baru.
• AVIF (Alliance for Open Media, 2019). Berdasarkan codec video AV1. Sekitar 50% lebih kecil dari JPEG, 20% lebih kecil dari WebP. Biaya CPU yang lebih tinggi untuk encoding. Dukungan browser: ~93% pada 2024, hilang di Safari yang lebih lama. Gunakan di belakang fallback <picture>.
• SVG. Vektor. Skala tak terbatas tanpa kehilangan kualitas. Logo dalam SVG sering 500 byte versus 10 KB sebagai PNG 512×512. SVG inline dalam HTML menghindari permintaan HTTP tambahan sepenuhnya. Jangan gunakan untuk fotografi.
• Data URI. data:image/png;base64,... menyematkan byte gambar langsung di HTML atau CSS. Menghemat permintaan HTTP dengan biaya menggembungkan file di sekitarnya sekitar 33% (overhead base64). Layak untuk thumbnail placeholder kecil, tidak pernah untuk gambar hero.

Di mana gambar placeholder benar-benar digunakan

• Wireframe dan mockup. Figma, Sketch, Adobe XD, Penpot semua mendukung drag-and-drop gambar placeholder. Desainer membuat sketsa tata letak sebelum direksi seni tiba, menggunakan kotak abu-abu atau teks dimensi sebagai placeholder visual.
• Skeleton screen. Twitter, Facebook, YouTube, LinkedIn semua menampilkan placeholder blok abu-abu saat konten dimuat. Penelitian dari Luke Wroblewski (2013) menunjukkan bahwa skeleton screen membuat waktu pemuatan yang dirasakan terasa hingga 20% lebih cepat daripada spinner.
• Story design system. Storybook, Histoire, dan Ladle merender preview komponen yang memerlukan gambar pengganti. Set placeholder yang konsisten membuat screenshot dapat direproduksi di seluruh build CI.
• Mockup email. Litmus, Email on Acid, pembuat template Mailchimp. Klien email sangat bervariasi dalam dukungan gambar (Outlook desktop, Gmail web, iOS Mail), jadi desainer menguji dengan placeholder sebelum menukar ke aset produksi.
• Bukti cetak. Tata letak buku, halaman majalah, dan desain kemasan menggunakan placeholder FPO («for position only») selama typesetting. Dimensi hidup dalam tata letak jauh sebelum fotografer mengirimkan.
• Tutorial dan dokumentasi. Saat menulis «cara membangun komponen card», Anda memerlukan gambar pengganti yang tidak akan rusak jika sumber berubah. Placeholder yang di-host sendiri bertahan ketika layanan eksternal ditutup (seperti yang dilakukan Lorem Pixel).
• Tes A/B dan prototipe. Menguji tata letak dengan tiga ukuran gambar berbeda dengan cepat lebih cepat dengan placeholder yang dihasilkan daripada merender ulang aset nyata.

Kesalahan yang merugikan kinerja halaman

• Lupa atribut width dan height. Penyebab paling umum dari skor CLS yang buruk. Bahkan dengan gambar responsif yang digerakkan CSS, atur width dan height intrinsik agar browser memesan rasio aspek yang tepat. Browser modern menghitung aspect-ratio: width/height secara otomatis dari atribut ini sejak 2020.
• Menyajikan placeholder 4096×4096 untuk tampilan 200×200. Dua puluh kali byte tanpa manfaat visual. Cocokkan dimensi placeholder dengan ukuran yang dirender sebenarnya, atau gunakan srcset dengan beberapa varian.
• Teks alt kosong atau hilang. Pembaca layar mengumumkan «gambar» tanpa konteks. Untuk placeholder yang murni dekoratif, gunakan alt="" secara eksplisit untuk menandakan «lewati ini». Untuk gambar konten, tulis deskripsi bahkan pada placeholder agar QA menangkap copy yang hilang.
• Inlining data URI yang besar. Gambar 100 KB sebagai base64 menjadi ~133 KB di dalam HTML Anda, memblokir parsing, dan merusak caching (HTML biasanya tidak di-cache secara agresif, gambar iya). Gunakan data URI hanya di bawah ~2-4 KB.
• Bergantung pada placehold.it / lorempixel / layanan eksternal di produksi. Mereka turun. Lorem Pixel menghilang sekitar 2017 dan merusak ribuan situs demo. Untuk tutorial, demo, dan story, hasilkan placeholder sendiri atau host sendiri.
• PNG untuk fotografi, JPEG untuk logo. Foto sebagai PNG 3-5 kali lebih besar dari gambar yang sama sebagai JPEG. Logo sebagai JPEG mendapat cincin kompresi yang jelek di sekitar tepi. Pilih format berdasarkan jenis konten, bukan kebiasaan.
• Melewati loading="lazy". Gambar di bawah lipatan yang dimuat dengan rakus bersaing untuk bandwidth dengan hero. Tambahkan loading="lazy" ke semua yang ada di bawah viewport. Native, tidak diperlukan library, didukung sejak Chrome 76 (Agustus 2019) dan Safari 15.4 (2022).

Pertanyaan yang lebih sering diajukan

Mengapa label dimensi sangat berguna pada placeholder?

Saat Anda memiliki selusin placeholder dalam tata letak dengan ukuran berbeda, label segera memberi tahu Anda slot mana yang mana. «400×300» pada kotak abu-abu lebih informatif daripada menebak apakah card adalah 4:3 atau 16:9. Desainer dan pengembang yang meninjau mockup dapat melihat elemen yang salah ukuran dari seberang ruangan.

Apa perbedaan antara BlurHash, ThumbHash, dan LQIP?

Ketiganya mengkodekan preview kecil dari gambar yang didekode menjadi placeholder buram. LQIP («low-quality image placeholder») hanyalah JPEG kecil (~100 byte hingga 2 KB). BlurHash (Wolt, 2019) mengkodekan gambar apa pun menjadi string ASCII 20-30 karakter yang Anda simpan di database; waktu decode adalah mikrodetik. ThumbHash (Evan Wallace, 2023) serupa tetapi 30-50% lebih kecil untuk kualitas yang sama, dan merender tepi yang lebih tajam. Framework modern (Next.js, Astro, Hugo) semua mendukung BlurHash secara default.

Haruskah saya menggunakan SVG atau PNG untuk thumbnail placeholder?

SVG jika placeholder adalah bentuk sederhana (kotak, ikon, pola geometris). SVG inline 50 byte mengalahkan PNG 2 KB setiap kali. PNG jika Anda memerlukan rendering teks akurat piksel atau fallback font tertentu: rendering teks SVG bervariasi antar browser dan platform. Untuk placeholder dinamis yang dihasilkan sisi klien, alat ini menghasilkan PNG karena rendering teks canvas dapat diprediksi di antara browser.

Apakah PNG yang dihasilkan menyertakan EXIF atau metadata tersembunyi?

Tidak. PNG yang dihasilkan oleh API canvas HTML toBlob() atau toDataURL() hanya berisi potongan IHDR, IDAT, dan IEND ditambah potongan tEXt minimal di beberapa browser. Tidak ada GPS, tidak ada info kamera, tidak ada riwayat pengeditan, tidak ada pengidentifikasi pengguna. Bandingkan dengan JPEG kamera ponsel yang membocorkan koordinat GPS dan nomor seri perangkat.

Apakah ada yang dikirim ke server saat saya menghasilkan gambar di sini?

Tidak. Gambar digambar secara lokal melalui API Canvas 2D HTML5 di browser Anda. Buka tab Network di DevTools saat menghasilkan: nol permintaan keluar untuk gambar. Aman untuk mockup rahasia, NDA, pekerjaan klien, dan desain produk yang belum dirilis.