Placeholder image maker

Why bother with a real image at all

A grey box in CSS tells you nothing about how a layout copes with a 16:9 hero versus a 1:1 avatar, or whether an image-heavy grid still reads once every tile is actually filled. A correctly sized placeholder — even a plain rectangle — exercises the same aspect ratio, the same object-fit behaviour, and the same layout shift questions that the real asset eventually will.

Picking a size that matches reality

The presets cover the sizes people reach for most often: common screen and video ratios (1920×1080, 1280×720), a couple of square formats for avatars and social posts, and the 300×250 "medium rectangle" ad unit that's still one of the most widely supported ad sizes on the web. For anything else — a specific card thumbnail, a banner width from a design spec — type the exact pixels into the custom fields.

Legible labels without extra effort

With automatic contrast on, the tool reads the background colour's brightness and switches between black and white text so the label stays readable against anything from a pale cream to a dark navy. Turn it off if you'd rather match a specific brand colour and are confident it'll still read clearly against your chosen background.

---

A note on file size and format

A flat colour compresses extremely well as PNG — usually a few kilobytes regardless of dimensions — because there's almost no variation for the encoder to store. JPEG and WebP exist here mainly for cases where you want a placeholder that behaves like a real photo in terms of file weight, for example when testing a page's loading performance budget rather than its layout.