Placeholder Image Generator

The layout review is at four. The hero section needs its image, the product grid needs twelve thumbnails, and the avatar stack needs circles. The photographer delivers Thursday. The client is signing off on structure today. So the mockup gets gray rectangles — except gray rectangles do not say what size they are, do not match the brand's palette, and do not tell the developer whether that slot is 600 pixels wide or 800.

Placeholder images are the professional answer to that afternoon: labeled, correctly-sized, brand-colored stand-ins that carry exactly the information a layout review needs and nothing it does not. For years the standard move was a hosted service — type a URL, get a gray box with dimensions. Those services work until they are slow, or rate-limited, or simply shut down, which is a memorable discovery to make mid-sprint.

This generator does the same job without the service. Dimensions, colors, and label in; canvas-rendered PNG out, with URL-parameter support for the share-and-reload workflow developers actually use. No network dependency, no quota, no third party whose uptime now matters to your design review. Just arithmetic, color, and text — which is all a placeholder ever really was.

1. 1

   Type the dimensions

   Width and height in pixels — 600×400, 1920×1080, anything the layout calls for. The preview renders instantly at proportional scale, and the label updates to match.

2. 2

   Pick background and text colors

   Hex values for both. The auto-contrast button picks a text color that clears accessibility contrast against your background — handy when the background is a mid-tone brand color.

3. 3

   Set the label

   The default label is the dimensions themselves, which is what most reviews want. Override with a role — HERO, AVATAR, LOGO SLOT — when the placeholder should communicate intent instead of geometry.

4. 4

   Generate and download

   One click renders the canvas and downloads a PNG at the exact dimensions you typed. Batch mode takes a list of sizes and delivers the whole set.

5. 5

   Or copy the URL

   The generator's settings live in the URL — dimensions, colors, label as parameters. Copy it into documentation, a teammate's chat, or a component library example, and anyone opening it gets the identical placeholder.

The pipeline is three drawing calls and one export. A canvas is created at your exact pixel dimensions. The background is a single fillRect covering the whole surface in your chosen color. The label is drawn with fillText, sized relative to the canvas — roughly one-twelfth of the width, capped so long text never overflows the edges — and centered with the canvas text metrics API, which measures the actual rendered width of the string rather than guessing. Export encodes the canvas to PNG via the standard toBlob call, and the download begins.

The URL parameter support is the part that echoes the classic services. Dimensions, background, text color, and label are encoded with the browser's URLSearchParams — the same mechanism behind every search box you have ever used. That gives placeholders shareable addresses: change 600x400 to 1200x630 in the link and the same page regenerates at the new size. Deterministic, stateless, and self-documenting, which is why the pattern has survived a decade of frontend churn.

Text color selection has a little math inside it worth knowing. The auto-contrast option computes the background's relative luminance — the same weighted red, green, and blue calculation accessibility checkers use — and picks white text on dark backgrounds or near-black on light ones. On a background of #1F2937, a common dark UI gray, white text lands around 14-to-1 contrast; on #F9FAFB, near-black clears roughly 15-to-1. Either way the label stays readable at any size, including the tiny ones.

Font choice is quieter but real: the label renders in a monospace stack so that 600×400 reads as a measurement rather than a word. Proportional fonts make numerals drift and widths lie; monospace makes the label a specification. Small detail, and the difference between a placeholder that feels engineered and one that feels generated.

The output file size is the last quiet property worth knowing: flat-color PNGs compress to almost nothing because the format's DEFLATE pass collapses long runs of identical pixels. A 1920×1080 placeholder in one gray with a short label typically lands under 20 KB, where the same canvas carrying a photograph would weigh hundreds. That makes a full placeholder set cheap to commit to the repository itself, where the files outlive the redesign as a record of what each slot was built to hold.

Here is the standard website set, the one that covers nearly every slot in a contemporary layout. Background #1F2937 for the hero, #E5E7EB for content slots, white labels on dark and near-black on light:

The set illustrates the quiet advantage of placeholders over real images during layout work: consistency. Every slot announces its geometry, every label states its role, and a mis-sized slot in the responsive build is visible from across the room — the 320×200 thumbnail rendering at full card width announces itself in a way a pretty photograph never would. The placeholder is the only image in the build whose job is to be wrong loudly.

Half the placeholder requests in a modern project are not page slots at all — they are social and search surfaces, each with its own published geometry. Generating those stand-ins at the right numbers before content exists keeps the launch checklist honest. The current numbers worth memorizing:

The aspect column matters more than the pixel column once a responsive build starts serving several widths from one source file. 40:21 keeps its shape at 600 × 315, 1200 × 630, and 2400 × 1260; a placeholder that states the ratio in its label — OG 1.91:1 — survives a re-specification better than one that states a single pixel pair nobody remembers the origin of.

When a destination changes its mind — and social surfaces do, every couple of years — the placeholder set absorbs the change in a batch regenerate rather than a photography reshoot. That is the quiet economic argument for the whole discipline: mockup geometry is cheap to revise, delivered assets are not, and the placeholder is the wall between them.

The swap point is a project-management decision as much as a design one, and the phases have clean boundaries:

• Wireframing — pure geometry. Dimensions and roles only; color optional. The placeholder set is doing structural work.
• Visual design — brand colors on, labels shortened, proportions real. Placeholders now carry palette and hierarchy.
• Staging and QA — placeholders stay until real assets exist, because they make missing slots obvious in staging builds and QA screenshots.
• Launch — the swap. Every placeholder is a TODO by design; if one ships to production, it fails loudly enough to be caught, which is the entire strategy.

The demand is a permanent fixture of software work, and the user list reflects it:

• Front-end developers — slot-filling during component development, with URL-parameter placeholders dropped into stories and documentation
• UX and UI designers — layout reviews where geometry, not photography, is the subject
• QA engineers — test fixtures with known dimensions that make regressions visually obvious
• Technical writers and documentation teams — illustrating image slots in guides without shipping real screenshots
• Teachers and workshop leaders — teaching layout and aspect ratio with labeled, deterministic examples
• Email template builders — every client renders images differently, and labeled slots make render tests legible

For the designers among them, the placeholder set often becomes the contract: the eight-slot table above, agreed at review, is what the photographer delivers against. Slot sizes specified by placeholder are unambiguous in a way prose specifications never quite manage — 600×400 means the thing that says 600×400.

The hosted-placeholder model — a service that draws gray boxes from URL parameters — has been around since the early 2010s, and the comparison is worth making explicit:

The hosted model earned its place in dev culture and deserves respect — a URL that draws a box is a genuinely elegant idea. What time has added is the caveat: external image hosts introduce a runtime dependency into mockups, demos, and documentation that can outlive the host itself. Dead placeholder URLs in old documentation are their own small genre of link rot. The local generator draws the same box with no one else's server in the loop, which is the whole pitch, and why the URL parameters exist for sharing while the rendering stays in-browser.

Privacy is almost a category error for this tool — it has no inputs to protect. No photographs, no client files, no documents: just numbers you type and colors you pick. The canvas renders locally, the PNG encodes locally, and the download appears locally. The only data that could theoretically leave the page is the URL you choose to copy and share, which contains exactly the parameters you put in it.

That is worth stating plainly in a world where the equivalent hosted services log every generated URL — dimensions and labels that, in aggregate, sketch out what a team is building. A URL like the generator's is only visible to whoever you hand it to. For internal projects under wraps, that distinction is minor. For product launches where even the shape of a screen is sensitive, it is not — and it costs nothing to have.

Most placeholder failures happen one step before the generator — at the moment the slot gets specified — and they cluster into four recognizable patterns. Each is a ten-minute fix at wireframe time and a costly one after photography has been invoiced against the wrong numbers.

• Specifying at display size instead of asset size — a slot that shows at 600×400 on a standard-density screen needs a 1200×800 file to stay sharp on a 2x display, and 1800×1200 to hold up on a 3x phone. If the placeholder requests 600×400, the delivered asset will measure exactly that, and every high-density screen renders it soft. Generate at asset size and let the layout scale down, never up.
• Aspect ratio drift between design and build — the mockup draws 3:2, the built component crops to 16:10, and the gap stays invisible until real photography loses its edges to the crop. The cure is mechanical: measure the slot as built, then regenerate the placeholder to match reality rather than the design file.
• Labels that name files instead of jobs — a rectangle reading IMG_2041 gives a review room nothing to discuss; HERO, OG IMAGE, or AVATAR names the decision the slot still needs someone to make. Vague labels produce vague sign-offs.
• The placeholder that ships to production — brand-colored, unlabeled, quietly attractive, it passes QA because it looks deliberate. Visible dimensions and loud labels are the defense; a placeholder that can be mistaken for content has already failed its one job.

The pattern underneath all four: a placeholder is a specification wearing the costume of an image, and it stops working the moment anyone treats it as decoration. Teams that keep the discipline for years standardize one label vocabulary across projects — role names like HERO and CARD, dimensions always visible, colors drawn from the actual brand palette — so any mockup reads in seconds, regardless of who drew it.

Before a redesign touches a pixel, the existing page gets audited for image slots, and the placeholder generator is the instrument. The scenario: a mid-sized SaaS marketing site, six template families, and a photography budget that has to cover exactly what the templates need and nothing more. The audit takes about an hour and routinely saves a reshoot.

1. 1

   Walk every template

   Open each template at desktop, tablet, and phone widths and log every place an image renders — img elements, CSS backgrounds, video posters, and og:image metas all count. The browser inspector's box model panel shows each slot's rendered dimensions directly.

2. 2

   Record display size and target density

   Note the CSS display dimensions plus the highest device pixel ratio you intend to support. A card that displays at 600×400 and must survive 2x screens needs its asset generated at 1200×800, and the placeholder should carry that larger number.

3. 3

   Generate the set in one batch

   Every slot at its asset size, labels naming roles rather than files, dark gray for full-bleed slots and light gray for inline ones. The batch takes a minute and produces the complete shot list as a side effect.

4. 4

   Hand the files to the photographer

   The placeholder set is the delivery specification: filenames state exact pixel dimensions, labels state roles, and nothing arrives at the wrong resolution or crop because nothing was specified in prose.

The number that surprises teams is the total: thirty-four slots reads like a full day of photography until the breakdown shows only nine distinct sizes, and two of them — 600×400 with fourteen slots and 1200×630 with five — account for more than half the set. The placeholder table turns an intimidating shot list into nine line items, which is exactly the argument you want in hand when the photography quote arrives.

Three tools share bench space with this one:

• ASCII Art From Image — the other end of placeholder culture: turning real images into text for places images cannot go
• Image Resizer — for when the real assets arrive and must fit the slots the placeholders defined
• Image Cropper — for when the real assets have the right pixels in the wrong rectangle

The lifecycle runs: placeholder the slots, build against the geometry, then swap in resized, cropped reality at the end. When a slot's placeholder survives to launch, that is not a failure of the tool — it is the tool working as designed, failing loudly enough to be noticed.