Why use placeholder images instead of leaving image slots empty?

A placeholder reserves the exact width and height the real image will use, so the layout behaves the same before and after the final assets arrive — no reflow and, on the web, no Cumulative Layout Shift.

What size should a placeholder image be?

Match the real image's exact pixel dimensions and aspect ratio — a 16:9 hero, a 1:1 avatar, a 4:3 thumbnail — and export at 2x or 3x to plan for retina displays.

Which format should I export placeholder images in?

PNG or WebP for on-screen mockups, SVG when the size is still fluid, and Base64 or a Data URI when you want to embed the placeholder directly in a self-contained prototype.

Placeholder Images: How to Plan Layouts Before Final Visuals

TL;DR: Placeholder images are grey (or coloured) dummy graphics at exact dimensions that stand in for real photos while you design. Their real value is that they reserve the correct space early, so your layout behaves the same before and after the final assets arrive — no reflow, no surprises. This guide covers when to use them, which format to export, and how to avoid layout shift.

Waiting for final photography before you build a layout is backwards. Placeholder images let you commit to dimensions first, then swap in real visuals without the design moving underneath you.

placeholder image generator for wireframes

Why reserve space, not just fill it

The most valuable thing a placeholder does is hold the exact width and height the real image will use. If a layout is built around images with no reserved size, dropping in the final assets makes everything jump — text reflows, buttons move, and on the web that shows up as Cumulative Layout Shift. Designing with correctly sized placeholders from the start means the final swap changes the picture, not the position.

Match the real dimensions and ratio

A placeholder is only useful if it matches what's coming. Set the actual pixel dimensions and aspect ratio of the final image — a 16:9 hero, a 1:1 avatar, a 4:3 card thumbnail — so the mockup reflects reality. Labelling each placeholder with its size (many generators print the dimensions on the image) makes it easy to spot a mismatch during review.

Retina and high-DPI

On high-density screens an image needs more physical pixels than its layout size. Exporting a placeholder at 2×, 3×, or 4× scaling lets you test how the real asset will look on retina displays and confirm you've planned for the larger file the final version will need.

Which format to export

PNG / WebP — for on-screen mockups and prototypes.
SVG — resolution-independent, tiny, ideal when the exact placeholder size is still fluid.
Base64 / Data URI — embeds the placeholder directly in HTML or CSS, handy for a self-contained prototype with no external files.

A practical workflow

List the image slots your layout needs and their real dimensions.
Generate them in the Placeholder Image Generator — use batch mode to produce every size at once.
Drop them into the design and confirm nothing shifts when you resize the viewport.
Swap in real assets one by one; because the space is reserved, the layout stays put.

If you also need dummy copy to fill the text around those images, pair this with the Lorem Ipsum Generator so the whole mockup reads at realistic density.

Common mistakes to avoid

Using placeholders at the wrong aspect ratio, so the real image crops unexpectedly.
Not reserving image dimensions, causing layout shift when finals land.
Ignoring retina scaling and under-planning file size.
Shipping a placeholder to production because it was never swapped out.