Placeholder Generator

How to use Placeholder Generator

1. Set the width and height you need.
2. Generate and download the PNG.
3. Drop it into your mockup with explicit width and height attributes.
4. The dimensions are drawn on the image, which makes scaling problems visible at a glance.
5. Generated locally as a PNG — no external service and no network request.
6. Use the aspect ratios you expect to receive, not only the ones you designed for.

Why generate rather than use a service

The familiar placeholder services work by URL, which means every mockup carries an external dependency: the images vanish when the service goes down, when it changes its URL format, or when the file is opened offline or behind a firewall. Several popular ones have closed over the years and broken years of archived mockups. A generated PNG sits in your project and keeps working. It also keeps client work private, since no request is made carrying your dimensions or your page’s referrer.

Placeholders reveal layout bugs that real images hide

The label showing the dimensions is the useful part: when a 400×300 placeholder renders at 300×300, you can see the distortion immediately, where a photograph would just look slightly off. Test with the aspect ratios you will actually receive rather than the ones you designed for — users upload portrait phone photos into slots designed for landscape hero images, and the layout that only works at 16:9 fails on the first real upload.

What to check while the placeholders are in

Set explicit width and height attributes so the browser reserves space before the image loads — without them the page reflows as images arrive, which is what Cumulative Layout Shift measures and penalises. Check the alt text is written, not left empty or filled with the filename. And decide the object-fit behaviour now: cover crops, contain letterboxes, and the wrong choice is much more obvious in a placeholder than in a photograph.