Placeholder Image Generator — SVG & PNG by Size

What this tool does

It makes a placeholder image — a flat coloured block with a label, at exactly the size you choose. Placeholders are what you put in a layout before the real image exists, so that the page is the right shape while you wait. This generator produces both an SVG (small, sharp, self-contained) and a PNG, with the size printed on the block so the required dimensions are never in doubt.

Common sizes

Use	Size
Hero / banner	1920 × 1080
Social share card	1200 × 630
Content image	800 × 600
Thumbnail / avatar	400 × 400 (or 128 × 128)

Why set the real dimensions

A placeholder is only useful if it reserves the same space the final image will. Give it the true width and height and the layout does not jump when the image arrives — no layout shift, no reflow, nothing moving under the reader's cursor. Reserve the exact box, then swap the image in.

SVG or PNG

The SVG data URL is the lighter choice: a few hundred bytes, sharp at any scale, and self-contained so it needs no server and works offline. The PNG is the fallback for the places SVG does not reach — some email clients, older tools, anywhere that insists on a raster file. Both are generated locally, and nothing is uploaded.

Using the data URL

The SVG output is a data URL, which is the whole image written as text inside the URL. It can go anywhere an image URL goes, with no file to host:

<img src="data:image/svg+xml,..." width="800" height="600" alt="Placeholder">

In CSS it is the same string in quotes: background-image: url("data:image/svg+xml,..."). Because the payload is percent-encoded, the quotes and angle brackets inside the SVG do not need escaping, but the URL is long — a 800 × 600 placeholder with a short label is roughly 300–400 characters, so it is a development aid rather than something to paste fifty times into a production stylesheet.

Two practical details. A data URL cannot be cached separately from the page that contains it, so inlining the same placeholder in several pages duplicates those bytes in each HTML response. And an alt attribute is still required on the <img>: the image has no meaning of its own, so empty alt="" is correct when it is purely decorative, and a real description when it stands in for content a reader needs to know about.

Placeholders and layout shift

The reason to use the real dimensions is cumulative layout shift. A browser reserves no space for an image until it knows its size; if the placeholder is 800 × 600 and the final image is 1200 × 900, the page reflows when the real one loads and everything below it jumps. Giving the placeholder the final image's exact aspect ratio — and setting width and height attributes or a CSS aspect-ratio — reserves the box before a single byte of the real image arrives.

If the exact size is not known yet, set the aspect ratio and let the width be fluid: a 16:9 box at 50% width stays 16:9 without knowing the final pixel dimensions. That is the one case where the placeholder's printed label and the actual rendering size will legitimately differ.

What the label can contain

The label is written into the SVG as text, and the characters <, > and & are removed rather than escaped — they would otherwise be parsed as markup and could break the document. So a label like Photo & caption renders as Photo caption. Everything else, including non-Latin text and emoji, passes through as written, and the font size scales with the shorter side of the image so a small placeholder does not get text larger than itself.

When not to use a generated placeholder

A flat block is right for development and mockups and wrong as a permanent stand-in on a live page: it tells a visitor nothing and it is the kind of empty content that reads as unfinished. If an image is genuinely unavailable in production, a designed fallback (a branded illustration, or a styled text block with a link) serves the reader better than a grey rectangle with dimensions on it.

Frequently asked questions

What is a placeholder image?

A stand-in image used while the real one is missing: during development before the artwork exists, in a design mockup, or on a page whose content has not loaded yet. It is usually a flat block with its own dimensions printed on it, so everyone can see what size the real image needs to be.

Why an SVG and not a PNG?

An SVG placeholder is vector, so it stays sharp at any size and is a few hundred bytes rather than a few kilobytes — ideal to inline or hot-link during development. A PNG is offered too for anywhere that does not take SVG, such as some email clients.

What sizes should I use?

Match the real image. A common set is 1920×1080 for a hero, 1200×630 for a social card, 800×600 for a content image and 400×400 for a thumbnail. Setting the placeholder to the true dimensions means the layout does not shift when the real image drops in.

Can I put my own text on it?

Yes — type anything into the text field, or leave it blank to show the dimensions. A short label like "hero image" or "product 1" makes a mockup easier to read than bare numbers.

How do I use the generated URL?

Copy the data URL and paste it into an img src or a CSS background-image. Because it is self-contained, it works offline with no server and no request — useful in a local prototype or a template where you do not want a dependency on a placeholder service.

Is anything uploaded?

No. The image is generated in your browser as text; nothing is sent anywhere.

Go deeper

Longer explanations of the problems this tool solves:

Sources

MDN Web Docs — SVG and data URLs (RFC 2397).