Placeholder Image for Mockup & Wireframe
Updated: May 2026
Mockups and wireframes need placeholder images that communicate slot dimensions without distracting from the layout. This guide covers the best formats, sizes, and color choices for design-phase placeholders.
Free · SVG / PNG / JPEG · Custom colors · In your browser
Why wireframes need the right placeholder images
A wireframe with broken image icons reads as unfinished to stakeholders. A wireframe with real photography draws attention to the content rather than the structure. The right placeholder sits in the middle: it shows the image slot clearly, communicates the intended aspect ratio, and stays visually neutral so the layout takes center stage.
Three properties matter most for mockup placeholders:
- Exact dimensions — the placeholder must match the intended image size precisely, especially when validating responsive breakpoints.
- Neutral color — a medium gray (#cccccc) is conventional; it neither dominates nor disappears on white or dark backgrounds.
- Readable label — displaying the dimensions (e.g. "1200×630") in the center helps developers implement the correct
widthandheightattributes.
Common mockup image sizes
| Slot | Dimensions | Typical use |
|---|---|---|
| Hero banner | 1920×600 / 1440×560 | Homepage hero sections |
| Article featured image | 1200×630 | Blog post header, OG image |
| Card thumbnail | 400×300 / 800×450 | Product or article cards |
| Avatar | 80×80 / 120×120 | User profile pictures |
| Full HD desktop | 1920×1080 | Background images |
| Social square | 1080×1080 | Instagram, social previews |
| Portrait | 800×1000 | Story format, tall cards |
SVG vs PNG for mockups
SVG is almost always the better choice for design-phase placeholders:
- Infinite scaling — paste into Figma at 1× then zoom to 400× without pixelation.
- Tiny file size — a 1200×630 SVG placeholder is roughly 600 bytes versus 5–20 KB for PNG.
- Editable in tools — Figma, Sketch, and Illustrator can open and modify SVG files directly.
- Embeddable in HTML — paste the SVG code inline or use a data URL as an
img srcwith zero hosting.
PNG is better when the mockup needs to be exported as a raster image (e.g. a PDF export at 96 dpi) or when the target system does not support SVG.
Figma tip: Generate an SVG placeholder here, copy the Data URL, then paste it as an image fill in a Figma frame. The frame dimensions will auto-scale to match the SVG viewBox.
Color conventions for mockup placeholders
There is no strict standard, but these conventions are widely understood in design teams:
- #cccccc / #999999 — neutral gray, the most common choice for light UI mockups.
- #3a3a3a / #555555 — dark gray, better for dark-mode wireframes.
- Accent color at 20% opacity — signals that a specific brand color image is intended here.
- Red (#cc4444) — conventionally used to flag a "missing" asset that must be replaced before delivery.
Frequently asked questions
Can I use these placeholders in Figma?
Yes. Export as SVG (Data URL or downloaded file) and import it as an image fill in any Figma frame. The dimensions label in the center helps developers reading the handoff spec.
What is the standard placeholder image color in wireframes?
Medium gray (#cccccc) is the de facto standard for low-fidelity wireframes. Higher-fidelity mockups often use a slightly darker shade (#aaaaaa or #999999) to create more visible contrast with white backgrounds.
How do I set exact pixel dimensions for a hero banner placeholder?
Enter the width and height directly in the tool's dimension inputs. For a 1920×600 hero, type 1920 in the width field and 600 in the height field, then download. No need to use presets.