Placeholders that hold the line
A layout cannot be judged with empty boxes in it. Until real photography or artwork arrives, every image slot needs something the right size, and that something should be obvious about what it is. That is the job of a placeholder: fill the space at the exact final dimensions, label itself so nobody mistakes it for a finished asset, and cost nothing to make. This tool draws one on a canvas in your browser: set the width and height, pick a background and text colour, and download the result as PNG, JPG or WebP. The label defaults to the image's own dimensions, the convention designers have used for decades, because a misplaced image that announces "800x600" diagnoses itself. The preview is capped at about 360 pixels on screen, but the file you download is always the full drawn size.
Aspect ratio is the number that matters most when you swap the placeholder for the real asset. If the final photo will not match the placeholder's ratio, the layout you tested is a fiction, so set the placeholder to the true target size from the start. The preset buttons cover the sizes that come up constantly.
Common sizes worth knowing
The other presets earn their place too: 400 × 400 stands in for avatars, product thumbnails and anything square, while 728 × 90 is the standard leaderboard advert slot, useful when you need to see what a page feels like with ads in it before any are served.
Why local beats a placeholder service
For years the habit was to hotlink a placeholder URL from a third-party service and let it serve grey rectangles into your mockups. It works until it does not. Those requests fail offline and behind corporate firewalls, they slow every page load by a round trip, they leak your referrer to a stranger's server, and when the service shuts down, as several well known ones have, every mockup that used it breaks at once. A file drawn on your own machine has none of those failure modes. It is a real asset in your repo or design file, it renders offline, it never changes under you, and nothing about your project touches the network. Generate the sizes you need once and keep them with the project.
Choosing a format
For flat colour and sharp text, PNG is the natural choice: it is lossless, so edges stay crisp, and solid-colour images compress extremely well. WebP usually lands smaller still and is supported by every modern browser, though note that Safari only gained the ability to export WebP from a canvas relatively recently; if your browser cannot, the tool says so and gives you a PNG instead. JPG is the odd one out for this job, because its compression is tuned for photographs and can leave faint ringing around hard edges, but some pipelines only accept JPG, so it is here for those. Whichever you pick, the file size is shown before you download, and everything, from drawing to encoding, happens locally in your browser with nothing uploaded anywhere.
Frequently asked questions
Which format should I download?
PNG is the safe default: it is lossless, so flat colour and text stay perfectly crisp, and every browser and design tool accepts it. JPG makes sense only if a system insists on it, and WebP gives the smallest files for web use. For a simple placeholder the differences are tiny either way.
Why is the preview smaller than the size I typed?
The preview is capped at about 360 pixels so a 1920 wide placeholder does not take over the page. The image itself is always drawn at your exact pixel dimensions, and the download is the full size file. The dimensions row confirms exactly what you are getting.
Can I make a transparent placeholder?
Not with this tool. The background is always filled with your chosen colour, because a placeholder's whole job is to occupy space visibly. If you need transparency, download the PNG and clear the background in an image editor, or simply pick a colour that matches its destination.
What happens if I leave the label blank?
The label defaults to the image's own dimensions, such as 800x600, and updates automatically as you change the size. That convention makes layout problems obvious at a glance, because every misplaced image announces exactly how big it is. Type your own text to override it.
Is anything uploaded to a server?
No. The image is drawn by the canvas built into your own browser, previewed locally and downloaded straight from memory, so it works offline once the page has loaded. Nothing you type or generate leaves your device.