Placeholder Image Generator — Dummy Images in Any Size, No Service Needed
Make a solid-colour placeholder with a label at any size — download PNG, JPG, WebP or SVG, or copy a data URI to paste straight into an img tag.
🔒 Runs in your browser — files never uploaded ⚡ No signup 💯 Free
Generate placeholder images for mock-ups, wireframes and layouts under construction: set the size, background and text colour, and a label (the dimensions by default), then download it as PNG, JPG, WebP or SVG. Or skip the file entirely and copy a data URI — an image encoded into the address itself — to drop into an <img src>, a CSS background or a design tool. Everything is made in your browser; no placeholder service is contacted, so your prototype keeps working offline and never breaks when a third-party host goes down.
How to use Placeholder Image Generator
- Pick a preset size or type width and height.
- Set colours and the label. Blank label = the dimensions, which is the convention.
- Download in the format you need, or copy the data URI or the whole
<img>tag.
Why not a placeholder URL?
Services that return an image from a URL like /600x400 are convenient until they are slow, rate-limited, blocked by an ad blocker, or gone — and every prototype built on them breaks at once. A local file or a data URI has none of those failure modes. The data URI is also the fastest option for a wireframe: no request at all, and the placeholder appears in the same paint as the rest of the page.
SVG or bitmap?
SVG is the best placeholder format: a few hundred bytes, sharp at any size, and the label is real text you can edit. Use it everywhere a browser will render it. PNG when the destination needs a raster — a design tool that does not import SVG, an email, a document. JPG only if a flat-colour PNG is somehow too large (it will not be). WebP for the same reasons as PNG on the web.
Data URIs
A data URI packs the image into the address: data:image/svg+xml,…. Browsers show it like any image, and it travels inside the HTML or CSS, so a mock-up is a single file. Keep them for small images — a 600×400 SVG placeholder is under a kilobyte, but a photo as a data URI bloats the page. Copy the ready-made <img> tag to get width and height attributes as well, which stops the layout jumping when the real image arrives.
Choosing colours
The default light grey with darker grey text is deliberately dull, so placeholders are obvious in a review and nobody mistakes them for design. For a presentation, match the brand colour and check the label stays readable with the contrast checker. For an actual image at a specific size, the resizer and social media resizer do the cropping.
Frequently asked questions
What is a data URI and how do I use it?
An image encoded into the address itself: data:image/svg+xml,…. Paste it as an <img src>, a CSS url() or into most design tools' image fields, and the placeholder appears with no file and no request. The "copy img tag" button gives the complete tag with width and height.
SVG or PNG?
SVG for anything a browser renders — it is tiny and sharp at every size. PNG for tools and documents that need a bitmap. JPG offers nothing for flat colours; WebP is PNG's smaller web-only cousin.
Can I change the label text?
Yes. Leave it blank for the dimensions (the convention), or type anything — "Hero image", "Logo", a note to the designer. The font size is automatic unless you set it.
Why not just use a placeholder service?
They go down, get rate-limited and are blocked by some ad blockers, and every prototype that depends on one breaks at the same time. A local file or data URI is dependable and works offline.
What is the largest size?
8,000 × 8,000 pixels for bitmaps. SVG has no practical limit since it is just a description of a rectangle and a label.