Make a placeholder image without an external service

Mockups and HTML samples need image files of a known size. Generate a labeled rectangle locally instead of hotlinking a placeholder service.

Tools used in this guide

The job

Design mockups, layout testing, and CMS seeding all want real image files at exact dimensions — 1200×630 for an OG card, 300×250 for an ad slot. A remote placeholder URL works in a browser but breaks in offline builds and leaks requests to a third party.

How to do it

Enter width and height, pick PNG/JPG/WebP, set background and text colors, and optionally override the label — leave it blank and the dimensions are drawn for you. Generate, then download.

The label auto-shrinks to fit; long custom text gets small rather than clipped.
Use a mid-gray background with white text for neutral mocks that do not distract reviewers.

Worked example

A landing-page mock needs a hero (1600×900), a sidebar card (400×300), and an OG preview (1200×630). Generate all three as PNGs in under a minute — each file name carries its dimensions, so slotting them into the markup is unambiguous.

Limits

Solid color plus one centered text line only — no gradients, patterns, or photos. WebP encoding depends on the browser's canvas support; if an export looks wrong, PNG is always available. Sizes run 8–4096 px per side.