Generate placeholder images for mockups, wireframes, and development. Custom sizes, colors, text. Download as SVG or PNG.
Placeholder images are essential during web development and design. They let you visualize layouts before real content is ready, keep prototypes looking professional, and test responsive designs at various dimensions.
| Use Case | Size | Aspect Ratio |
|---|---|---|
| Open Graph / Social Share | 1200 × 630 | 1.91:1 |
| Instagram Post | 1080 × 1080 | 1:1 |
| Instagram Story | 1080 × 1920 | 9:16 |
| YouTube Thumbnail | 1280 × 720 | 16:9 |
| Full HD Desktop | 1920 × 1080 | 16:9 |
| Hero Banner | 1440 × 600 | 12:5 |
| Profile Avatar | 150 × 150 | 1:1 |
| Ad Banner | 728 × 90 | 8:1 |
| Medium Rectangle Ad | 300 × 250 | 6:5 |
Data URIs let you embed placeholder images directly in HTML or CSS without separate files. Great for prototyping — just paste the data URI as the src attribute or background-image value.
Set the width, height, background color, and display text. The tool generates an SVG placeholder you can copy as a data URI, embed inline, or download — perfect for prototyping before real images are ready.
Placeholders are temporary stand-ins during development showing the intended dimensions of an image slot. They display size labels, making wireframing and layout testing faster without needing actual content images.
Use <img src="placeholder.svg" width="300" height="200" alt="placeholder"> or embed SVG inline. The tool also generates data URIs for use directly in src attributes without hosting a separate file.
Yes — set background color, text color, font size, and the label text. Common choices include showing dimensions like "300×200", a descriptive label, or leaving it blank for a solid color block.
A data URI embeds the SVG directly in the HTML as a URL-encoded string, so no separate file is needed. Example: <img src="data:image/svg+xml,...">. Great for small inline placeholders in prototypes.