Placeholder Image Generator
Make placeholder images of any size as PNG, JPEG, WebP or SVG.
The Right Size Before The Real Picture Exists
Wireframes, prototypes and page layouts often need an image of an exact size before the final picture exists. Enter the width and height — or pick a preset such as Open Graph 1200 × 630, a 1080 × 1080 post or a 300 × 250 ad — choose colours and text, and download a placeholder as PNG, JPEG, WebP or SVG.
Text can include {w} and {h}, which become the dimensions. The SVG version is only a few hundred bytes and scales to anything, and its data URI can go straight into an image tag or CSS without any file or third-party placeholder service — so it works offline and leaks nothing about your project.
Key features
- Any size up to 4096 × 4096.
- Common presets for social, ads and video.
- PNG, JPEG, WebP or SVG.
- Data URI for inline use.
- Wireframe cross option.
This tool runs entirely inside your browser using native Web APIs. Your files and text are never uploaded to a server, never logged and never shared with third parties.
How to use: Placeholder Image Generator
- Choose a size
A preset or your own width and height. - Set colours and text
Use {w} and {h} for the dimensions. - Pick a format
SVG for the smallest file, PNG for anything else. - Download or copy
Or copy the data URI straight into your code.
Technical specifications
| Processing location | Entirely in your browser — no server round trip |
|---|---|
| Data uploaded | None. Files and text never leave your device |
| Price | Free — no account, no trial, no usage cap |
| Category | Design |
| Works offline | Yes, once the page has loaded |
| Browser support | Chrome 90+, Edge 90+, Firefox 90+, Safari 15+ |
| Interface languages | English, 中文, हिन्दी, Español, العربية |
Frequently asked questions
Why not use an online placeholder service?
Those services add a third-party request to every page, can go offline or change, and see which projects use them. Generated images and data URIs have none of those problems.
What size is an Open Graph image?
1200 × 630 pixels, a 1.91:1 ratio, is the recommended size for link previews on Facebook, LinkedIn and most other platforms.
Which format should I choose?
SVG is tiny and sharp at any size. PNG is the safe choice where SVG is not accepted. JPEG and WebP are for testing photo-style compression.
How do I use the data URI?
Paste it as the src of an img tag or inside url() in CSS. It embeds the whole image in the text, so no file is needed. Give the img the same width and height attributes as the placeholder so the real image can later replace it without the layout moving.
Is anything uploaded?
No — the images are drawn in your browser.