Placeholder Image Generator, Offline

How to Use This Tool

Set a size, get an image. It is drawn in your browser, so no request leaves the page and there is nothing to break later.

Why not just use a placeholder service

Because <img src="https://someservice.example/1200x630"> is a third-party request on every page view, and it carries more than you might expect:

The Referer header, which is the full URL of the page doing the requesting. On a staging server or an internal tool, you have just told a company you have never heard of that the page exists and where it lives.
Your visitors' IP addresses. In a jurisdiction with GDPR-style rules that is a disclosure to a processor you have no agreement with.
An availability dependency. Every one of these services has had an outage or started rate-limiting. When it happens your layout collapses, and the cause is not in your code.

None of that is worth it for a grey rectangle with the dimensions written on it.

PNG or data URI

Download a file when it is going into a design, a repository or a mock. It is a real image and behaves like one.

Copy the data URI when you want it inline with no file at all. The whole image lives in the src attribute, so there is no second request and nothing to deploy. The cost is size: base64 adds about a third, and a data URI cannot be cached separately from the page holding it. Fine for a placeholder, wrong for a real asset.

Inline removes a round trip and adds bytes to every page load that includes it.

The sizes that are built in

The presets are the ones that are actually specified somewhere rather than merely common: 1200×630 for Open Graph, 1500×500 for an X header, 1280×720 for a YouTube thumbnail, 1080×1080 and 1080×1920 for square and vertical social. The device sizes are logical pixels, so double them for a 2× screen.

A note on JPEG

JPEG is offered because some pipelines require it, but a flat-colour placeholder is close to the worst possible input for it — the format is built for photographs, and a hard-edged label on a plain background is exactly what it handles badly. PNG will usually be both smaller and sharper here. The file size is shown for each format so you can see it rather than take my word for it.

Frequently Asked Questions

Why not use a placeholder image service?

Because the request tells a third party your visitor's IP address and the full URL of the page, through the Referer header. On a staging or internal site that URL was not meant to be public. It also makes your layout depend on someone else's uptime, and every one of those services has had outages.

When should I use a data URI instead of a file?

When you want the image inline with no second request and nothing to deploy — a quick mock, an email template, a single-file demo. The cost is that base64 adds about a third to the size and the image cannot be cached separately from the page. That is fine for a placeholder and wrong for a real asset.

Is the image generated on your server?

No. It is drawn with Canvas in your browser and never leaves it. That is the entire point of the tool — if it were generated on a server, it would have exactly the problem it exists to avoid.

Why is my JPEG placeholder bigger than the PNG?

Because JPEG is designed for photographs, and a flat background with hard-edged text is the opposite of a photograph. PNG compresses large areas of identical colour extremely well, which is precisely what a placeholder is. The size of each format is shown so you can compare rather than guess.

What size should a social preview image be?

1200 by 630 for Open Graph, which covers Facebook, LinkedIn and most link previews. X uses the same image for summary_large_image. Those are logical pixels — the file itself should be that size, since these are served at fixed dimensions rather than scaled by device pixel ratio.

Does it work offline?

Yes. Once the page has loaded there is no network involvement at all, which is another way of saying the same thing as the privacy point.

Placeholder Image Generator That Does Not Call a Third-Party Server

How the calculation works