ImageNow Preset Sizes vs Custom Dimension Placeholders

Preset model

How preset-based placeholder services work

Preset services define a fixed list of named sizes: small, medium, large, square, thumbnail, hero, and so on. You reference the preset by name rather than specifying width and height. The advantage is that a new team member can use the service without knowing the exact pixel dimensions their design system uses.

The disadvantage is that real-world design systems rarely align perfectly with preset lists. A product card at 320x240, a banner at 1440x400, or an avatar at 56x56 may not match any preset. Getting a placeholder at those exact dimensions requires either picking the closest preset and accepting a dimensional mismatch or switching to a service that accepts arbitrary dimensions.

Custom dimensions

Why arbitrary dimension APIs fit design systems better

Design systems define specific spatial tokens: a card image slot might be 348x220, an article hero might be 1280x480, and a company logo in a grid might be 120x40. These numbers are chosen for layout reasons, not because they match a standard preset. A placeholder service that accepts any width and height fits without adaptation.

fallback.pics accepts any dimension from 1x1 to 4096x4096 as path parameters. The URL is predictable: width, height, optional background hex, optional foreground hex, optional text. No preset lookup, no approximation, no mismatch.

# Arbitrary dimensions that no preset service covers
https://fallback.pics/api/v1/348x220/7C3AED/FFFFFF?text=Card
https://fallback.pics/api/v1/1280x480/3B82F6/FFFFFF?text=Hero
https://fallback.pics/api/v1/120x40/18181B/FFFFFF?text=Logo

# Standard sizes also work the same way
https://fallback.pics/api/v1/1200x630/7C3AED/FFFFFF?text=OG+Image
https://fallback.pics/api/v1/800x600/E4E4E7/A1A1AA
https://fallback.pics/api/v1/avatar/56?text=AB

Named routes

Convenience presets for common surfaces in fallback.pics

fallback.pics offers named routes for the most common surfaces — avatar, banner, square, thumbnail — as syntactic shortcuts without removing dimensional control. These routes set sensible defaults for those surface types but still accept dimension overrides.

The square route at /square/400 generates a 400×400 image with centered text. The banner route accepts a WxH parameter. The thumbnail route formats content like a blog card. You get the preset convenience for the common cases and full dimensional control for the custom ones.

# Named routes with defaults
https://fallback.pics/api/v1/avatar/80          # 80x80 avatar
https://fallback.pics/api/v1/square/200          # 200x200 square
https://fallback.pics/api/v1/banner/1200x400     # banner at exact dimensions
https://fallback.pics/api/v1/thumbnail/1200x630  # blog card layout

# Same routes with custom colors
https://fallback.pics/api/v1/avatar/80?text=JD
https://fallback.pics/api/v1/square/200/7C3AED/FFFFFF?text=New

Caching

Cache behavior differences between preset and dimension-parameterized URLs

Preset services often generate images dynamically per request with limited CDN caching because presets may be mapped to different dimensions depending on service version. URL-based services with dimensions encoded in the path produce stable, deterministic URLs that CDNs can cache permanently.

fallback.pics returns Cache-Control: public, max-age=31536000, immutable on all responses. The same URL always returns the same image bytes, making it safe for immutable CDN caching and browser cache storage indefinitely.

Integration

Integrating arbitrary-dimension placeholders in a design system

The cleanest pattern in a design system is a helper function that accepts the same spatial tokens your layout components use and returns the correct fallback.pics URL. This keeps placeholder generation co-located with the dimension definitions and makes them automatically consistent when tokens change.

// Design system placeholder helper
const tokens = {
  cardImage: { width: 348, height: 220 },
  articleHero: { width: 1280, height: 480 },
  avatar: { size: 56 },
} as const;

function placeholderFor(
  token: keyof typeof tokens,
  text?: string,
): string {
  const t = tokens[token];
  if ('size' in t) {
    return `https://fallback.pics/api/v1/avatar/${t.size}${text ? '?text=' + encodeURIComponent(text) : ''}`;
  }
  const base = `https://fallback.pics/api/v1/${t.width}x${t.height}/E4E4E7/A1A1AA`;
  return text ? base + '?text=' + encodeURIComponent(text) : base;
}

Summary

When preset APIs fit and when custom dimensions are necessary

Preset APIs reduce onboarding friction when everyone on the team works with the same standard sizes. They fall apart when your design system diverges from those sizes, which happens in virtually every mature product.

Dimension-parameterized APIs with named shortcuts give you both: the shortcut when it applies and exact dimensions when it does not. For production fallback URLs, the dimensional accuracy also matters for layout stability — a placeholder at the wrong size causes CLS even when the real image loads.

https://fallback.pics/docs/
https://fallback.pics/placeholder-image-api/
https://fallback.pics/blog/square-placeholder-images-presets/
https://fallback.pics/blog/banner-placeholder-iab-ad-sizes/