Placeholder Image Generator
Note: Grey text on a grey box is the convention and is unreadable at thumbnail size. The contrast of your chosen colours is checked below, because a placeholder whose dimensions you cannot read is not doing its one job.
SVG is the default output and it is the right one for a placeholder. The file is a few hundred bytes regardless of the dimensions it declares, it stays sharp at any size, and the label showing the dimensions is real text rather than rasterised pixels. As a data URI it goes straight into a src or a background-image with no request at all, which is exactly what you want for something that exists only until real content arrives. PNG output is there for the cases that need a bitmap — an email template, a social preview, a tool that will not accept SVG.
The automatic label is the practical part. Showing the actual dimensions on the image itself means a wireframe tells you what size each slot is without measuring anything, and a placeholder that is the wrong size announces itself immediately rather than being discovered later when a real photograph is dropped in and the layout moves.
A note on contrast: a mid-grey box with slightly darker grey text is conventional and nearly unreadable when the image is small. The generated label sits at a contrast ratio the tool checks, so the dimensions stay legible on a thumbnail.
Frequently Asked Questions
SVG or PNG?
SVG unless something in the chain refuses it. It is a fraction of the size, stays sharp at any scale, and as a data URI needs no request at all. PNG is for email templates, social previews and older tooling that will not accept a vector.
Why not use a placeholder service?
Because every mockup pointing at it breaks the day it goes down, starts rate-limiting or disappears — and several popular ones have. A locally generated placeholder has no dependency, works offline, and keeps working in a document someone opens two years from now.
Can I use these in production?
A generated SVG is a real file you own, so nothing stops you — but a placeholder in production usually means content is missing. Where it genuinely belongs is as the fallback for an image that failed to load, or as a low-quality stand-in behind a lazy-loaded photograph.
How do I make the data URI shorter?
Turn off the label and use a plain fill. Most of the length is the text element and the font declaration; a plain coloured rectangle is under two hundred characters, which is short enough to inline anywhere without thinking about it.
