Placeholder Image Generator

What a placeholder image is for

A placeholder image is a stand-in graphic of an exact size that you drop into a layout while the real artwork is still missing. It lets you build and review a page's structure — grids, cards, hero banners, avatars — without waiting on a designer or photographer. The key requirement is precise dimensions: a placeholder that is the wrong size hides the very layout problems you are trying to catch. This tool generates placeholders at any width and height you specify, in two flavours, and hands you ready-to-paste embed code.

The two modes and how each is built

Solid color (SVG) generates the image entirely on your device. It writes a tiny SVG document — a colored rectangle with the dimensions printed in the middle, like 400×300 — and encodes it as a data:image/svg+xml URI. That URI is the image: it carries no link to any server, so it never breaks, never makes a network request, and renders instantly even offline. You pick the background and text colors, and the label font size scales automatically to the smaller of the two dimensions so the text always fits.

Picsum Photos instead returns a URL of the form https://picsum.photos/WIDTH/HEIGHT, which fetches a random real photograph at that size from the Lorem Picsum service. This is useful when grey boxes feel too abstract and you want the layout to look realistic. Because it points at an external service, it does require a network connection and depends on that third party staying up.

A worked example

Set width to 600, height to 400, keep the SVG mode, and choose a light grey background with dark text. The tool builds this SVG: a 600×400 rectangle filled with your background color, with the label "600×400" centred in your text color at a font size of roughly min(600,400)/6 ≈ 66px. It URL-encodes that markup into a single data URI and shows it in the preview and in three embed snippets. Switch to Picsum and the same dimensions produce https://picsum.photos/600/400, which loads a different photo each time you request it.

The embed formats you get

The generated <img> tag includes explicit width and height attributes, which is good practice: it lets the browser reserve space before the image loads and prevents layout shift.

SVG mode versus Picsum: which to choose

• Pick SVG when you want reliability and privacy. The data URI is self-contained — ideal for offline prototypes, email-safe mockups, design systems, and any context where an external request might be blocked. Nothing about your design leaves the browser.
• Pick Picsum when realism matters. A photo of an actual scene reveals contrast and crop issues that a flat grey box hides. The trade-off is the external dependency and an unpredictable image each load.

Practical tips and common mistakes

• Match real asset dimensions. Use the exact size your final image will be. A placeholder at a different aspect ratio gives you a false sense that the layout works.
• Keep contrast readable. If background and text colors are too close, the dimension label disappears. A light background with dark text (the defaults) is a safe choice.
• Data URIs can get long. A large SVG placeholder produces a long string. That is fine for prototypes, but for production replace placeholders with real, optimized assets rather than shipping huge inline URIs.
• Picsum images change on reload. If you need the same photo every time, Picsum supports seeded URLs; the plain random URL here will vary. For a stable mock, prefer SVG mode.
• Always set alt text in production. The generated tag includes placeholder alt text — replace it with something meaningful when the real image arrives.