Placeholder Image Generator

Runs in your browserDesign Tools#Image

Make placeholder images of any size with your colours and text, as PNG, JPG, WebP or SVG.

Size presets

Width (px)

Height (px)

Background

Text colour

Text

Leave empty to show the size (1200 × 630). Long text wraps; press Enter for a new line.

Font size (px)

Empty fits the text automatically (now 138 px).

1200 × 630 px · text 138 px

Format

How to use, limits & privacy

About Placeholder Image Generator

Make placeholder images of any size from 1 to 8000 pixels, with your own colours and text. The text is sized to fit automatically and wraps onto several lines when it is long. Download the image as PNG, JPG, WebP or SVG, or copy it as a data URI or SVG markup. The images are drawn in your browser, so they work offline and are never uploaded.

How to Use

Set the size

Pick a preset such as OG image (1200×630) or Banner (728×90), or type a Width and Height in pixels. The swap button turns a landscape size into portrait.

Choose colours and text

Pick the Background and Text colour, or type their hex codes. Leave Text empty to show the size, or type your own; leave Font size empty to fit the text automatically.

Download or copy

Choose PNG, JPG, WebP or SVG under Format, then click Download. Copy data URI and Copy SVG put the image on your clipboard for use in HTML or CSS.

Privacy & Processing

Mode: local
Files Leave Browser: Local tool processing; review details below
Max Input Size: Device memory limits
Account Required: No
Data Stored Locally: Nothing is saved. The settings reset when you reload the page.
Network Processing: Assets or models may require an initial download

Images are drawn in your browser. Nothing is sent to a server.

Rules & Limitations

Width and height must be whole numbers from 1 to 8000 px. Larger values are brought down to 8000 when you leave the field.
Very large PNG, JPG or WebP images may fail on phones, which limit image memory. SVG has no such limit.
Some browsers, such as Safari, cannot create WebP files. The tool then saves a PNG and tells you.
Text uses your system's sans-serif font. An SVG opened on another device may use a slightly different font, so its lines can be a little wider or narrower.
JPG and WebP are saved at 92% quality. No format here keeps transparency, because the background is always filled.

Top Suggestions

Filling image slots in a website or app mock-up before the real photos are ready
Checking how an Open Graph image, ad or banner size fits a layout
Making a simple text image for a social media post or slide
Pasting a placeholder straight into HTML or CSS as a data URI

Placeholder Image Generator FAQ

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

Type the width and height in pixels, or pick a preset such as 1200×630 for an Open Graph image. The preview updates as you type; then choose a format and click Download.

What size should an Open Graph (OG) image be?

1200×630 pixels is the size most sites use for link previews on Facebook, LinkedIn, X and WhatsApp. Pick the OG image preset to start with that size.

Should I download PNG, JPG, WebP or SVG?

SVG is the smallest and stays sharp at any size, which suits web mock-ups. PNG is the safest choice for design apps. JPG and WebP make smaller files for photos, and WebP is supported by all current browsers.

What is a data URI and how do I use it?

A data URI holds the whole image inside a piece of text that starts with data:image/. Paste it where a URL goes, for example <img src="…"> in HTML or background-image: url("…") in CSS, and no separate image file is needed.

Are the images made on a server?

No. The image is drawn in your browser, so nothing is uploaded and the tool works offline once the page has loaded. Unlike placeholder services that serve images from their own URLs, your downloads keep working if a service goes down.