Empty State Images vs Placeholder Fallbacks in SaaS

Definitions

Empty state images vs placeholder fallbacks: the distinction

An empty state image appears when a data model is genuinely empty: no team members, no uploaded files, no connected integrations. It is usually an illustration with explanatory text and a CTA button. The image is decorative and supplementary to the action you want the user to take.

A placeholder fallback appears when content is expected but missing or loading: a product photo that has not been uploaded yet, an avatar that failed to load, a thumbnail while data fetches. The placeholder holds the space the real content will occupy and communicates 'this will be filled in'.

The failure mode for confusing them: using an illustration-style empty state in a grid where real content will appear once uploaded makes users think the grid is disabled or broken. Using a simple placeholder in an onboarding wizard where you want users to take action fails to guide them.

Pattern 1

Empty state images with fallback.pics illustration-style URLs

Full illustration assets for empty states require design work. For early-stage SaaS or internal tools where design resources are constrained, branded placeholder images with appropriate text work as functional empty states while proper illustrations are in progress.

The key is sizing and text. Empty state images are typically wide-format (400x300 or 600x400) and centered in the content area. The text should communicate the feature name, not just 'No Items'. Use a purple or brand-color background to distinguish the empty state from a broken image.

<!-- Empty state in a file upload widget -->
<div class="empty-state">
  <img
    src="https://fallback.pics/api/v1/400x300/7C3AED/FFFFFF?text=No+Files+Yet"
    width="400"
    height="300"
    alt="No files uploaded yet"
  />
  <p>Upload your first file to get started.</p>
  <button>Upload File</button>
</div>

Pattern 2

Placeholder fallbacks for image slots that will be filled

When a data model has an image field that is empty or null, the slot in the UI needs to reserve the correct space. A neutral gray placeholder at the expected image dimensions prevents layout shift and communicates that the slot is an image container.

Unlike empty states, placeholder fallbacks should not have a strong visual hierarchy—they should be subtle. Use muted colors (E5E7EB or F3F4F6) and minimal text so they recede visually and do not compete with populated content.

<!-- Avatar placeholder (subtle, no strong color) -->
<img
  src="https://fallback.pics/api/v1/avatar/40?text=--"
  width="40"
  height="40"
  alt="User avatar placeholder"
/>

<!-- Team member card image slot -->
<img
  src="https://fallback.pics/api/v1/square/160/F3F4F6/9CA3AF?text=No+Photo"
  width="160"
  height="160"
  alt="Team member photo placeholder"
/>

When to use each

Decision framework: which pattern for which situation

Use an empty state image when: the user has zero items in a collection and needs to take an action to add some; the absence is intentional and permanent until the user acts; and there is a primary CTA that makes sense to show alongside the image.

Use a placeholder fallback when: a specific item exists in the data model but its image field is null or failed to load; the space will be filled by real content without the user doing anything; and the placeholder is one of many similar elements in a grid or list.

The edge case is 'first run' onboarding where you want to show sample content. In that case, use real-looking placeholder images at the right dimensions—not empty state illustrations—so users understand what the populated state will look like.

Onboarding sample content

Seed onboarding views with realistic placeholder images

A dashboard that is entirely empty on first login gives users no mental model of what the product does. Seeding the first-run experience with sample data—including sample images—reduces time to activation. Use fallback.pics URLs as the image src for sample records so they render immediately without requiring any uploaded assets.

Include an 'Example data' banner or badge on seeded records so users understand the difference between sample and real content.

const sampleTeamMembers = [
  {
    name: 'Alex Johnson',
    role: 'Designer',
    avatar: 'https://fallback.pics/api/v1/avatar/80?text=AJ',
  },
  {
    name: 'Sam Rivera',
    role: 'Engineer',
    avatar: 'https://fallback.pics/api/v1/avatar/80?text=SR',
  },
  {
    name: 'Morgan Lee',
    role: 'Product',
    avatar: 'https://fallback.pics/api/v1/avatar/80?text=ML',
  },
];

SaaS dark mode

Dark mode considerations for empty states and placeholders

Light gray placeholders (F3F4F6) are invisible in dark mode where the background is also near-white. Maintain two placeholder URL sets—one for light mode, one for dark mode—or use a slightly higher-contrast neutral that works on both (27272A on dark, E4E4E7 on light).

Empty state branded images with purple backgrounds (7C3AED) work well in both modes because the purple has sufficient contrast against both dark and light page backgrounds.

function placeholderSrc(darkMode: boolean, label: string, size = 160) {
  const bg = darkMode ? '3F3F46' : 'F4F4F5';
  const fg = darkMode ? 'A1A1AA' : '71717A';
  return `https://fallback.pics/api/v1/square/${size}/${bg}/${fg}?text=${encodeURIComponent(label)}`;
}

Internal links

Related SaaS image patterns

For more on onboarding-specific placeholder strategies and integration logo grids, see the related posts. The full API reference covers all dimension and color options.

https://fallback.pics/docs/
https://fallback.pics/placeholder-image-api/
https://fallback.pics/blog/onboarding-screenshot-placeholders/
https://fallback.pics/blog/integration-logo-grid-placeholders/