How do I generate placeholder images for a website mockup?

Two kinds of placeholder

Mockups usually need one of two things: a clearly fake block that shows the slot size, or a realistic photo that makes the design feel finished. For the first, a placeholder image generator draws an image at any width and height with your background color and a label like 1200x630, generated locally and downloaded as a file. For the second, a Lorem Picsum URL builder composes a URL that serves a random photo at your chosen size, with optional grayscale, blur and a seed so the same photo comes back every time.

Exact sizes prevent layout surprises

The main job of a placeholder is to hold the real image slot open at the correct dimensions, so the layout does not shift when final assets arrive. Generate placeholders at the exact sizes your design calls for, such as hero, card and avatar sizes, and label each one so nobody mistakes it for a final asset.

What runs locally and what does not

The placeholder image generator creates the file entirely in your browser, nothing is uploaded and no server is involved. The Picsum URL builder also runs locally, but the URLs it produces point at the Lorem Picsum service, which serves the actual photos, so use the local generator when the mockup must work offline or stay fully self-contained.

Step by step

1. Pick the dimensions. Decide the exact width and height each image slot needs, for example 1200x630 for a social card.
2. Generate the image. Enter the size, colors and label text in the placeholder image generator and create the image locally.
3. Download or copy a URL. Download the generated PNG, or use the Picsum URL builder if you want a random photo URL instead.
4. Drop it into the mockup. Place the file or URL in your layout and swap it for the real asset later.