How Placeholder Image Generator works
This placeholder image generator draws a flat-colour rectangle at the pixel size you enter, from 16 x 16 up to 4000 x 4000, prints one line of text in its centre and gives you the result as a PNG file. Leave the text box empty and the label is the size itself, so the default image reads 800 × 600 in white on slate grey and downloads as placeholder-800x600.png. You can change both colours, replace the label, or make the background transparent. The Details panel also reports the simplified aspect ratio, such as 4:3 or 16:9. The image is a file you keep and commit with your project, not a link to an image service, so it keeps working offline and in builds.
Placeholder sizes for social media and web pages
Enter these as Width and Height. The ratio column is exactly what the tool shows in its Details panel, and label font size is the text size it uses for that image.
| Use | Width x height | Aspect ratio shown | Label font size | File name |
|---|---|---|---|---|
| Link preview (Open Graph) image | 1200 x 630 | 40:21 | 79 px | placeholder-1200x630.png |
| Full HD hero or slide | 1920 x 1080 | 16:9 | 135 px | placeholder-1920x1080.png |
| Wide page hero | 1600 x 900 | 16:9 | 113 px | placeholder-1600x900.png |
| Video thumbnail | 1280 x 720 | 16:9 | 90 px | placeholder-1280x720.png |
| Square social post | 1080 x 1080 | 1:1 | 135 px | placeholder-1080x1080.png |
| Portrait social post | 1080 x 1350 | 4:5 | 135 px | placeholder-1080x1350.png |
| Story or vertical video cover | 1080 x 1920 | 9:16 | 135 px | placeholder-1080x1920.png |
| Profile header banner | 1500 x 500 | 3:1 | 63 px | placeholder-1500x500.png |
| Card or article thumbnail | 400 x 300 | 4:3 | 38 px | placeholder-400x300.png |
| Small square thumbnail | 150 x 150 | 1:1 | 19 px | placeholder-150x150.png |
| Avatar | 64 x 64 | 1:1 | 14 px | placeholder-64x64.png |
The ratio is reduced to whole numbers, so 1200 x 630 appears as 40:21, the exact form of the ratio usually quoted as 1.91:1.
Standard advert sizes for ad slot placeholders
Useful for reserving space in a layout so the page does not jump when adverts load.
| Ad unit | Width x height | Aspect ratio shown | Label font size |
|---|---|---|---|
| Medium rectangle | 300 x 250 | 6:5 | 31 px |
| Large rectangle | 336 x 280 | 6:5 | 35 px |
| Leaderboard | 728 x 90 | 364:45 | 14 px |
| Billboard | 970 x 250 | 97:25 | 31 px |
| Half page | 300 x 600 | 1:2 | 38 px |
| Wide skyscraper | 160 x 600 | 4:15 | 20 px |
| Mobile banner | 320 x 50 | 32:5 | 14 px |
On short banners such as 728 x 90 the label sits at the 14 px minimum, so keep custom text brief.
How the label is sized and placed
label font size in px = the larger of 14 and (shorter side / 8), rounded
The text is drawn in your system's default sans-serif font, centred horizontally and vertically. An 800 x 600 image uses 600 / 8 = 75 px text; a 1200 x 630 image uses 79 px. If the label is wider than 90% of the image it is squeezed horizontally to fit instead of wrapping or shrinking, so long text on a narrow image looks condensed. There is one line only, with no line breaks, and no control over font, weight or position.
Worked examples
The tool draws on a browser canvas, so the picture itself depends on your device's fonts. The figures below are fixed by how the tool works.
Default settings
Width 800, Height 600, Background colour #94a3b8, Text colour #ffffff, Text empty
An 800 x 600 PNG reading 800 × 600 in white 75 px text. Details: Size 800 × 600px, Aspect ratio 4:3, Background #94a3b8. File placeholder-800x600.png.
Link preview placeholder with a label
Width 1200, Height 630, Text set to Blog post cover
A 1200 x 630 PNG with Blog post cover centred in 79 px text. Aspect ratio 40:21. File placeholder-1200x630.png.
The file name always comes from the size, never from the label.
Transparent slot marker
Width 400, Height 300, Text colour #000000, Transparent background ticked
A 400 x 300 PNG with 400 × 300 in black 38 px text and nothing else. Details show Background as Transparent.
Pick a text colour that shows against whatever sits behind the image on your page.
Out-of-range size
Width 5000, Height 600
Error: Choose a width and height between 16 and 4000 pixels.
A local file instead of a placeholder URL
Placeholder images are often loaded from a URL that draws the picture on a remote server each time the page is requested. That is quick to type, but the link then lives on in prototypes, style guides, email templates and test fixtures. If the service is slow, blocked by a company network, rate limited or gone, every one of those images breaks at once, and automated visual tests start failing for reasons unrelated to your code.
A downloaded PNG has none of those dependencies. It sits in your repository beside the other assets, loads from your own server or from disk, works with no network connection and looks the same in six months as it does today.
The trade-off is convenience. This placeholder image generator makes one image at a time and you save each file yourself; there is no URL pattern that returns an arbitrary size on demand. For a dozen fixed slots that takes a couple of minutes. For hundreds of generated sizes a script or a self-hosted image endpoint is the better fit.
Using placeholders to find layout bugs
- Generate one image at the size the design expects and one at a deliberately wrong ratio, such as 600 x 1200 for a landscape slot, to see whether the container crops, stretches or overflows.
- Leave the text empty in grids so every image states its own dimensions and a wrongly sized one stands out.
- Give each slot a different background colour to see at a glance which image a responsive rule has picked.
- Use a transparent placeholder to check that a container's own background and border still look right behind an image with see-through areas.
- Set the width and height attributes on the image element to the same numbers as the file, so the browser reserves the space before the image loads.
How to use it
- 1
Enter Width (px) and Height (px), each between 16 and 4000.
- 2
Choose a Background colour and a Text colour that contrast with each other.
- 3
Type a label in Text (optional), or leave it empty to print the dimensions.
- 4
Tick Transparent background if only the label should be drawn.
- 5
Check the preview, which redraws as you type, then download the PNG.