Placeholder image
Local placehold.co-style image.
This runs in your browser. Nothing is uploaded.
About Placeholder image
Draws a solid-colour placeholder image at the exact dimensions you need with a label across the middle, generated in your browser so your mockups stop depending on an external image service.
Every layout needs stand-in images before the real photography exists, and the habit is to point an img tag at placehold.co or something like it. That works until you are on a plane, or the service starts rate-limiting you, or it shuts down and takes a hundred mockups with it. Each of those URLs is also a request telling someone else the dimensions and page count of whatever you are building.
This draws the same thing locally. You set width and height, choose a fill colour, and the label is rendered centred in white bold type at a twelfth of the image width. Leave the text field empty and it prints the pixel dimensions instead, which is usually what you want on a wireframe. The result downloads as a PNG and shows in the preview first.
The label colour is not configurable, so a pale fill gives you white text on near-white and nothing readable — keep the colour mid-tone or darker. The text is also drawn as a single centred line with no wrapping, so a long caption will run past both edges on a narrow placeholder.
How to use Placeholder image
- 1Set the width and height you need.
- 2Pick a fill colour; mid-tone or darker keeps the label readable.
- 3Type a label, or leave it blank to print the dimensions.
- 4Click Generate & download.
What it won't do
- Label text is always white, centred, and on a single line.
- Solid fill only — no transparency, patterns or borders.
- One image per click; there is no bulk placeholder export.
Common questions
Why not use placehold.co or a hotlinked placeholder URL?
Because every placeholder then becomes a live network dependency inside your mockup. Hotlinked placeholders break offline, break when the service rate-limits your IP, and break permanently if it closes. A generated PNG sitting in your project folder keeps working. It also means your unreleased layout is not being requested from somebody else's server, path by path.
What size should placeholder images be?
Match the slot in your layout at the density you will actually serve, so a 400-pixel-wide card on a 2x screen wants an 800-pixel placeholder. If you are checking layout rather than image quality, the exact pixel count matters less than the aspect ratio, since that is what shifts your grid around when the real photo arrives.
Can I generate a transparent placeholder?
No. The canvas is filled edge to edge with the colour you choose, so there is no alpha anywhere in the output. If what you need is a transparent spacer, a 1x1 PNG or a CSS background will serve you better than a generated image.
Related tools
Why this one doesn't upload your file
There is no server to upload to. This page is a static file, and the work happens in your browser using the same graphics and WebAssembly code that renders every other site you visit. Your file is read from disk into memory, processed, and handed back as a download. Once the page has loaded you can disconnect from the network entirely and it keeps working. The longer explanation