Skip to content
ToolBoxGeniehome

Placeholder Image Generator

Image Tools · Added

Every mockup needs images before the real ones exist. The usual answer is a hotlinked placeholder service, which puts a third party in your layout, breaks when you are offline, and quietly tells someone else what you are building. This draws the image on a canvas in your browser and hands you the file, so the placeholder is a real asset that keeps working.

Or type any dimensions below.

px
px

Hex, rgb() or a CSS colour name.

Leave blank to pick whichever of black or white is more readable.

Blank uses the dimensions.

%

Percent of the shorter side.

Your placeholder image

Dimensions
800 × 450pixels
Aspect ratio
16:9
File size
—as PNG

Details

Label
800 × 450
Background
#475569
Text colour
#ffffff
Text contrast
7.58:1
Font size
45 px
Filename
placeholder-800x450.png

The image is drawn on a canvas in your browser and saved straight from it — nothing is uploaded, and no external placeholder service is called, so the images keep working when you are offline and do not leak your layout to anyone.

How to use the placeholder image generator

  1. 1Choose a common size or type any width and height in pixels.
  2. 2Set the background colour, and leave the text colour blank to have black or white chosen for readability.
  3. 3Replace the label if you want something other than the dimensions, and adjust the text size as a percentage of the shorter side.
  4. 4Pick a format and download. PNG is the right default for flat colour and text.

Examples

A card image

Input
800 x 450, background #475569
Result
A 16:9 PNG labelled 800 × 450, a few kilobytes in size

Flat colour compresses to almost nothing in PNG, so a placeholder never distorts a page-weight measurement.

A social share image

Input
1200 x 630, custom label
Result
An Open Graph sized image with your own text

Useful for checking how a card crops before the real artwork exists.

An avatar row

Input
200 x 200, diagonal cross on
Result
A square placeholder that is obviously not real content

The cross is the conventional marking, and it stops a reviewer mistaking the placeholder for a finished asset.

About the placeholder image generator

What a placeholder is for

A placeholder is not decoration; it is a measuring device. It occupies the space the real image will occupy so that the rest of the layout behaves the way it eventually will — text wraps at the right point, the grid reflows at the right breakpoint, and the page does not jump when the real asset arrives. Get the dimensions right and the mockup tells you something. Get them wrong and it tells you about a layout that will never exist.

This is also why the reserved space matters beyond the mockup. An image without width and height attributes causes the content below it to shift as it loads, which is what Cumulative Layout Shift measures. Building the layout against correctly sized placeholders makes it obvious whether the space is being reserved properly.

Making one that reads as a placeholder

The one thing a placeholder must never do is look finished. A tasteful grey rectangle in a review meeting gets mistaken for a design decision; a rectangle with its dimensions written across it and a diagonal cross through it does not. That marking is a convention worth keeping precisely because it is slightly ugly — its job is to be unmistakably temporary.

Mid-tone backgrounds work better than very light ones for the same reason. A near-white placeholder is hard to tell from an empty slot, so it fails to show you that the slot is there at all, which was the point.

Where this fits with the other image tools

This one creates an image; the rest of the image tools on this site transform one you already have. If you need the placeholder at several sizes for a responsive srcset, generate the largest and put it through the image resizer. If you are checking how a real photograph will crop into a slot, the cropper is the tool for that, since a flat rectangle cannot tell you whether a face survives the crop.

For the aspect ratios themselves — working out what height goes with a width to keep 16:9, or what a 3:2 photograph becomes in a 4:5 frame — the aspect ratio calculator does the arithmetic, and the result can be typed straight into the dimensions here.

Frequently asked questions

Why generate a file instead of using a placeholder URL?
Three reasons. A hotlinked placeholder is a request to somebody else's server on every page load, so it fails when you are offline, when the service is down, and eventually when the service disappears — several popular ones have. It also tells that server what you are building and who is looking at it, which is a needless disclosure for a private project. And a local file behaves like the real asset will: it goes through your build, your image pipeline and your caching, so the mockup is a truer test of the page.
What size should a placeholder be?
The same size the real image will be, in the units the layout uses. That is the whole point of it — a placeholder at the wrong dimensions changes how the layout reflows and hides exactly the problems it was inserted to reveal. If the real image will be served at twice the CSS size for high-density screens, generate it at that larger size too, so the file weight in your testing resembles what visitors will actually download.
Why does the label default to the dimensions?
Because that is what a placeholder is most useful for saying. When four different images sit in a grid, seeing 800 × 450 written across each one tells you immediately which slot is which and whether anything has been given the wrong aspect ratio. The label is editable when you need something else — a section name, a note to a designer — and it is drawn in whichever of black or white has more contrast against your background, measured properly rather than guessed.
Which format should I choose?
PNG for almost every case here. A placeholder is flat colour and hard-edged text, which is exactly what PNG's lossless compression handles best — the files come out a few kilobytes and the text stays crisp. JPEG has no transparency and puts visible artefacts around the edges of letters, and at this kind of content it is usually larger as well. WebP is a reasonable choice if you want to test how your pipeline handles it, but it brings no advantage on an image this simple.
Is the image uploaded anywhere?
No. The canvas is drawn and read in your browser, and the download comes straight from it — there is no request to a server at any point, and nothing is stored. The same is true of the label you type, which never leaves the page.

Related tools