Image Placeholder Generator
Make dummy images for mockups, wireframes and ad slots in any size, colour and format. Download the file or copy it as a data URI — no external placeholder service needed.
- Instant preview
- HTML and data URI
- Batch as ZIP
- Nothing uploaded
Leave empty to show the size. Use {w}, {h} and {ratio} anywhere in your text.
Many sizes at once
Write each size as 300x250. All images use the colours and format chosen above. Up to 60 sizes.
How to create a placeholder image
Three steps, and the preview updates while you type.
- 1
Set the size
Type the width and height in pixels or pick a common size such as 300 × 250, 1200 × 630 or 1920 × 1080.
- 2
Choose the look
Pick the background, text colour, font and text. Leave the text empty to print the size on the image.
- 3
Download or copy
Save the file as PNG, JPG, WebP or SVG, or copy the image, a data URI or ready-made HTML, CSS and Markdown.
Everything a placeholder needs
Built for designers and developers who need a dummy image right now.
Any size
Every width and height from 1 to 8000 px, with presets for web layouts, ad formats and social media.
Your colours
Solid colour, two-colour gradient, wireframe cross or stripes, with ready-made colour themes.
Custom text
Write your own label and use {w}, {h} and {ratio} to insert the size automatically.
Four formats
PNG, JPG and WebP for pixels, SVG for the smallest file that stays sharp at every size.
Retina files
2× and 3× export creates sharp images for high-resolution screens.
Copy as code
Copy an <img> tag, a CSS background rule or Markdown, optionally with the image embedded.
Batch export
Paste a list of sizes and download all placeholders in one ZIP file.
No dependency
The image is a real file in your project, so nothing breaks when a placeholder service is down.
What is a placeholder image and when should you use one?
A placeholder image is a neutral dummy picture that reserves the space of a real image that does not exist yet. Designers use placeholders in wireframes and mockups, developers use them while building templates, shops and themes, and advertisers use them to mark ad slots. Because the placeholder has the exact pixel size of the final image, the layout can be built and tested before the photos arrive.
Many projects load placeholders from an external service through a URL. That is quick, but every page view then depends on a third-party server, sends a request to it and fails when the service is slow or offline. A file generated here is different: it is a normal image that you save in your project or embed as a data URI, so it also works offline, in e-mail templates and in automated tests.
For most cases SVG is the best format: a 600 × 400 placeholder is only a few hundred bytes and stays sharp on every screen. Choose PNG when a tool only accepts pixel images, JPG or WebP when you want to test with realistic file types, and the 2× option when you need to check how a layout behaves with high-resolution images. Always write the width and height attributes in your HTML so the page does not jump while images load.
Common placeholder sizes
| Use | Size in px | Aspect ratio |
|---|---|---|
| Open Graph share image | 1200 × 630 | 1.91:1 |
| Full HD hero or video frame | 1920 × 1080 | 16:9 |
| Medium rectangle ad (IAB) | 300 × 250 | 6:5 |
| Leaderboard ad (IAB) | 728 × 90 | 8.09:1 |
| Instagram portrait post | 1080 × 1350 | 4:5 |
| Square avatar or thumbnail | 400 × 400 | 1:1 |
Tips
- When the real pictures arrive, bring them to the reserved size with the Image Resizer so the layout stays exactly as designed.
- Need a real share image instead of a grey box? The OG Image Generator creates 1200 × 630 images with title, logo and background.
- Use the Social Media Image Resizer to produce the final images for every network from one picture.
- Use the wireframe background for client presentations: the crossed box is the classic sign for “image goes here” and is never mistaken for final artwork.
Frequently asked questions
Can’t find your answer? Contact us — we reply quickly.
Is the placeholder generator free?
Yes. There is no sign-up, no watermark and no limit on the number of images. You can use the placeholders in private and commercial projects.
Are my settings or images sent to a server?
No. The image is drawn in your browser with the canvas of your device, and the download is created locally. Nothing is uploaded.
Which format should I choose?
SVG is the smallest and sharpest choice for websites. Use PNG if a program needs a pixel image, and JPG or WebP if you want to test with those file types.
What does 2× or 3× mean?
The file contains two or three times as many pixels in each direction, for example 1200 × 800 px for a 600 × 400 placeholder. The size in your HTML stays 600 × 400, so the image looks sharp on high-resolution screens.
Can I create many sizes at once?
Yes. Open Many sizes at once, enter one size per line, such as 300x250, and download up to 60 placeholders as a ZIP file.
What is a data URI?
A data URI contains the whole image as text inside your HTML or CSS, so no separate file is requested. It is practical for small placeholders, prototypes and e-mail templates.
More free image tools
Resize, compress, convert and clean up images — fast, free and private, right in your browser.