Placeholder Image Generator
Dummy images at exactly the size you need — without calling a placeholder service on every page load.
The last button generates all nine preset sizes in the current style, which is a quick way to fill a whole mockup.
What the placeholder Image Generator does
Placeholder images fill a layout before the real pictures exist. The usual approach is a service that returns a generated image from a URL, which works but has real costs: every page render hits a third party, the images vanish if the service goes down or changes its API, and a mockup shared with a client leaks a request to an outside domain.
This generator produces the files instead, so they live in your project and behave like any other image. Each one is labelled with its dimensions by default, which is the single most useful feature of a placeholder — when a layout looks wrong you can read the size straight off the picture and see immediately whether the slot or the asset is at fault.
Faint crossed diagonals are drawn across every placeholder. That is deliberate: if the image gets stretched by a CSS rule that forces the wrong aspect ratio, the diagonals stop meeting the corners and the distortion becomes obvious at a glance. It is much easier to see than a slightly wrong proportion on a flat rectangle.
Five styles suit different purposes. Solid is unobtrusive. Gradient reads as more finished in a client-facing mockup. Checkerboard and diagonal stripes make it unmistakable that the image is a placeholder, which is what you want when the risk is shipping one by accident. The measurement grid overlays a rule every tenth of the image, which is useful for checking crops and safe areas.
The preset list covers the sizes that actually recur: Open Graph cards, the three main social shapes, Full HD, and the standard ad units. Generating all nine at once gives you a complete set for a mockup in one download.
How to use it
- Pick a preset or type exact dimensions.
- Choose a style — stripes or checkerboard if the risk of shipping a placeholder is real.
- Add label text if the dimensions are not the most useful thing to display.
- Download one image, or take all nine preset sizes as a ZIP.
A worked example
Building a mockup for an article page needs several sizes at once:
| Slot | Size | Ratio |
|---|---|---|
| Social share card | 1200 × 630 | 40:21 |
| Hero image | 1920 × 1080 | 16:9 |
| In-article figure | 800 × 600 | 4:3 |
| Author avatar | 400 × 400 | 1:1 |
The Download every preset as ZIP button produces all of these plus the ad units in one go, all in the same style so the mockup looks coherent. Drop them into the project, and any slot where the image looks stretched is showing you a CSS problem rather than an asset problem — because the diagonals will not reach the corners.
Frequently asked questions
Why generate files instead of using a placeholder service?
Because the files then live in your project. No third-party request on every render, nothing that breaks when a service changes or disappears, and no outbound call when you share a mockup with a client. It also works offline.
What are the diagonal lines for?
They make distortion obvious. If a CSS rule stretches the image to the wrong aspect ratio, the diagonals stop meeting the corners — far easier to spot than a subtly wrong proportion on a plain rectangle.
Should I use PNG or JPEG for placeholders?
PNG for flat colours and stripes, which compress extremely well and stay crisp. JPEG only if you need to simulate a photograph's file size in a performance test.
Can I use these in production?
You can, but the point of the striped and checkerboard styles is to make sure you do not. If a placeholder reaches production it should be immediately obvious to anyone who looks at the page.