Generate customizable placeholder images for websites, applications, prototypes and testing. Everything runs locally in your browser.
×
4:3 · 480,000 px
dummy-image-800x600.png
0 B
Nothing to preview.
43
Common sizes
Aspect ratios
Devices
Social media
UI components
800 × 600 · 4:3 · 480,000 pixels · PNG · 0 B
Rendered in your browser — nothing is uploaded.
Everything happens locally in your browser. No images are uploaded or stored.
What is a dummy image generator?
A dummy image generator produces a picture of exactly the size you ask for, filled with a colour and a label, so that a layout can be built before the real artwork exists. It is scaffolding: something correctly shaped to occupy the space a photograph will eventually take.
The important word is correctly shaped. An image slot that is empty behaves nothing like one containing a 16:9 photograph, so a layout that looks right with gaps in it can fall apart the moment real content arrives. Filling those gaps at the right dimensions is how you find that out early.
This one runs entirely in your browser. The image is drawn onto a canvas — or written as SVG markup — encoded locally, and handed to you. No request is made and no file leaves the machine, which also means it works with the network off.
Why use placeholder images?
Because the alternative is worse in one of three ways, and each causes a different kind of problem.
Empty boxes hide layout bugs. An img with no source collapses, so the surrounding spacing, alignment and overflow behaviour are all different from the finished page.
Real photographs bias the review. A beautiful stock image makes a mediocre layout look good, and everyone ends up discussing the photograph. A grey rectangle keeps attention on the structure.
Remote placeholder services add a dependency. Putting a third-party URL in your markup means every render is a network request, your development pages break when that service is down, and those URLs have a remarkable habit of surviving into production.
A locally generated file avoids all three. It has the right dimensions, it is visibly a placeholder, and it is a file you own. When the real photograph arrives, the image compressor will resize it to the box the placeholder was standing in.
There is a fourth reason that only matters occasionally but matters a lot when it does: a remote placeholder URL tells whoever runs that service which pages you are building, and when. For anything unannounced, that is a leak.
Supported image formats
Four formats, and for placeholder artwork the differences between them are unusually clear-cut — flat colour and crisp text are exactly the content that separates them.
SVG
The right answer for most placeholders. An SVG is a few hundred bytes of markup whatever its dimensions, so a 4K placeholder costs the same as a thumbnail, and it scales to any size without softening. It can be pasted straight into your HTML or CSS as a data URI with no extra file at all.
The one caveat: an SVG loaded through an imgtag renders text with the viewer’s system fonts, so a label may look slightly different on another machine. For a placeholder that rarely matters; if it does, export a raster.
PNG
Lossless, with an alpha channel, and its compression is built for exactly this kind of picture — large areas of identical colour compress enormously well, so a flat 4K PNG is usually a few kilobytes rather than the megabytes its pixel count suggests. Choose it when you need a raster file with transparency or perfectly sharp edges.
WebP
Smaller than PNG for the same picture, with transparency, and supported by every current browser. It offers both lossless and lossy modes; the quality slider here drives the lossy one. A good default when the file is going into a real page.
JPEG
The weakest choice for this particular job, and worth understanding why. JPEG has no alpha channel, so transparency is impossible. More importantly its compression is tuned for photographs — gradual tonal variation — and placeholder artwork is the opposite: hard edges between flat regions. That produces visible ringing around text and borders even at high quality settings.
Rough guide
1Placeholder, will be replaced → SVG2Needs transparency → PNG or WebP3Going into a production page → WebP4Something downstream demands JPEG → JPEG, quality 90+
Common placeholder sizes
The single most useful habit is to match the box the image will really occupy. A placeholder at the wrong aspect ratio conceals precisely the problems you are generating it to find.
Size
Ratio
Used for
1200 × 630
1.90:1
Open Graph and social sharing
1920 × 1080
1.78:1
Desktop hero banners
1200 × 675
1.78:1
Blog and article covers
800 × 800
1.00:1
Product photography in a grid
128 × 128
1.00:1
Profile avatars
1080 × 1920
0.56:1
Vertical stories and reels
Website banners are usually 1920 pixels wide and short — 1920 × 640 is a common hero. Blog images settle around 1200 × 675, which is 16:9 and crops predictably into social previews. Product images are square far more often than not, because a grid of mixed ratios is hard to lay out. Avatars are small squares, typically 128 or 400 pixels, displayed round.
Open Graph images deserve their own note: 1200 × 630 is the size every platform reads from og:image, and it is not 16:9 — it reduces to 40:21, or 1.90:1. Designing at 16:9 and hoping is how text ends up cropped in the preview card.
The tool ships 43 presets covering these plus device screens, every common social format and the usual UI parts. The search box matches names, uses and raw dimensions, so typing 1080 finds everything that size.
How to generate a placeholder image
1. Set the size.Type the width and height, or pick from the presets — search by name (“Instagram story”), by purpose (“avatar”) or by number (“1080”). Swap flips the orientation.
2. Choose a format. SVG for something that will be replaced, PNG or WebP for a raster file. The quality slider appears for JPEG and WebP and its effect is visible in the preview immediately.
3. Style it.Background colour or gradient, or none at all for transparency. Seven shape styles, including the crossed box that conventionally means “a picture goes here”. The colour picker is where to settle on the hex value if the placeholder should sit in the palette rather than shout.
4. Set the text. Anything you like, over several lines if you want. It scales to the image by default and shrinks so the longest line always fits. The dimensions line can be toggled independently.
5. Take the result. Download it, or copy the image itself to the clipboard, or copy the SVG markup, a data URL or raw Base64 to paste straight into code — the Base64 encoder does the same job for the real file once it replaces this one.
The preview is the encoded file rather than a live drawing, so what you are looking at is exactly what you will get — including any compression artefacts the quality setting introduces. Press Ctrl+Shift+R to randomise everything when you just need something that is not grey.
Common use cases
Anywhere a layout has to be judged before its content exists.
UI design
Filling image slots while a layout is being built, so the composition can be judged before any real photography exists. The grid overlay makes it easy to check the box sits on your spacing scale.
Wireframes
The crossed-box style is the long-standing convention for “a picture goes here” — deliberately unfinished-looking, so nobody mistakes a wireframe for a design review.
Prototypes
Clickable prototypes need images that load instantly and never 404. A local file with the right dimensions keeps the prototype honest about how the real layout will behave.
CMS development
Seeding a content model with images of every size the templates accept, so you find out early which aspect ratios your crop rules actually handle.
Testing
Fixtures for upload flows, thumbnail pipelines and image-processing code. Generating a precise size — including awkward ones like 1 × 5000 — is far quicker than hunting for a real file.
Demo projects
Portfolio pieces and tutorials that need images without licensing questions. Everything here is geometry and text, so there is nothing to attribute.
Documentation
Showing where a screenshot will go before it is taken, or standing in for a diagram that has not been drawn yet, at exactly the size the final asset will be.
Presentations
Blocking out a slide layout with correctly proportioned rectangles, which reads far better in a review than empty boxes or borrowed stock photography.
Frequently asked questions
Is this Dummy Image Generator free?
Yes. Every size, format, style and preset is free, with no account, no watermark and no cap on how many images you generate.
Are images generated locally?
Yes, entirely. The image is drawn by your own browser onto a canvas and encoded there — nothing is sent to a server, and there is no network request involved in generating, previewing or downloading it. You can disconnect from the internet after the page loads and keep working.
Do the generated images have a watermark?
No. The only thing drawn is what you asked for. The optional dimensions line is a setting you control, and turning it off leaves the image completely clean.
Can I create transparent images?
Yes — set the background to None and export as PNG, WebP or SVG. JPEG is the exception: the format has no alpha channel at all, so a transparent background gets flattened. The tool warns you when that combination is selected rather than silently producing a white rectangle.
Can I generate SVG placeholders?
Yes, and for placeholders it is often the better choice. An SVG is a few hundred bytes regardless of dimensions, scales to any size without blurring, and can be pasted directly into your markup as a data URI. The one caveat is fonts: an SVG rendered through an img tag uses the viewer's system fonts, so text may look slightly different on another machine.
Can I customize the colors?
Yes. Background and text colours are both free-form, entered as hex and shown alongside their RGB and HSL equivalents. There is also a gradient option with two stops. The Stats panel reports the contrast ratio between your text and background against the WCAG AA threshold, which is useful when the placeholder is going into a design review.
Can I add custom text?
Yes, including multiple lines — press Enter inside the text box. You can choose a sans, serif or monospace family, bold and italic, the colour and the alignment. By default the text scales itself to the image and shrinks so the longest line always fits; turn auto-scale off if you want to set a size yourself.
Can I generate Open Graph images?
Yes, and there is a preset for it: 1200 × 630, the size every social platform reads from og:image. It is in both the common sizes and the social media groups, and searching for “og” or “open graph” finds it.
Can I create large images?
Up to 5000 × 5000, which is 25 megapixels. A 4K placeholder generates in well under a second. Very large PNGs take slightly longer to encode than JPEGs because PNG compression is lossless, but for flat placeholder artwork the files stay small — a solid-colour 4K PNG is usually a few kilobytes, because there is so little variation to compress.
Which format should I use?
SVG for anything that is genuinely a placeholder, because it is tiny and scales. PNG when you need a raster file with sharp edges or transparency. WebP when you want a raster file that is smaller than PNG and your targets support it, which today is everything current. JPEG only if something downstream demands it — it cannot do transparency and its compression adds artefacts around the crisp edges of text.
What size should a placeholder be?
Match the box it is going into, so your layout behaves the way it will in production. A placeholder that is the wrong aspect ratio hides exactly the problems you are trying to find. The preset library covers the common cases — device screens, social formats, and UI parts such as avatars, cards and hero banners.
Why is the aspect ratio shown as something like 40:21?
Because that is the exact reduction. 1200 × 630 has a greatest common divisor of 30, giving 40:21 — it is close to 16:9 but not equal to it, which is precisely the sort of thing worth knowing when you are matching a design. The decimal is shown alongside so it stays readable at a glance.
Can I copy the image instead of downloading it?
Yes, four ways: the image itself to your clipboard for pasting into a design tool, the SVG markup, a data URL, or raw Base64. Clipboard images are always copied as PNG, because it is the only image type every browser reliably accepts on the clipboard.
What is the grid overlay for?
Checking that a layout lines up with a spacing system. Overlaying an 8px grid on a placeholder makes it obvious whether the surrounding padding and gaps are on the same rhythm, which is much easier to see against a filled box than against empty space.
Can I use these images commercially?
Yes. They are geometric shapes and text generated by your own browser from your own settings — there is no third-party artwork involved and nothing to licence. Use them anywhere.
Why not use a placeholder service like placehold.co?
Those services work by putting a URL in your markup, which means every render costs a network request, your development pages depend on someone else's uptime, and the URLs often survive into production. Generating a file locally means it works offline, adds no third-party dependency, and cannot leak which pages you are building through a request log.
Does the downloaded file match the preview exactly?
Yes, because the preview is the encoded file. Rather than showing a live canvas and encoding separately at download time, the tool encodes first and previews the result — so the quality slider, the format and any compression artefacts are visible before you commit.
Does this work offline?
Once the page has loaded, yes. Generation, preview, copying and downloading are all local, so it keeps working with the network disconnected.
Keep going
Tools that pair with this one
Same privacy model — everything below runs in your browser too.
