How do I make a placeholder image of a specific size?

Type the width and height above and the image is generated immediately. Download it as SVG or PNG, or copy the data URI to paste directly into markup.

Why use a data URI instead of a placeholder service?

It removes a network request per image, works offline, and cannot break when a third-party service goes down or starts rate-limiting. For a page of forty placeholders that is forty fewer requests during development.

SVG or PNG for placeholders?

SVG for anything on screen — it is a few hundred bytes and stays sharp at any size. PNG when a tool insists on a raster image, such as a design app or an image field that validates the file type.

What size should an Open Graph image be?

1200 by 630 pixels, which is the preset here. It is the size Facebook, LinkedIn and most link-preview renderers crop to, giving a 1.91:1 card.

Can I use the generated images in production?

Yes. The output is plain SVG or PNG that you own outright — there is no attribution requirement and no external dependency once the file or data URI is in your project.

Placeholder Image Generator

Make placeholder images at any size and colour, as SVG, PNG or a data URI you can paste straight in.

The Placeholder Image Generator runs entirely in your browser. The SVG is built and rasterised on your device, and nothing is uploaded.

Open the Open Graph Generator

About Placeholder Image Generator

Placeholder services put a network request in the middle of a layout you are still designing, and a page full of them is slow, offline-hostile and one outage away from broken. Generating the same grey rectangle locally removes the dependency entirely: the result is an SVG you can save, rasterise to PNG, or paste as a data URI that needs no request at all. Sizes cover the ones people actually reach for — social cards, ad units, avatars, hero banners — and the label defaults to the dimensions, which is exactly what you want while a grid is being debugged. Colours, corner radius and the wireframe cross are all adjustable.

Features

Any width and height, with presets for social, ad and general sizes
Custom background and text colour, with an automatic readable default
Label defaults to the dimensions, or set your own text
Corner radius and the diagonal cross used in wireframes
Download as SVG, or rasterise to PNG at full resolution
Data URI that works offline and costs no request
Ready-made HTML, CSS background and JSX snippets
Aspect ratio shown in lowest terms

How to use the Placeholder Image Generator

Set the width and height, or pick one of the presets
Choose colours and a label, or leave the dimensions as the label
Copy the data URI, or download an SVG or PNG
Paste the HTML, CSS or JSX snippet straight into your layout

Example

Input

1200 × 630 · #e5e7eb background

Output

<img src="data:image/svg+xml,%3Csvg…" width="1200" height="630" alt="" />

An Open Graph card placeholder as a data URI — no request, no outage, and it renders identically offline.

Common errors & troubleshooting

The data URI breaks the CSS file. — Wrap it in double quotes inside url(), which the CSS snippet here already does. Unquoted data URIs containing commas and parentheses confuse some parsers.
The PNG comes out blurry on a retina screen. — Generate it at twice the display size. The PNG is rasterised at exactly the pixel dimensions you enter, so a 600-pixel-wide slot wants a 1200-pixel image.
The label overflows a short, wide box. — The font size is fitted to both the height and the label length, but a very long label in a banner-shaped box still runs out of room. Shorten the text or set an explicit size.

Frequently asked questions

How do I make a placeholder image of a specific size?: Type the width and height above and the image is generated immediately. Download it as SVG or PNG, or copy the data URI to paste directly into markup.
Why use a data URI instead of a placeholder service?: It removes a network request per image, works offline, and cannot break when a third-party service goes down or starts rate-limiting. For a page of forty placeholders that is forty fewer requests during development.
SVG or PNG for placeholders?: SVG for anything on screen — it is a few hundred bytes and stays sharp at any size. PNG when a tool insists on a raster image, such as a design app or an image field that validates the file type.
What size should an Open Graph image be?: 1200 by 630 pixels, which is the preset here. It is the size Facebook, LinkedIn and most link-preview renderers crop to, giving a 1.91:1 card.
Can I use the generated images in production?: Yes. The output is plain SVG or PNG that you own outright — there is no attribution requirement and no external dependency once the file or data URI is in your project.

Related tools

BlurHash Generator — Turn an image into a BlurHash string, and decode any hash back to a preview.
App Icon Generator — Turn one image into every iOS, macOS and Android app icon size — downloaded as a ZIP, in your browser.
SVG to PNG Converter — Convert SVG to PNG or JPG at any scale, with a transparent or solid background, in your browser.
Image Optimizer — Re-encode and shrink images (JPEG/WebP/PNG), optionally resizing.
Aspect Ratio Calculator — Simplify ratios, solve missing dimensions and fit sizes into boxes, with CSS output.
Open Graph Generator — Generate Open Graph & Twitter meta tags with a live social-card preview.