Placeholder image generator
Make dummy images at any size with your own colours, label and grid. Export PNG, WebP or SVG, or copy a data URI you can paste straight into markup.
- Runs in your browser
- Nothing you enter is sent
- Free, no account
Aspect ratio 1.905:1. Maximum edge is 4000 px, which keeps the data URI usable.
Contrast 8.40:1.
Makes it obvious at a glance that the image is a stand-in, and shows the layout box it occupies.
Prints “1200 × 630” and keeps it in step with the size fields.
Rendered at 88 px.
PNG is lossless and universally supported, including in email clients and older tooling.
How to make a placeholder image
- Enter the size, or pick one of the presets — Open Graph, hero, thumbnail, avatar and the standard ad slots are all there.
- Set the colours. The label stays legible automatically if you press “Auto” next to the text colour.
- Leave the grid on if you want it obvious at a glance that the image is a stand-in.
- Choose PNG, WebP or SVG, then download the file or copy the data URI straight into your markup.
Why not use a placeholder service
Services like placehold.co, via.placeholder.com and Lorem Picsum are convenient until they are not. Each image is a request to somebody else’s server, which means:
- Your prototype gets slower. A grid of twenty placeholders is twenty DNS lookups, TLS handshakes and round trips.
- Your work leaks. The referrer header tells the service which page — often on a staging domain — is loading the image.
- Layouts break without warning. When the service is down, rate-limits you, or quietly changes its URL format, every mockup in the project breaks at once.
- They cannot be used offline — on a plane, in a client meeting, behind a strict firewall.
A generated file or an inline data URI has none of those problems, costs nothing, and looks exactly the same every time.
Which format to pick
| Format | Typical size | Scales | Best for |
|---|---|---|---|
| SVG | Under 1 KB | Infinitely | Almost everything — inline data URIs, responsive layouts, design handoff |
| PNG | 5–60 KB | Fixed | Email templates, older tooling, anything that refuses SVG |
| WebP | 25–35% smaller than PNG | Fixed | Web mockups where file size matters and support is guaranteed |
SVG wins for a placeholder because the content is a rectangle, a couple of lines and some text — the exact shapes vectors are built for. The result is a few hundred bytes at any dimension, and it stays sharp on a 3× display without a second file.
Standard image sizes worth remembering
| Use | Size | Ratio | Notes |
|---|---|---|---|
| Open Graph / social share | 1200 × 630 | 1.91:1 | Facebook, LinkedIn, Slack, Discord, WhatsApp |
| Twitter summary_large_image | 1200 × 675 | 16:9 | Also crops acceptably at 1.91:1 |
| Instagram feed | 1080 × 1080 | 1:1 | Portrait 1080 × 1350 gets more screen space |
| Full-width hero | 1920 × 1080 | 16:9 | Serve a 960 px version to mobile |
| Card thumbnail | 400 × 300 | 4:3 | Common in listing grids |
| Avatar | 256 × 256 | 1:1 | Rendered anywhere from 24 to 128 px |
| Leaderboard ad | 728 × 90 | 8.09:1 | IAB standard |
| Medium rectangle ad | 300 × 250 | 1.2:1 | IAB standard, the most widely bought slot |
Data URIs: when they help and when they hurt
A data URI embeds the whole file in the document as Base64 text. That removes a network request, which is genuinely useful for a tiny image needed immediately — but it comes with costs that are easy to overlook:
- Roughly 33% larger. Base64 spends four characters on every three bytes.
- No separate caching. The image is re-downloaded with the HTML on every uncached page view, and cannot be shared between pages.
- Parser cost. A very long data URI in the markup is bytes the HTML parser must chew through before it can continue.
- Unreadable diffs. A 40 KB string in a component file makes code review miserable.
The practical line is a few kilobytes. Under that, inline it. Above roughly 30 KB, save the file and link to it — the tool warns you when the URI crosses into that territory. SVG stays well under the limit at any dimension, which is another reason to prefer it here.
Reserving space and avoiding layout shift
Placeholders exist to prove a layout works, so use them the way the real images will be used:
always give the <img> explicit width and height
attributes. Modern browsers use the ratio between them to reserve the correct box before the
file has loaded, which is the difference between a page that settles smoothly and one that
jumps. The copyable <img> tag above already includes both.
Questions
Why not use a placeholder service like placehold.co?
Every one of those images is an external HTTP request that slows your prototype down, leaks the page you are building to a third party, and breaks the moment the service has an outage or starts rate-limiting. A local file or a data URI has none of those problems.
When should I use SVG instead of PNG?
Almost always, for a placeholder. The SVG output is a few hundred bytes, stays sharp at any zoom level, and makes a tiny data URI. Use PNG or WebP when the destination is an email template, a design tool, or anything that will not render SVG.
What size should a social share image be?
1200 × 630 is the safe default: Facebook, LinkedIn and Slack all crop to roughly 1.91:1, and Twitter’s summary_large_image uses the same proportions. The presets above cover that plus the common ad and thumbnail sizes.
Is a data URI a good idea in production?
Only for very small images. A data URI is about a third larger than the file it carries, cannot be cached separately from the document, and blocks the HTML parser while it is read. Under a few kilobytes it saves a round trip; above roughly 30 KB it costs more than it saves.