Bagaimana cara membuat gambar placeholder dengan ukuran yang tepat?

Ketik Lebar (px) dan Tinggi (px), pilih warna atau Tema warna, lalu klik Unduh PNG, Unduh JPG, atau Unduh SVG. Secara default, gambar menampilkan dimensinya, seperti 800 x 600, sebagai label.

Berapa ukuran gambar placeholder terbesar yang bisa saya hasilkan?

Lebar dan tinggi harus antara 1 dan 4000 px. Nilai di luar rentang itu akan menampilkan error Lebar dan tinggi harus antara 1 dan 4000 px.

Bagaimana cara menempatkan gambar placeholder langsung di HTML tanpa file?

Klik Salin sebagai data URL dan tempelkan ke tag img sebagai nilai src. Anda juga dapat menggunakan Salin cuplikan HTML atau Salin latar belakang CSS. Tidak diperlukan hosting gambar eksternal.

Bisakah saya menghasilkan ukuran standar media sosial atau web?

Ya. Ukuran preset mencakup Postingan Instagram, Cerita Instagram, Kartu Twitter, Open Graph, Thumbnail YouTube, Sampul Facebook, dan Header email. Unduh semua preset (ZIP) menyimpan kesebelasnya sebagai file PNG.

Bagaimana cara menempatkan teks saya sendiri atau garis diagonal pada placeholder?

Ketik label di Teks kustom, misalnya Gambar pahlawan, alih-alih menampilkan dimensi. Centang Tampilkan garis diagonal (X) untuk menggambar garis diagonal tipis. Teks panjang menyusut secara otomatis agar sesuai dengan lebar.

Apakah benar-benar gratis?

Ya. Setiap alat gratis digunakan, tanpa akun dan tanpa kartu kredit. Prosesnya berjalan di perangkat Anda, bukan di server kami, itulah yang membuatnya tetap gratis.

Apakah berfungsi di mobile?

Ya. Berjalan di browser seluler terbaru di iOS dan Android, tanpa perlu memasang apa pun.

🖼️

Generator Gambar Placeholder gratis

Hasilkan gambar placeholder berwarna dengan dimensi, teks, dan warna kustom. Ukuran standar untuk media sosial, mockup, dan komposisi desain.

Berjalan di browser AndaTanpa daftar, tanpa pop-upTidak perlu loginGratis selamanya

Lebar (px)

Tinggi (px)

Ukuran preset

Tema warna

Latar belakang

Teks / garis

Teks kustom (kosongkan untuk dimensi)

Tampilkan dimensi jika tidak ada teks kustomTampilkan garis diagonal (X)

💡 Untuk mockup HTML: gunakan opsi 'Salin sebagai data URL' dan tempel ke <img src='...'> untuk placeholder inline. Untuk desain Figma / Sketch, unduh PNG dan seret ke dalam.

Penggunaan umum

Gambar Placeholder untuk Mockup DesainHasilkan kotak berwarna berukuran untuk digunakan dalam Figma, Sketch, atau mockup desain web sebelum gambar nyata siap.
Placeholder Inline untuk Prototipe HTMLGunakan 'Salin sebagai URL Data' untuk menyematkan gambar placeholder langsung ke dalam HTML untuk prototipe cepat.
Placeholder untuk Slot Konten CMSSaat mendemonstrasikan templat CMS, gunakan gambar placeholder alih-alih konten nyata untuk pratinjau sensitif.
Template Gambar Media SosialHasilkan placeholder berukuran tepat untuk templat posting Instagram, Facebook, Twitter, LinkedIn.
Gambar Pengujian Tata Letak CSSHasilkan gambar pada rasio aspek ekstrem untuk menguji tata letak CSS responsif.

Cara kerja

Semuanya terjadi di browser Anda menggunakan HTML Canvas API dan markup SVG tulisan tangan — tanpa server, tanpa unggahan, tanpa layanan pihak ketiga. Anda mengatur dimensi, warna, dan teks label, dan alat ini melukis gambar langsung ke elemen kanvas secara real time, lalu menserialisasinya ke PNG, JPEG, atau SVG sesuai permintaan.

1
Konfigurasikan dimensi dan warna
Ketik lebar dan tinggi (1–4000 px masing-masing), atau pilih salah satu dari sebelas preset yang mencakup ukuran media sosial dan desain umum. Pilih warna latar dan teks dari tema bawaan atau masukkan nilai heksa apa pun secara langsung; pemilih warna native dan bidang teks tervalidasi tetap sinkron.
2
Canvas API merender pratinjau secara instan
Efek React memanggil drawPlaceholder() pada setiap perubahan. Fungsi ini menggunakan CanvasRenderingContext2D untuk mengisi persegi panjang dengan warna latar, opsional menggambar garis silang diagonal samar pada opasitas 15%, lalu mengukur dan meratakan-tengah teks label Anda — mengecilkan font secara otomatis hingga muat dalam 90% lebar kanvas.
3
Ekspor sebagai PNG, JPEG, atau SVG
Unduhan PNG dan JPEG memanggil canvas.toDataURL(), mengonversi hasil base64 menjadi Blob dalam memori, dan memicu unduhan — semuanya secara sinkron di dalam gestur pengguna sehingga aturan unduhan iOS Safari terpenuhi. Ekspor SVG membangun string SVG mandiri dengan rect yang cocok, garis diagonal opsional, dan elemen teks, lalu menyimpannya sebagai file .svg.
4
Ekspor massal dan pintasan salin
Tombol 'Unduh semua preset' secara dinamis mengimpor JSZip, merender ulang setiap sebelas ukuran preset ke kanvas di luar layar menggunakan fungsi gambar yang sama, dan mengemas semua PNG ke dalam satu ZIP. Tombol salin mengeluarkan data URL PNG, tag img SVG inline, atau deklarasi background-image CSS untuk langsung ditempel ke kode.