Stax

…

Tools

Placeholder Image Generator — Any Size, Free

Make a placeholder image of any size with its dimensions written on it. Choose colours, download PNG, JPG, WebP or SVG, or copy the code. No upload.

Last updated:

Preview (shown smaller if it is wider than the page):

Placeholder picture, 800 by 600 pixels

Was this tool useful?

Use the tool above and you can rate it here.

A stand-in picture of any size, ready to drop into a mock-up

A placeholder image holds the place of a real one while you build a page or a design: a flat colour with its size written across it, so everyone can see what shape and size goes there. Type a width and a height, pick a colour, and download it as PNG, JPG, WebP or SVG, or copy it as code to paste straight into a page. Everything is drawn on your own device, so nothing is uploaded and no request is made to anyone's server.

Choose the size, colours and words

Press one of the common sizes (such as 300 × 250, 728 × 90, 1200 × 630 or 1920 × 1080) or type your own width and height in pixels. The background is any hex colour, and the text colour can be picked for you: the tool chooses black or white, whichever has the higher WCAG contrast ratio against your background, so the words stay readable. By default the picture shows its own size, such as 800 × 600. Type other words, or a single dash to remove the text, and tick the diagonals for the classic crossed box.

PNG, JPG, WebP or SVG

PNG is lossless and the usual choice for a flat colour picture. JPG and WebP are drawn as pictures at a high quality setting, and WebP is not offered by every browser, in which case the tool says so. SVG is text rather than pixels: it stays sharp at any zoom and the file is a few hundred bytes, but the words are drawn in the viewer's own Arial-like font, so they can look slightly different between computers.

Paste it into a page without any file

Copy img tag gives you an HTML image tag with the picture built into it as a data address, with the width and height already set so the page does not jump when the real image arrives. Copy SVG code gives you the picture's source, and Copy data URL gives the address alone, which can go in a CSS url(). None of them need the picture to be hosted anywhere, so they work offline. Replace placeholders with real images before a page goes live.

Limits, and a picture of an exact file size

The largest side is 8,000 pixels and the largest picture is 50 megapixels: 8,000 × 6,000 is 48 megapixels and works, 8,000 × 8,000 is 64 and is refused, because larger canvases fail in many browsers. This tool controls the size in pixels, not in kilobytes. When a form wants a picture of an exact file size, make one with the test file generator, and to change the size of a real picture use the image resizer or the image compressor.

Frequently asked questions

How do I make a placeholder image of a certain size?
Type the width and height in pixels, or press one of the common sizes, then choose PNG, JPG, WebP or SVG and press Download. The picture shows its own size, such as 800 × 600, unless you type other words. It is made on your device in a moment.
Does it need the internet, or send my text anywhere?
No. The picture is drawn in your browser, and the text you type never leaves it. Copy img tag and Copy data URL put the whole picture inside the code, so a page using it does not fetch anything from this site.
What is the biggest image I can make?
The longest side can be 8,000 pixels and the picture can hold up to 50 megapixels. 8,000 × 6,000 is 48 megapixels and works. 8,000 × 8,000 is 64 megapixels and is refused, because many browsers cannot draw a canvas that large.
How is the text colour chosen?
With Pick a readable text colour ticked, the tool works out the contrast ratio of white and of black against your background, using the WCAG formula, and uses whichever is higher. Untick it to type your own hex colour for the text. The background and text must both be hex colours such as #cccccc.
Can I change or remove the words on the picture?
Yes. Type your own words in the text box (up to 80 characters) and the size of the lettering adjusts to fit. Type a single dash to remove the text completely, and tick the diagonals if you want the crossed box that designers use for an image slot.
Which format should I use?
Use PNG for a picture you will open or upload, SVG for a web page where the picture should stay sharp at every size, and JPG or WebP when a form asks for those types. SVG text uses the viewer's own font, so it can differ between computers, while PNG, JPG and WebP look the same everywhere.
Can I make a placeholder of an exact file size, such as 100 KB?
Not with this tool: it sets the size in pixels and the file size follows from the picture. A flat colour picture is usually only a few kilobytes. For a picture or other file of an exact number of bytes, use the test file generator on this site.
Is it free, and is anything uploaded?
It is free, with no account, no watermark and no limit on how many you make. Nothing is uploaded: the picture is drawn and saved on your device.

Related tools