What is a placeholder image generator?
A placeholder image generator creates a stand-in image of an exact size, so you can build and test a layout before the real photos or artwork exist. This one draws a solid-color rectangle at the width and height you type, writes the dimensions across the middle, and gives you a PNG to download.
Placeholders are useful wherever an image's size matters more than its content: wireframes, email templates, ad slots, CMS themes, and image components in a front-end project. Because the label shows the size, it's obvious at a glance when an image has been squashed or stretched by CSS.
How to make a placeholder image
- Type the size into the input box as width and height, for example
600x400. If you leave the box empty, you get 300 × 200. - Pick a Background color: Slate (the default), Blue, Emerald, Amber or Red.
- Click Generate. A preview appears under the output.
- Click Download to save
placeholder.png, or copy thedata:image/png;base64,...string from the output box to paste straight into HTML or CSS.
What the generated image looks like
Every placeholder has the same anatomy:
- a solid fill in the color you chose,
- the dimensions in the center, written as
width × heightin white at 85% opacity, - text sized to one-eighth of the shorter side, with a 12-pixel minimum so very thin banners stay legible.
For example, entering 600x400 gives a 600 × 400 PNG with "600 × 400" in 50-pixel text (400 ÷ 8). A 1080x1080 square gets 135-pixel text. A 728x90 leaderboard banner would work out to 11 pixels, so the label is drawn at the 12-pixel minimum instead.
Input rules
The whole entry has to be "number, separator, number", optionally followed by px. Spaces around the separator are fine, but any other text is rejected, so a typo can't silently produce the wrong size:
| You type | Result |
|---|---|
600x400 |
600 × 400 |
1200 X 630 |
1200 × 630 |
1080×1080 |
1080 × 1080 |
800, 600 |
800 × 600 |
728x90px |
728 × 90 |
3000x3000 |
Error: "Each side must be from 1 to 2000 pixels, e.g. 600x400." |
0x0 |
The same error (each side must be at least 1) |
12345x200 |
The same error, rather than a 2345 × 200 image |
600*400 |
Error: "Enter dimensions like 600x400." |
size 600x400 |
Error: "Enter dimensions like 600x400." |
Pixel sizes only: there's no option for percentages, aspect ratios or print units.
Common sizes worth knowing
A few dimensions come up again and again when you're mocking up pages:
| Use | Size to enter |
|---|---|
| Open Graph / link-preview image | 1200x630 |
| Square social post | 1080x1080 |
| Full HD hero or video thumbnail frame | 1920x1080 |
| IAB medium rectangle ad | 300x250 |
| IAB leaderboard ad | 728x90 |
| Blog post thumbnail (16:9) | 1280x720 |
These are common conventions, not rules. Always check the current requirements of the platform you're publishing to.
Placeholders in HTML and CSS
The output box holds a data URL (defined in RFC 2397), so you can use the image without saving a file:
<img src="data:image/png;base64,iVBORw0KGgo..." width="600" height="400" alt="">
That's handy in a quick prototype or a CodePen, but for a real project, download the PNG and reference it as a normal file. Data URLs are about a third larger than the binary file and can't be cached separately from the page. Setting width and height attributes that match the placeholder also reserves the space before the image loads, which MDN recommends to avoid layout shift.
What it doesn't do
- No custom text: the label is always the dimensions.
- No custom hex color: you choose from the five presets.
- No JPG or WebP output. If you need a smaller file, the WebP converter can re-encode the downloaded PNG.
If you need a placeholder image to sit next to placeholder text, the lorem ipsum generator fills in the copy. To resize a real image to the same slot later, use the image resizer, and the image to Base64 converter turns any finished image into a data URL the same way this tool does.
Last updated