Placeholder Image Generator
Mock-up images as SVG data URIs — no third-party request, no broken prototypes when the service disappears.
Runs entirely in your browser
Loading tool...
How to use
- Set the size, or tap one of the common ones.
- Change the colours and label if the default grey is not what you need.
- Copy the SVG for a file, or the img tag for a data URI you can paste inline.
- Download the .svg when the mock-up needs a real file.
Features
- SVG, so it stays sharp at any size and weighs a few hundred bytes.
- Data URI output — no network request, works offline and in a print preview.
- Dimensions used as the label unless you give it one.
- Presets for 16:9, square, avatar, banner and Open Graph sizes.
- Runs entirely in your browser.
Frequently asked questions
- Why not use a placeholder service?
- Because it puts a third-party request in every mock-up. That means a slow load, nothing at all offline, other people's domains in your users' network logs, and — the one that eventually happens — every old prototype breaking when the service is retired. An inline SVG has none of those properties.
- Why SVG rather than PNG?
- A placeholder is a rectangle and a line of text, which is a few hundred bytes as SVG and tens of kilobytes as a PNG at retina resolution. It also scales: the same data URI is sharp at 128 pixels and at 1,280.
- Why is the data URI not base64?
- Because SVG is text. Percent-encoding it keeps the markup readable in the source and is usually shorter than the base64 of the same bytes — base64 adds a third to the size before compression.
Related tools
One image into the handful of icon sizes browsers actually request — plus the markup to paste.
Generate placeholder text — paragraphs, sentences, words or list items, reproducibly.
The fourth number when you know three — and the name of the ratio you are actually working in.