Free Dummy Image & Placeholder Generator
92 Placeholder Studio — polished placeholders for websites, apps, and mockups in seconds.
Pick a preset or set a custom width and height, choose a style, and download an instant, polished placeholder image — plus a matching design set for a whole page. Everything runs locally in your browser.
A dummy image generator built for real layouts
Every design or build has a moment before the real photos, product shots, or illustrations are ready — but the layout still needs to be tested. This tool generates a custom placeholder image at the exact pixel dimensions you need, in a style that actually looks intentional, so you can move on with the rest of the page instead of staring at a plain grey box.
It isn't an AI image generator and it doesn't search a stock photo library — it draws clean, geometric placeholders directly in your browser using SVG and the Canvas API, so there's nothing to upload, wait for, or pay for.
Common placeholder image sizes
The six built-in presets cover the sizes that come up most often. Pick one, or switch to a custom width and height (with the aspect-ratio lock) for anything else.
| Preset | Dimensions | Typical use |
|---|---|---|
| Hero banner | 1200 × 630px | Page heroes, Open Graph / social share images |
| Blog thumbnail | 800 × 450px | Article cards, blog index thumbnails |
| Product card | 600 × 600px | E-commerce product tiles and listings |
| Profile avatar | 400 × 400px | User avatars, team photos, author bylines |
| Mobile screen | 375 × 812px | App screen mockups, mobile-first prototypes |
| Social post | 1080 × 1080px | Instagram and square social posts |
Four styles that look intentional, not generic
- Solid colour — a clean, single-colour fill. Good for a minimal, brand-matched placeholder.
- Gradient — a smooth two-colour blend, the most polished default for hero banners and social images.
- Pattern — a subtle dotted texture over the background, useful when a flat fill feels too plain.
- Skeleton — mimics a loading-state UI tile, ideal for mocking up content that will load in dynamically.
Every style respects your chosen background, gradient, and text colours, shows your custom text or the pixel dimensions, and scales its font size sensibly for both small icons and large banners.
Pairs well with
Once your placeholders are in place, the Image Optimization Guide covers the formats and sizes to use once real images replace them. Need an icon set to go with your mockup? The Favicon Generator builds every favicon size from one upload. Picking colours for the placeholder itself? Try the Color Palette Generator for a harmonious set to sample from.
Common questions
What size should a placeholder image be?+
It depends where it's going. Use 1200×630 for hero banners and social/OG images, 800×450 for blog thumbnails, 600×600 or 300×300 for product cards, 400×400 for avatars, and 1080×1080 for square social posts. The six built-in presets cover these automatically, and you can always set a custom width and height with the aspect-ratio lock on.
Is this an AI image generator?+
No. This tool doesn't generate photos or artwork and doesn't call any AI or stock photo service — it draws clean geometric placeholders (solid colour, gradient, pattern, or skeleton style) entirely with code, in your browser. It's built for filling layout space while real content or imagery is still in progress, not for producing finished visuals.
SVG, PNG, or WebP — which format should I use?+
SVG is a tiny, infinitely scalable vector file — best for design tools, code you'll style further, or anywhere resolution shouldn't matter. PNG is a universally supported raster image, the safest default for mockups, slides, and CMS uploads. WebP is a smaller raster format with the same visual result as PNG; it's offered only when your browser can actually encode it, so if you don't see a WebP button, your browser doesn't support exporting it and PNG is the equivalent choice.
How do I use a placeholder image on my website?+
Download the format you need and reference it like any other image — for example `<img src="/images/hero-placeholder.png" alt="" width="1200" height="630" />` in HTML, or as the `src` for `next/image`. Because the file already matches your target dimensions, it drops straight into the layout without extra cropping or resizing.
Can I add my own text and colours?+
Yes. Open the Customize section to set a background colour, a foreground/text colour, and — for the gradient style — a second colour. Add custom text (it defaults to showing the pixel dimensions if you leave it blank), and toggle whether dimensions are shown automatically. A contrast warning appears if your text and background colours are too close to read clearly.
What is a design set?+
A design set generates several placeholders at once, sized for a specific use case — an e-commerce page, a blog layout, an app's screens, or a social media kit — all in the style and colours you've chosen. You can download each image individually or grab the whole set as a ZIP.
Is there a size limit?+
Each side can be between 16px and 3000px. That covers everything from a small avatar to a large hero image while keeping exports fast and your browser tab responsive.
Is my data uploaded anywhere?+
No. Every placeholder is drawn and exported locally using SVG and the Canvas API. Nothing you type or configure is sent to 92nodes or stored anywhere outside your browser.
More free resources
Have a project in mind? Let's build it.
Tell us about your goals and we'll get back to you within one business day with next steps.
Book a free call