Pembuat Gambar Placeholder
Buat gambar placeholder sebagai SVG yang bisa diskalakan — latar belakang warna solid atau gradien dengan teks dimensi atau teks kustom di tengah, plus bingkai opsional.
Input
Latar belakang
Teks
Bingkai
Output
Gambar placeholder Anda akan muncul di sini.
Cara lain menggunakan alat ini
REST API
curl -X POST https://api.iotools.cloud/v1/tool/image-placeholder-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"width": "800",
"height": "600",
"bgType": "solid",
"bgColor": "#cccccc",
"gradientStart": "#667eea",
"gradientEnd": "#764ba2",
"gradientAngle": "135",
"customText": "",
"text": "",
"textColor": "#666666",
"fontSize": "48",
"showBorder": "",
"borderColor": "#999999",
"borderWidth": "4"
}'Ganti dengan kunci Anda sendiri dari akun Anda. Bidang alat menjadi isi permintaan — tanpa pembungkus.
Tanyakan ke agen AI
Use the IOTools `image-placeholder-generator` tool (Image Placeholder Generator) on this input:
YOUR_INPUT_HERETempelkan ini ke agen mana pun yang terhubung ke server MCP IOTools, lalu tambahkan input Anda.
Widget sematan
<iframe
src="https://iotools.cloud/embed/image-placeholder-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Pembuat Gambar Placeholder — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Tempelkan ini di halaman Anda sendiri — gratis, tanpa kunci, cukup tautan balik.
| Biaya per panggilan API/MCP | Mulai dari 5 kredit |
|---|---|
| Butuh kredit lebih? | Lihat harga |
Juga tersedia melalui
Panduan
Apa fungsi alat ini
Alat ini membuat gambar placeholder — latar belakang warna solid atau gradien dengan label di tengah — sebagai SVG, siap dipakai di mockup, wireframe, entri CMS, atau tag <img> selagi aset sebenarnya belum siap. Secara default, labelnya menampilkan dimensi gambar itu sendiri (800 × 600), sehingga halaman penuh placeholder langsung menunjukkan ukuran tiap kotak. Karena keluarannya SVG dan bukan gambar raster, hasilnya tetap tajam pada tingkat zoom apa pun dan ukuran filenya kecil — hanya beberapa ratus byte untuk kotak warna solid, berapa pun lebar dan tinggi yang Anda atur.
Cara menggunakan
- Atur lebar dan tinggi dalam piksel (maksimal 4000px masing-masing).
- Pilih latar belakang: warna datar, atau gradien linear dengan warna awal, warna akhir, dan sudutnya sendiri.
- Biarkan teks default berupa dimensi, atau aktifkan teks kustom dan ketik label Anda sendiri (nama klien, "Gambar utama", "Segera hadir" — apa pun).
- Sesuaikan warna teks dan ukuran font, dan opsional aktifkan bingkai dengan warna dan lebarnya sendiri.
- Salin kode sumber SVG atau unduh sebagai file
.svg— pratinjau diperbarui setiap kali Anda mengubah pengaturan apa pun.
Mengapa SVG, bukan PNG atau JPG?
Tugas placeholder adalah menjaga bentuk dan ukuran sebuah kotak sebelum konten sebenarnya tiba, dan SVG melakukannya lebih baik daripada gambar raster mana pun: ia tampil tajam pada lebar 100px maupun 10.000px dari beberapa byte yang sama, bisa disalin-tempel sebagai markup biasa (berguna untuk disematkan langsung di HTML/CSS tanpa menghosting file), dan sebagian besar alat yang menerima gambar — browser, aplikasi desain, generator situs statis — menerima SVG secara native. Jika Anda secara khusus membutuhkan file raster, muat SVG yang diunduh ke editor gambar apa pun atau langkah <img>-ke-canvas, lalu ekspor dari sana; SVG tetap menjadi sumber utamanya.
Bisakah saya memakainya untuk tata letak sungguhan, bukan hanya mockup?
Bisa — arahkan <img src="placeholder.svg"> ke file yang diunduh, atau sematkan markup SVG langsung di HTML Anda, dan ia berperilaku seperti gambar lain: ikut berskala mengikuti width/height atau CSS, dan browser menyimpannya di cache seperti aset statis lainnya. Karena tidak punya dependensi eksternal (tidak ada layanan placeholder pihak ketiga yang bisa mati atau membatasi permintaan Anda), aman juga dikirim sebagai status cadangan di produksi, bukan hanya untuk pengembangan lokal.
Apakah data saya privat?
Ya. Semuanya terjadi di browser Anda — SVG dibuat secara lokal dari pengaturan yang Anda pilih, tanpa unggahan, tanpa akun, dan tanpa perjalanan bolak-balik ke server. Tidak ada yang Anda ketik (termasuk teks kustom) yang meninggalkan perangkat Anda.
Apakah teks menyesuaikan ukuran agar pas dengan kotak?
Tidak — ukuran font adalah pengaturan yang Anda kendalikan langsung, bukan penyesuaian otomatis. Untuk teks kustom yang sangat panjang pada placeholder yang kecil atau sempit, kecilkan ukuran font hingga mudah dibaca; untuk label default 800 × 600, jumlah digitnya biasanya cukup pendek sehingga ukuran font 48px bawaan muat dengan baik pada gambar apa pun yang lebih besar dari thumbnail kecil.