Placeholder Image Guide: When and How to Use Dummy Images

What Are Placeholder Images?

Placeholder images — also called dummy images or stock placeholders — are temporary images used during design and development. They fill visual space in wireframes, prototypes, and staging environments before real assets exist. Their job is to represent the size, position, and aspect ratio of final images without requiring finished photography or graphics.

A good placeholder image communicates three things instantly: approximate dimensions, intended context, and whether the slot expects a photo, icon, or illustration.

When to Use Placeholder Images

Placeholder images serve different purposes depending on your project stage. Using them at the right time saves hours of back-and-forth between designers, developers, and content teams.

Wireframing

In low-fidelity wireframes, placeholders establish layout rhythm. Gray boxes with crosshairs or dimension labels tell stakeholders exactly how much screen space each image occupies. No one gets distracted by actual photo choices.

Prototyping

Interactive prototypes need visual weight that plain boxes cannot provide. Placeholder images with realistic content — a landscape for a hero banner, a portrait for a team section — help viewers evaluate the design as a cohesive experience rather than a skeleton.

Development Staging

Developers often build pages before the creative team delivers final assets. Placeholder images prevent broken <img> tags and let QA testers verify responsive behavior, lazy loading, and aspect-ratio handling across breakpoints.

Client Demos

Showing a client a functional prototype with well-chosen placeholders is far more persuasive than blank space. It signals that the layout is intentional and that image slots are sized correctly for real content.

Static vs Dynamic Placeholders

You can generate placeholder images in two ways, each with distinct trade-offs.

Static Examples

Place a PNG or SVG in your project and reference it directly:

<img src="/placeholders/hero-16x9.png"
     alt="Placeholder hero image 1600x900"
     width="1600" height="900">

Dynamic Examples

URL-based services let you specify dimensions in the path:

<img src="https://picsum.photos/800/600"
     alt="Random placeholder image 800x600"
     width="800" height="600">

Dynamic services are convenient for rapid prototyping, but never ship them to production. External dependencies add latency and can go offline.

Recommended Sizes by Context

Choosing the right dimensions for placeholder images prevents layout shift when real content arrives. Below are common sizes matched to typical UI contexts.

Always set explicit width and height attributes on <img> elements. Browsers use these to reserve space before the image loads, eliminating cumulative layout shift (CLS).

Format Choices: PNG, SVG, or JPG

Each format has advantages for placeholder use.

PNG — Lossless, supports transparency. Best for UI elements, icons, and any placeholder that needs a transparent background. File sizes are larger than JPG for photographic content.

SVG — Vector format, infinitely scalable, tiny file size. Ideal for geometric placeholders like labeled rectangles or aspect-ratio boxes. Not suitable for photographic placeholders.

JPG — Lossy compression, smallest files for photos. Good when you need a realistic photographic placeholder with minimal bandwidth cost. No transparency support.

Best Practices for Realistic Mockups

Match Aspect Ratios to Real Content

If the final images will be portraits, do not use landscape placeholders. Mismatched ratios hide Cropping and alignment issues that surface late in the project.

Use Context-Appropriate Content

A food-delivery app prototype should use food images, not generic landscapes. Context-appropriate placeholders help stakeholders evaluate whether the design supports the actual content type.

Include Dimension Labels

For internal prototypes, overlay the dimensions directly on the placeholder image. This helps developers verify they are using the correct size.

<!-- SVG placeholder with dimension label -->
<svg width="800" height="600" xmlns="http://www.w3.org/2000/svg">
  <rect width="100%" height="100%" fill="#e5e7eb"/>
  <text x="50%" y="50%" text-anchor="middle"
        dominant-baseline="middle"
        font-family="monospace" font-size="24" fill="#6b7280">
    800 × 600
  </text>
</svg>

Avoid Copyrighted Stock Photos

Even in prototypes, using copyrighted images without a license creates legal risk. Use services that offer explicitly free-to-use photos, or generate placeholders programmatically.

Strip Placeholders Before Launch

Add a checklist step: every placeholder image must be replaced before production deployment. Automated checks can scan for common placeholder URLs:

// Pre-deploy check for placeholder image URLs
const PLACEHOLDER_DOMAINS = ['picsum.photos', 'via.placeholder.com', 'placehold.co']
const images = document.querySelectorAll('img[src]')
const unreplaced = [...images].filter(img =>
  PLACEHOLDER_DOMAINS.some(d => img.src.includes(d))
)
if (unreplaced.length > 0) {
  console.error('Unreplaced placeholder images found:', unreplaced)
}

Key Takeaways

• Placeholder images fill visual space in wireframes, prototypes, and staging before real assets exist
• Use static placeholders for production-like environments; dynamic services for quick prototypes
• Match aspect ratios and content types to what the final images will be
• Include dimension labels on internal placeholders to help developers
• Set explicit width and height attributes to prevent layout shift
• Always replace placeholders with licensed, final images before deploying to production

Try It Yourself

Generate placeholder images with exact dimensions using our free Placeholder Image Generator. Specify width, height, background color, and text — then download the result instantly.

Related Guides

• Mockup Image Best Practices: Professional Prototyping Techniques
• Design Prototyping Tools: Essential Utilities for Rapid Prototyping
• Image to Base64: When to Embed Images in HTML and CSS