Placeholder Image Generator (Sample Image Maker)
Generate a dummy sample image right in your browser by setting width, height, background color and text color, then download it as a PNG. No image is ever sent to a server.
Common sample image sizes
| Size | Typical use |
|---|---|
| 300×200 | Small banner or ad-slot placeholder |
| 800×600 | In-article image for blog posts, or a temporary wireframe image |
| 1200×630 | OGP image for Facebook and X (Twitter) share cards |
| 1080×1080 | Square post for Instagram and other social networks |
| 1920×1080 | Full HD hero image or slideshow background |
| 640×360 | 16:9 video thumbnail or card-style UI thumbnail |
What a placeholder image is
A placeholder image is a stand-in that holds a space while the real photograph or illustration is still to come. It is nothing more than a plain rectangle of the size you name, usually with that size written across it, and it serves for testing a layout or assembling a mockup. Precisely because its content means nothing, your eye stays on the arrangement and the spacing rather than on the picture.
Give this tool a width, a height, a background colour and a text colour, and it draws a preview at once which you can save as a PNG. The overlay text is optional: leave it empty and the “width × height” figures go in by themselves, so you can tell several sizes apart at a glance when they sit side by side. Colours can be chosen from the picker or typed in as hexadecimal codes, matching the palette of a design comp exactly. Everything is generated inside the browser; the image is never sent to a server.
How to make a placeholder image
- Settle the dimensions Enter the width and height in pixels. The presets 300×200, 800×600, 1200×630 (OGP) and 1080×1080 fill both fields at once.
- Choose the colours Set the background and the text colour. Besides the picker, you may type a hexadecimal colour code directly.
- Add text if you need it The overlay text is optional. Left empty, “width × height” appears by itself, which is often all you need.
- Check the preview It is redrawn with every change. Look here to see that the text is not lost against the background.
- Download the PNG “Download PNG” saves it to your machine. The file is built entirely on your device and goes nowhere else.
Tips for getting more out of it
- The "1200×630 (OGP)" preset instantly gives you the standard size that displays without cropping on Facebook and X (Twitter) share cards.
- Leaving the overlay text blank shows the "width×height" numbers automatically, so it's easy to tell sizes apart at a glance when comparing multiple wireframes.
- Background and text colors can be picked with the color picker or typed as hex codes directly, so you can match the exact palette of your design mockup.
- The generated image is only downloaded to your local device — it is never sent to or stored on this site's server.
Where placeholder images help
Building wireframes and mockups
Even before the photographs are settled, dropping in boxes of exactly the intended size lets the layout work go forward. Since the size is written on the image, you will not mix two of them up.
Reserving the frame for an OGP image
1200×630 is the size that shows in a share card without being cropped. It stands in until the real artwork is ready.
Exercising an image upload feature
Since an image of any dimensions and roughly any file size can be produced at once, it suits testing a form’s limits and how the layout copes.
Sounding out a colour scheme
Set several side by side while varying background and text colour and you quickly see whether the difference in lightness leaves the text readable.
When you want to work on a real image
To change the dimensions of an image you already have, use image resizing; to cut out only the part you want, image cropping.
Terms used with placeholder images
- Placeholder
- A stand-in element that keeps a space until whatever properly belongs there is ready. Besides images, Lorem Ipsum serves the same purpose for text.
- Mockup
- A still specimen made to check how something will look when finished. It lets you judge arrangement and spacing before the real material has arrived.
- OGP image
- The image shown as a card when a page is shared on social media. 1200×630 is the widely used size; keeping to it makes cropping at the edges unlikely.
- Hexadecimal colour code
- A way of writing a colour in the form #RRGGBB, giving the strength of red, green and blue as two digits each from 00 to FF.
- Pixel
- The smallest unit an image is built from. The width and height here are given in this unit.
- PNG
- A losslessly compressed image format. An image of nothing but a flat background and some text suits it well, and the file stays small.
Frequently Asked Questions
Side Note — the culture of placeholder images
Web design has long had a culture of using placeholder images as stand-ins until the final photos or illustrations are ready. It follows the same idea as "lorem ipsum" dummy text used in the printing industry for unfinished copy, just applied to images instead.
A service called "Lorem Picsum," launched in 2014, became widely used as a placeholder image service that serves random real photographs. Because it returns a photo just by specifying width and height in the URL, it has been adopted in countless design mockups and tutorials. That said, relying on an external service is not always practical for offline work or sensitive projects.
This tool takes a different approach: it generates a solid-color image with a text label instantly, entirely inside the browser's