#Placeholder Images to Pair with Your Placeholder Text

#The Other Half of a Realistic Mockup

Lorem ipsum handles the copy. Placeholder images handle the visual content. Together, they allow a layout to be evaluated without waiting for real photography, illustrations, or user-generated content. This article covers the most useful placeholder image services available in 2026, with URL syntax for each.

#picsum.photos

Lorem Picsum (picsum.photos) is the lorem ipsum of placeholder images — the default choice for most developers. It serves real photographs (drawn from a curated Unsplash-style library) at any requested dimensions.

<!-- Basic usage: width x height -->
<img src="https://picsum.photos/800/600" alt="">

<!-- Specific image by ID (1–1000+) -->
<img src="https://picsum.photos/id/237/800/600" alt="">

<!-- Grayscale -->
<img src="https://picsum.photos/800/600?grayscale" alt="">

<!-- Blurred (1–10 scale) -->
<img src="https://picsum.photos/800/600?blur=5" alt="">

<!-- Seeded — same seed always returns same image -->
<img src="https://picsum.photos/seed/lorem-forge/800/600" alt="">

<!-- Square avatar-style -->
<img src="https://picsum.photos/200" alt="">

The seed parameter is particularly useful for design consistency: use seed/productname/width/height to ensure the same image appears each time a specific mockup is loaded.

CSS background version:

.hero-image {
  background-image: url('https://picsum.photos/seed/hero/1600/900');
  background-size: cover;
  background-position: center;
}

#placehold.co

Placehold.co generates solid-color placeholder rectangles with optional text labels — useful when you want a clearly-placeholder image rather than a potentially confusing real photograph.

<!-- Default: gray rectangle with dimension label -->
<img src="https://placehold.co/800x600" alt="">

<!-- Custom colors (hex, no #) -->
<img src="https://placehold.co/800x600/1a1a1a/ffffff" alt="">

<!-- Custom text label -->
<img src="https://placehold.co/800x600?text=Product+Image" alt="">

<!-- Different format -->
<img src="https://placehold.co/800x600.webp" alt="">

<!-- Retina / HiDPI -->
<img src="https://placehold.co/400x300@2x.png" alt="">

Placehold.co is the right choice when you want mockup reviewers to clearly understand that an image is a placeholder — the text label removes any ambiguity.

#Unsplash Source (via API)

Unsplash provides a source API for placeholder images from its curated photography library. Unlike picsum.photos (which uses a local image pool), Unsplash Source draws from the full Unsplash catalog.

<!-- Random image, specific dimensions -->
<img src="https://source.unsplash.com/800x600" alt="">

<!-- Random image with keyword -->
<img src="https://source.unsplash.com/800x600/?nature,water" alt="">

<!-- Specific photo by ID -->
<img src="https://source.unsplash.com/abc123/800x600" alt="">

<!-- Featured photos only -->
<img src="https://source.unsplash.com/featured/800x600/?architecture" alt="">

Note that Unsplash Source can be slower than picsum.photos and has rate limits. For development contexts requiring consistent, fast placeholder images, picsum.photos is the more reliable choice.

#DiceBear (Avatar Placeholders)

DiceBear (dicebear.com) generates deterministic SVG avatars — useful for user profile mockups where a consistent avatar per user ID is needed.

<!-- Initials-style avatar -->
<img src="https://api.dicebear.com/7.x/initials/svg?seed=JohnDoe" alt="">

<!-- Illustrated avatar (various styles) -->
<img src="https://api.dicebear.com/7.x/adventurer/svg?seed=user123" alt="">

<!-- Pixel art avatar -->
<img src="https://api.dicebear.com/7.x/pixel-art/svg?seed=designer1" alt="">

<!-- Avatar with size -->
<img src="https://api.dicebear.com/7.x/thumbs/svg?seed=product&size=128" alt="">

DiceBear avatars are deterministic — the same seed always produces the same avatar. This makes them ideal for user list mockups where each item needs a distinct but consistent avatar.

#When to Use Blurred Real Images vs. Solid Placeholders

The choice between real photographic placeholders (picsum.photos, Unsplash) and solid placeholder shapes (placehold.co) depends on what decision the mockup is supporting:

Use real (or realistic) images when:

• Testing color palette decisions — real images affect how text colors read against backgrounds
• Testing layout compositions that depend on image content (hero sections, card layouts)
• Presenting to clients or stakeholders who need to visualize the finished product
• Evaluating contrast between image overlays and text

Use solid placeholder shapes when:

• Communicating clearly that an image is not yet sourced or designed
• Avoiding stakeholder feedback on the wrong thing ("can we use a sunset photo instead?")
• Documenting a design spec where the image area dimensions matter but content does not
• Ensuring no placeholder images accidentally appear in production (solid gray shapes are unmistakably placeholders)

Blurred real images (picsum.photos ?blur=5) occupy a middle ground: they provide realistic visual texture (light/dark distribution, color tone) without allowing the specific content to distract. Useful for hero section testing where you need to evaluate text legibility over an image without choosing the actual photography yet.

#Accessibility Note

All placeholder images in mockups should carry alt="" (empty alt, indicating decorative) rather than no alt attribute at all. An image with no alt attribute causes screen readers to announce the image URL — a significant accessibility noise problem. alt="" signals "this image is decorative and has no meaningful content."

<!-- Correct: empty alt for decorative placeholder -->
<img src="https://picsum.photos/800/600" alt="" role="presentation">

<!-- Wrong: missing alt causes screen reader to announce the URL -->
<img src="https://picsum.photos/800/600">

#Key Takeaways

• picsum.photos is the most reliable default — real photographs, fast CDN, seed parameter for consistency
• placehold.co generates labeled solid-color rectangles — best when placeholder status must be unambiguous
• DiceBear generates deterministic avatars from seed strings — ideal for user list and profile mockups
• Use real photographic placeholders when testing color, contrast, and composition; use solid shapes when communicating that content is not yet decided
• Always set alt="" on placeholder images to prevent screen readers from announcing the URL

#Further Reading

• Lorem Ipsum for Developers: A Format Cheatsheet
• How to Generate Lorem Ipsum in Figma, Sketch & Adobe XD
• Color & Contrast for Readable Text
• Why Designers Use Placeholder Text (and Why It Still Matters)