Placeholder Image Generator

Placeholder images — sometimes called dummy images — are the grey rectangles with their dimensions printed across them that you see all over half-finished designs. They look simple, but they do a surprising amount of work: they let you build and review a layout long before the real photos, screenshots, or illustrations exist. This guide explains what they are, when to reach for one, which sizes to pick, and how to make exactly the one you need with the free generator on this page.

What is a placeholder image?

A placeholder image is a temporary stand-in graphic. Instead of leaving a blank hole where a picture will eventually go, you drop in a plain image of the right size — usually a flat colour with the width and height written on it, and sometimes a diagonal cross. That single block of colour does three useful things: it reserves the space so the surrounding layout behaves correctly, it communicates the intended dimensions to everyone looking at the design, and it makes the gap obvious so no one mistakes an unfinished section for a finished one.

“Placeholder image” and “dummy image” mean the same thing. You may also hear “image placeholder”, “filler image”, or “mock image” — they all describe the same temporary block. Whatever the name, the goal is identical: hold the space until the real asset arrives.

When you actually need one

• Building a web page or app. Front-end developers use placeholders to wire up galleries, cards, and hero sections before any real media is uploaded, so they can test responsive behaviour and spacing.
• Designing a slide deck or document. Placeholders mark where charts or photos will land, keeping the layout stable while the content is gathered.
• Email and newsletter templates. A correctly-sized placeholder shows how an email will reflow on mobile before the marketing images are ready.
• Client mock-ups and wireframes. A clearly-labelled grey box says “image goes here” far better than an empty rectangle, and it keeps reviewers focused on structure rather than picture choice.
• Testing and demos. When you need a file of an exact pixel size to test an upload form, a CDN, or an image pipeline, a generated placeholder is faster than hunting for a real photo of the right dimensions.

How to generate a placeholder image

The tool at the top of this page runs entirely in your browser. Here is the whole process:

1. Set the size. Type a width and a height in pixels. If you’d rather start from a standard shape, tap a ratio preset (16:9, 4:3, 3:2, 1:1, …) or an exact-size preset such as 600×400 or 1920×1080. You can use the swap button to flip width and height — handy for switching between landscape and portrait.
2. Choose the colours. Pick a background colour and a colour for the text and lines. A light-grey background with mid-grey text is the conventional “placeholder” look, but you’re free to match your brand or make it bold so it stands out in a busy mock-up.
3. Edit the caption. By default the image is labelled with its own dimensions (for example, 600 × 400), which is exactly what most people want. You can type your own text instead — a section name like “Hero image” or “Product photo” is often clearer in a wireframe. Leave the field empty for a clean, text-free block.
4. Add a diagonal cross (optional). Turning this on draws two faint diagonal lines corner-to-corner, the classic “image not loaded” appearance. It makes a placeholder unmistakable at a glance.
5. Pick a format and download. Choose PNG for a normal raster image or SVG for a scalable vector, then click Download. The file is created instantly on your device.

PNG or SVG — which should you choose?

Both formats are offered because they suit different jobs.

PNG is a raster (pixel) format. It works everywhere — design tools, content management systems, chat apps, presentation software — and is the safe default when you just need an image file at a fixed size. Because a placeholder is mostly a flat colour and a bit of text, PNG files stay small.

SVG is a vector format. Instead of storing pixels, it stores the instructions to draw the rectangle, the text, and the cross. That makes it infinitely scalable: the same file looks razor-sharp whether it’s shown at 80 pixels wide or 4,000. It’s also typically tiny — often well under a kilobyte. SVG is ideal for responsive web layouts and retina displays, and it’s easy to tweak by hand later because it’s just text. The one caveat is that a few older tools don’t accept SVG; when in doubt, PNG is the universal choice.

Common placeholder sizes worth knowing

Reaching for a standard size keeps your mock-ups realistic. A few that come up constantly:

• 600×400 (3:2) — a versatile medium size for content cards, thumbnails, and blog headers.
• 800×600 (4:3) — the classic “standard” ratio, good for in-article images, slides, and documentation screenshots.
• 1280×720 (16:9, HD) — a lightweight widescreen size for video thumbnails and embedded players.
• 1920×1080 (16:9, Full HD) — the most common large screen size, perfect for hero banners, full-width slides, and wallpapers.
• Square (1:1) — avatars, app icons, product tiles, and square social posts. Common square sizes include 256×256, 512×512, and 1080×1080.

If none of those fit, just type the exact width and height you need — anything from a 1-pixel swatch up to 10,000 pixels per side.

A note on how this tool works

Everything happens in your browser. When you set the options, the tool draws the image on an in-page canvas for the live preview, and builds the final PNG or SVG the moment you click Download — so the file is created on your own device. How any data associated with the tool is handled is described in our privacy policy. There’s no account to create, no watermark added, and no limit on how many placeholders you can make.

Once your final artwork is ready, swap each placeholder for the real image at the same dimensions and your carefully-built layout will hold together perfectly.