Placeholder Image Generator

Why generate rather than hotlink

The usual approach is to point an img tag at a third-party placeholder service. That works until it does not: the service rate-limits, goes down, changes its URL format, or disappears entirely, and every mockup and staging environment referencing it breaks at once. Several well-known placeholder services have done exactly this. Generating the file locally and committing it means the asset is yours and keeps working offline, in CI, and on an aeroplane.

Label the dimensions on the image

A placeholder showing its own pixel dimensions is far more useful during layout work than a plain grey box, because you can see at a glance whether the rendered size matches what you intended. This catches a container scaling an image unexpectedly, which is otherwise easy to miss.

Match the aspect ratio you will actually ship

The most common placeholder mistake is using square images throughout and discovering at content time that real photographs are 3:2 or 16:9, at which point every card in the grid changes height. Decide the aspect ratio early, generate placeholders in it, and set aspect-ratio in CSS so the layout is locked regardless of what arrives later.

Set width and height attributes

Even for placeholders, declaring intrinsic dimensions in the markup lets the browser reserve space before the image loads. Testing without them means your development environment hides the layout shift that real users will experience, and Cumulative Layout Shift is a Core Web Vitals metric.

Consider SVG for flat placeholders

A solid-colour rectangle with a text label is a handful of bytes as SVG and scales to any size without a second file. For a simple placeholder that is strictly better than a PNG: smaller, resolution-independent, and editable in a text editor. Use a raster format only when you need to simulate photographic content.

Remove them before launch

Placeholder images that reach production are visible and embarrassing, and an alt attribute left saying “placeholder” is read aloud by screen readers as though it were meaningful. Sweep for both alongside the copy review.