Placeholder Image Generator

Generate plain placeholder images of any size with custom colours and text — useful for mockups and prototypes.

Studio · neutral surround

Common sizes

Size (px)

Background / text

Custom text (empty = dimensions)

Font px

Features

Custom width/height

Custom colors

Custom text

Download PNG/SVG

How to Use

1. Pick a common size (OG image, avatar, HD…) or type exact pixel dimensions.

2. Set background and text colors — the checker surface helps when your placeholder will sit on unknown grounds.

3. Download the PNG, or copy it as a data URL to paste straight into an src attribute.

About this tool

While a layout is being built, real photos are often not ready, and broken image icons make it hard to judge spacing. This generator creates solid placeholder images at exact pixel sizes with your choice of background and text colour, labelled with their dimensions, or with your own text, so everyone knows what the final asset must be. Presets cover common needs — a 1200 × 630 Open Graph image, a 1600 × 900 Twitter card, a 1080 × 1080 square post, 1920 × 1080 HD, 4:3, a 1500 × 500 banner and a 400 × 400 avatar — or you can type any width and height. Download the result as a PNG, or copy it as a data URL and paste it straight into an img src attribute in a prototype, email template or test fixture.

Frequently Asked Questions

What is a data URL, and why copy one?

A data URL contains the whole image encoded as text, starting with data:image/png;base64. You can paste it into an <img src> or CSS background without saving or hosting a file, which is convenient for quick prototypes.

Should placeholder images match the final dimensions?

Yes. Using the exact final size and aspect ratio reveals layout shifts, cropping and text wrapping early, so the real images drop in without surprises.

What size should an Open Graph image be?

1200 × 630 pixels is the widely recommended size for link previews on Facebook, LinkedIn and many messaging apps. Keep important text away from the edges because some platforms crop to a square.

Why choose a checker or neutral background?

A neutral grey or a checker pattern makes it obvious that the image is a placeholder and helps you see how it sits on unknown backgrounds, so it is less likely to be mistaken for finished artwork.

Can I use these images in production?

They are meant for mockups and development. Leaving placeholders on a live site looks unfinished, and search engines see no useful image content, so replace them with real images and alt text before launch.