design · Browser tool
Placeholder Image Generator
Give it a size, a pair of colours and a label, and get back a placeholder image as PNG, JPEG, WebP or SVG.
Settings
Preview
Data URI
Batch
Tick the sizes you need. Each one is generated with the current colours, label rule and format, then downloaded as a separate file. Browsers ask before saving several files at once, so allow it when prompted.
What this does
A placeholder is there to hold a layout open before the real picture exists. The useful part is not the grey rectangle but the number printed on it: when you can read the dimensions off the image, a mismatched aspect ratio or a container that quietly squashes its contents shows up instantly instead of three screens later.
Why the label sometimes shrinks
The text is sized from the smaller of the two dimensions, then measured and reduced until it fits inside the box with a margin. On a banner like 728×90 that means the label ends up governed by the height, and on a tall 300×1000 strip by the width. A long custom label will shrink further, down to a floor of eight pixels; past that it is clipped rather than made illegible, and you will see a warning.
SVG is not the same kind of file
The raster formats are pixels drawn on a canvas, so a 4000×4000 PNG really is sixteen million pixels and weighs accordingly. The SVG version is a few hundred bytes of markup regardless of the size you asked for, and it scales without blurring. What it does not do is test your image pipeline: if you are checking lazy loading, decode cost or a CDN transform, use PNG or WebP. JPEG has no transparency and is the odd one out here, since a flat-colour placeholder is exactly the kind of image JPEG compresses badly.
Limits
Each side is capped at 4000 pixels, giving at most sixteen megapixels. That is not a browser limit — Chrome and Firefox will go further — but canvases beyond it start to fail silently on mobile Safari, which returns a blank image rather than an error. The data URI is only shown for output under 200 KB, because pasting a multi-megabyte string into an editor tends to freeze it. Everything larger is still available through the download button.
The images are drawn on this page. Nothing is sent to a server, and there is no request behind the preview.