Placeholder Generator

1. Enter width and height, from 10 to 4000 pixels.
2. Choose background and text colours, plus optional text.
3. Select the visual pattern: solid, checkered or gradient.
4. Pick the format — PNG, JPEG, WebP or SVG — and download.

It occupies the space of a real image while the final content does not yet exist. That lets you judge the layout with correct proportions without waiting for photography.

Using a beautiful real image in a prototype has the same problem as real copy: it shifts evaluation to the content instead of the arrangement. A grey rectangle with its dimensions written on it keeps focus on structure.

It is also how you test how a layout behaves with different proportions: a very tall or very wide image reveals breakage the ideal photo would hide.

SVG is vector, so the file is tiny — usually a few hundred bytes, whatever dimensions are declared.

It also scales without losing sharpness, which helps when the same marker appears at different sizes in a prototype.

For prototyping in design tools that do not import SVG, or to test your real image pipeline, prefer PNG or WebP.

The checkered pattern has a specific use: it makes stretching obvious, because the squares stop being square.

A published placeholder is the visual equivalent of Lorem ipsum left in the copy. It gets indexed, appears in shares and makes the site look unfinished.

Worse: if the placeholder sits in the social sharing tag, that is what appears when someone posts the link.

Generation runs entirely in your browser; nothing is sent to a server.