Wireframing layout di mana kamu butuh placeholder berbentuk sebelum asset asli siap. Menyusun Storybook atau export Figma dan butuh grafik placeholder per komponen. Mengetes kode image-loading, threshold lazy-loading, atau CSS aspect-ratio. Mengganti layanan placeholder pihak ketiga di project yang harus bekerja offline atau di bawah CSP yang ketat.

SVG ≠ raster. Data URI itu string SVG; ia scale tanpa blur sampai tak terhingga tapi designer yang menunggu PNG mungkin tidak. Untuk gambar raster, screenshot preview atau jalankan SVG melalui converter SVG-to-PNG. Data URI panjang itu canggung di img src . Browser menanganinya, tapi tool (linter, search-and-replace, diff tool) sering tersedak di attribute value multi-KB. Untuk mockup besar, pakai download file SVG. Teks label tidak dilokalkan. Auto-label adalah "WxH" dengan tanda perkalian; jika kamu butuh terjemahan, ketik label custom. Warna hanya HTML hex. Color picker menghasilkan #rrggbb . Jika kamu butuh rgba() , edit markup SVG langsung setelah menyalin. Width/height bersifat intrinsic, bukan display. Mengatur CSS ke ukuran berbeda akan men-scale SVG — secara visual oke, tapi teks yang ter-embed mungkin terlihat melar jika aspect ratio berubah; kami pakai preserveAspectRatio="none" untuk scaling yang predictable. Jangan ship placeholder. Mudah terlupa — ganti dengan asset asli sebelum go live.

Generator Placeholder Image

Hasilkan placeholder image SVG inline ukuran apa pun dengan teks dan warna custom. Output sebagai data URI atau SVG yang dapat diunduh.

Width (px)

Height (px)

Background colour

Text colour

Label text (leave blank for "WxH")

Preview

SVG markup

Data URI

Download

Dibuat oleh JXXR1 · ♥ Jadi sponsor · ☕ Belikan saya kopi

Untuk apa ini?

Saat mendesain halaman, kamu sering butuh gambar dengan ukuran tertentu sebelum gambar aslinya siap — hero banner, thumbnail card, avatar, OG card. Memuat via.placeholder.com atau placehold.co bisa, tapi menambah request eksternal dan dependency pihak ketiga. Tool ini menghasilkan SVG inline self-contained dengan ukuran dan label yang kamu mau, siap di-drop ke HTML, CSS background-image, atau komponen React kamu sebagai data URI. Tidak ada yang meninggalkan browser kamu.

Kapan digunakan

Wireframing layout di mana kamu butuh placeholder berbentuk sebelum asset asli siap.
Menyusun Storybook atau export Figma dan butuh grafik placeholder per komponen.
Mengetes kode image-loading, threshold lazy-loading, atau CSS aspect-ratio.
Mengganti layanan placeholder pihak ketiga di project yang harus bekerja offline atau di bawah CSP yang ketat.

Kesalahan umum

SVG ≠ raster. Data URI itu string SVG; ia scale tanpa blur sampai tak terhingga tapi designer yang menunggu PNG mungkin tidak. Untuk gambar raster, screenshot preview atau jalankan SVG melalui converter SVG-to-PNG.
Data URI panjang itu canggung di img src. Browser menanganinya, tapi tool (linter, search-and-replace, diff tool) sering tersedak di attribute value multi-KB. Untuk mockup besar, pakai download file SVG.
Teks label tidak dilokalkan. Auto-label adalah "WxH" dengan tanda perkalian; jika kamu butuh terjemahan, ketik label custom.
Warna hanya HTML hex. Color picker menghasilkan #rrggbb. Jika kamu butuh rgba(), edit markup SVG langsung setelah menyalin.
Width/height bersifat intrinsic, bukan display. Mengatur CSS ke ukuran berbeda akan men-scale SVG — secara visual oke, tapi teks yang ter-embed mungkin terlihat melar jika aspect ratio berubah; kami pakai preserveAspectRatio="none" untuk scaling yang predictable.
Jangan ship placeholder. Mudah terlupa — ganti dengan asset asli sebelum go live.