Placeholder Image Generator
Make a grey box of exactly the size you need, labelled with its own dimensions. Drawn here in the page, so your mockup never calls out to anyone else's server.
How to use it
- Type the width and height you need. The label fills itself in with those numbers unless you write your own.
- Change the colours if the default grey is too quiet, or too loud.
- Download it as a PNG, or as a JPG if you want to feel a realistic photo weight in your layout.
What a placeholder is for
A layout behaves differently when there is something in it. Leave a hole where a photograph will go and the text around it sits wrongly, the page is the wrong height, and nobody can tell whether the design works. Drop in a grey box of exactly the right size and everything falls into place — and because it is labelled with its own dimensions, anyone looking at the mockup knows what is supposed to go there.
The label matters more than it looks. A page full of unlabelled grey
boxes tells a developer nothing; a page of boxes that each say
1200 × 400 tells them exactly what to ask the
photographer for.
Why draw it here instead of linking to one
The usual way to get a placeholder is to point an img tag
at some other website that draws one for you. It works, and it has two
costs that are easy to miss.
The first is that every person who opens your mockup quietly tells that server about it — their address, the page they were on, and when. A private design review stops being private. The second is that the mockup only works while that service does. Plenty of images in plenty of old projects are now broken boxes because a free service went away.
A downloaded file has neither problem. It sits in your project, it works offline, and it will still be there in five years.
Frequently asked questions
Does this send anything to a server?
No. The image is drawn by your own browser onto a canvas and handed straight back to you. That is the main reason to use a downloaded placeholder rather than one loaded from elsewhere - a mockup full of remote images tells that server about everyone who opens it.
What size should I use?
The size the real picture will be, at the resolution it will be shown. If a card image is 400 by 300 on the page, make the placeholder 400 by 300 - or 800 by 600 if you are checking how it looks on a high-resolution screen.
PNG or JPG?
PNG for a crisp flat colour, which is what this draws, and it will be a very small file. Choose JPG when you want the placeholder to weigh something like the photo that will replace it, so your page-weight numbers during testing are not misleading.
Can I leave the label off?
Type a space in the label box and you get a plain block of colour. The dimensions are there by default because a mockup full of unlabelled grey boxes tells whoever builds it nothing about what belongs in them.
Why is there a limit of 4000 pixels?
Because past that a canvas starts to fail in different ways in different browsers, and a placeholder that large has no real use. If you genuinely need something enormous, make it at a quarter size and scale it up - it is a flat colour, so nothing is lost.
Is my text sent anywhere?
No. Everything happens in JavaScript inside your own browser. Nothing is uploaded and nothing is saved - close the tab and it is gone.