Image Placeholder Guide: Wireframes, Dummy Images & Dev Workflows

Placeholder Types by Use Case

SVG Placeholder (Most Common)

For wireframes and mockups, inline SVG is unbeatable — infinitely scalable, tiny file size, customizable via CSS:

<svg viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg">
  <rect width="400" height="300" fill="#e2e8f0"/>
  <text x="200" y="150" text-anchor="middle" dominant-baseline="middle"
        font-family="sans-serif" font-size="24" fill="#64748b">
    400 × 300
  </text>
</svg>

Data URI version (inline as src) for quick use:

<img src="data:image/svg+xml;utf8,
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'>
    <rect width='400' height='300' fill='%23e2e8f0'/>
  </svg>" alt="placeholder" />

Placeholder Services (Random Demo Images)

For prototypes that need real-looking photos, placeholder services generate them on demand via URL:

• Picsum Photos — https://picsum.photos/800/600 returns a random high-quality photo at the given dimensions. Great for lifestyle, travel, product prototypes.
• Unsplash Source — https://source.unsplash.com/800x600/?nature returns topical photos. Categories include nature, people, food, architecture, business.
• Placeholder.com — https://via.placeholder.com/800x600/cccccc/666666?text=Hello for solid color placeholders with text overlays.
• DummyImage.com — similar to Placeholder.com with more format and style options.
• placeKitten.com — novelty kitten photos. Use sparingly in client work.
• placebeard.it — bearded men for comedy mockups.

LQIP (Low Quality Image Placeholder)

An LQIP is a tiny, blurred version of the final image shown while the full version loads. Modern pattern popularized by Medium:

<img
  src="tiny-20x15-blurry.jpg"
  data-src="full-1920x1080.jpg"
  style="filter: blur(10px); transition: filter 0.4s;"
  onload="this.src = this.dataset.src; this.style.filter = 'none';"
/>

The 20×15 pixel blurred version is ~200 bytes and loads instantly. When the full image loads, it swaps in with a smooth transition. Users perceive faster loading because the page never shows an empty box.

BlurHash (Modern LQIP)

BlurHash encodes a blurred image preview into a 20-30 character string stored in your database alongside the image URL:

/* Generate once at upload time */
const hash = blurhash.encode(imageData, width, height, 4, 3);
/* → "LKO2?U%2Tw=w]~RBVZRi};RPxuwH" */

/* Use forever as placeholder */
const canvas = blurhash.decode(hash, 32, 32, 1);
/* → 32x32 pixel array ready to render */

Advantages over image LQIP: stored as text (fits in DB), no separate file request, identical placeholder across devices. Used by Unsplash, Wolt, and many modern apps.

Skeleton Loader Patterns

A "skeleton" shows the shape of content before it loads — not a placeholder image, but a structural hint:

.skeleton {
  background: linear-gradient(
    90deg,
    #e2e8f0 0%,
    #f1f5f9 50%,
    #e2e8f0 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

The shimmer motion signals "loading" without the frustration of a spinner. Use for text blocks, avatars, and card shells. Pair with LQIP for images.

Dominant Color Placeholder

Even simpler than LQIP: render a solid color that matches the image's dominant color while it loads. Get the color once via a canvas sampling function or during image upload:

<img
  src="photo.jpg"
  style="background-color: #4a5568;"
  width="1200" height="800"
  loading="lazy"
/>

The background shows through until the image loads, preserving layout and giving a subtle hint of what's coming. Adds zero bytes to the page.

Avatar Placeholders

For missing profile pictures, the standard pattern is initials on a colored background:

/* Inline SVG avatar (no requests) */
function avatarSvg(name, size = 80) {
  const initials = name.split(' ').map(n => n[0]).slice(0, 2).join('').toUpperCase();
  const hue = [...name].reduce((h, c) => h + c.charCodeAt(0), 0) % 360;
  return `<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 ${size} ${size}'>
    <rect width='${size}' height='${size}' fill='hsl(${hue}, 60%, 50%)'/>
    <text x='50%' y='50%' fill='white' font-family='sans-serif'
          font-size='${size * 0.4}' text-anchor='middle' dominant-baseline='central'>
      ${initials}
    </text>
  </svg>`;
}

The hue derivation from the name ensures "John Smith" always gets the same background color — consistent across sessions without storing anything.

Frequently Asked Questions

Can I use placeholder services in production?

Generally no. Picsum and Unsplash are fine for development but slower than your own CDN and dependent on their uptime. Always replace with real images before production. Generate static placeholders (SVG, LQIP, or solid color) for production loading states.

What's the difference between a placeholder and a fallback?

Placeholder: shown before the image loads (temporary). Fallback: shown when an image fails to load (permanent). <img>'s onerror attribute swaps to a fallback; CSS backgrounds use both pattern via layering.

Do I need both LQIP and lazy-loading?

They work together. loading="lazy" delays image loading until near viewport. LQIP provides a preview while the lazy-loaded image fetches. For optimal UX, use both.

Are placeholder images bad for SEO?

No, as long as the real image eventually replaces them and has proper alt text. Google crawls lazy-loaded and JS-swapped images. The key: your final production page should have real images, not permanent placeholders.

What about CSS-only placeholders?

CSS can style <img> while it's broken or loading with pseudo-elements and the ::before trick. Useful for showing icons or colors behind images. More fragile than SVG placeholders — use for simple cases.