Size600 × 400
Ratio3:2
Inline cost378 B
VerdictInline it
Grey boxes with their dimensions written across them, for the slots in a layout whose real images do not exist yet. The difference from the services this replaces is what you can take away: as well as a PNG, you get the image as an inline SVG or a data URI, which means the mock-up has nothing left to fetch and nothing left to break.
Step by step
01Set the size the slot needs
Type the width and height, or take a preset. Whatever you set is written into the middle of the image, which is the entire reason placeholders carry a label — when a grid collapses, the number in the box names the slot that misbehaved.
02Tune it down, not up
The default light grey on mid grey is deliberate. A placeholder is scaffolding: if it is more colourful than the design around it, reviewers comment on the placeholder instead of the layout.
03Choose how it leaves the page
A PNG, JPEG or WebP file if the image is going into an asset folder. An inline SVG or a data URI if it is going into markup — those carry no request and no dependency on anything staying online.
04Check the inline cost
The footer compares the encoded data URI against the file and calls it. Under about two kilobytes, inlining is cheaper than the request it replaces, which for a flat-filled placeholder is nearly always the case.
Worked example
The same image in each of the forms this tool exports, measured rather than estimated — a flat fill compresses so well that guessing gets it wrong by an order of magnitude.
Given
What each output weighs, measured
inline SVG 335 B no request, renders with a system face
CSS data URI 378 B percent-encoded, gzips well
base64 data URI 474 B ~25% larger, for clients that demand it
PNG file 12 KB a separate request, cached on its ownA placeholder is a rectangle and some text. Described as vector that is a few hundred bytes; rasterised, the same image becomes twelve kilobytes of anti-aliased pixels — roughly thirty-six times the size, for a picture of a grey box. The reason to reach for the PNG is never size, then. It is that the destination cannot take markup: a CMS field, or a design tool that only accepts uploads.
Why the old services keep breaking
placeholder.com is gone, and it will not be the last
The domain behind via.placeholder.com changed hands and no longer serves images, breaking mock-ups that had worked for a decade. Every hosted placeholder service is one lapsed renewal away from the same fate, because the image lives on someone else's machine.
A data URI cannot go down
An image encoded into the markup is part of the document. It survives the demo being run offline, the screenshot being taken on a train, the repository being opened in five years, and the service that generated it disappearing entirely.
The dimensions are the point
A blank grey box tells you a layout is broken. A box reading 1200×300 tells you which one, and whether the container or the image is the thing at fault. Keep the label on while you are still moving boxes around.
Inline below a couple of kilobytes, link above it
An inlined image costs its bytes on every page load and cannot be cached separately, but it costs no request. For anything as simple as a flat fill with a label the request is the more expensive half, which is why placeholders are one of the few cases where inlining is unambiguously right.
Percent-encoding beats base64 for SVG
Base64 inflates a payload by about a third. An SVG is text, so it can be percent-encoded instead and stay close to its original size — and because it is still text, it compresses again over the wire. Reach for base64 only where a client refuses the alternative.
Fonts do not travel inside an SVG
An SVG names a typeface; it does not carry one. Opened somewhere the font is missing — including inside an <img> tag, which renders in isolation from the page — the label falls back to a system face. For a placeholder that is harmless, but it is why the raster export is the one to use when the exact type matters.
The judgement call
The four forms are not interchangeable. The destination decides.
A React or HTML mock-up you are still moving around
Inline SVG
Smallest, no request, and you can edit the fill in the markup without regenerating anything.
A CSS background in a stylesheet
CSS data URI
Percent-encoded so it stays small, and it drops straight into background-image: url(…).
An HTML email template
Base64 data URI
Several email clients mishandle percent-encoded SVG. Base64 costs a third more and is the safer bet there.
A CMS field or an upload-only design tool
PNG
The destination takes a file and nothing else. Size stops mattering once markup is off the table.
A photo slot you want to judge the crop of
PNG at the exact size
A flat fill tells you the box is right; it cannot tell you whether a real photograph would survive the crop.
Anything shipping to production
Not a placeholder
These are scaffolding. A grey box reading 600×400 in a live product is a bug that reached users.
Reference
FAQ
The Tinapps placeholder image generator does the same job without the service: it builds the image in your browser and hands it back as a PNG, an inline SVG, or a data URI. Paste an old via.placeholder.com URL into the inspector and it reads the size, colours, and text out of it, so an existing mock-up can be converted rather than rebuilt.
Set the width and height in the Tinapps placeholder image generator and leave the label set to Dimensions — the size is drawn across the middle of the image and updates as you change it. That label is what identifies which slot in a grid has gone wrong when a layout collapses.
For a placeholder, usually yes. A data URI costs no HTTP request and cannot break when a service goes offline, and a flat-filled placeholder encodes to a few hundred bytes. The trade-off is that inlined bytes are re-sent with every page load and cannot be cached separately, which starts to matter above roughly two kilobytes.
Yes. A placeholder generated here is a rectangle, a colour, and text you chose, so there is no licence attached and nothing to attribute. They are intended as scaffolding during design rather than as production assets.
An SVG names a typeface rather than embedding one, so it falls back to a system face wherever that font is unavailable — including inside an <img> tag, which browsers render in isolation from the page. Export the PNG, JPEG, or WebP instead when the exact typeface matters, because a raster export bakes the glyphs in.
No. The Tinapps placeholder image generator builds the image with JavaScript in your browser and makes no request with it. The only network activity is fetching a Google Fonts file the first time you pick a new typeface, and even that stops once the font is cached.
The image is generated in your browser and never uploaded. Picking a new typeface fetches a font file from Google Fonts; nothing about your design is sent with it.
Keep going
SVG background
Give the mock-up a background that is not another flat fill.
Base64 converter
Encode a real image the same way once it exists.
Image resizer
Cut the real photograph down to the size the placeholder held.
Contrast checker
Check the label against its background if you are colouring it.