placeholder generator

How to use the placeholder generator

  1. Pick dimensions — enter width and height in pixels, or select a common preset (16:9, 1:1, 4:3, golden ratio).
  2. Choose a mode: Colored rectangle (solid background + size label), Dummy photo (real royalty-free photography for realistic mockups), Gradient (abstract visual placeholder), or Avatar (for user profile slots).
  3. For colored mode, pick background + text colors and optional size label.
  4. Copy the image URL (served from our CDN with the correct dimensions), or download the PNG directly.
  5. For React/JSX, use the copy-paste <img> tag with lazy-loading attributes pre-filled.

When to use it

Use placeholders when building layouts before final imagery is ready — design mockups, front-end prototypes, component libraries, client presentations. Dummy photos make the layout feel real without distracting from structure evaluation. Switch to real images before launch; placeholder services add runtime HTTP dependencies and don't compress for production. Alternative: lorem picsum is the best-known dummy photo API but lacks colored rectangles and avatar variants.

Example

<!-- 1200x630 Open Graph preview placeholder -->
<img src="https://talos.tools/placeholder/1200x630/2563eb/ffffff?text=OG+Preview" alt="OG placeholder" />

<!-- React component with the avatar mode -->
<img src="/placeholder/96x96/avatar" alt="User avatar" className="rounded-full" />

Frequently asked questions

Is this similar to lorem picsum?
Yes — Dummy Photo mode serves the same kind of royalty-free imagery. We add size-labeled colored rectangles, gradients, and avatar variants which lorem picsum doesn't offer.
Can I specify exact colors?
Yes — colored rectangle mode takes hex codes for both background and text: /placeholder/800x400/1e293b/f1f5f9.
Are the dummy photos licensed for commercial use?
The photo pool is pulled from Unsplash and Pexels (both free for commercial use, no attribution required). Check each specific photo if you need guaranteed licensing.
Do placeholder URLs count toward my bandwidth quota?
No — placeholder assets are served from our CDN at no cost to you. We rate-limit to 1,000 requests/hour per IP to prevent abuse.
Can I bookmark a specific placeholder?
Yes — every placeholder URL is a stable, cacheable permalink. Bookmark https://talos.tools/placeholder/800x600/ef4444 and it returns the same image forever.
What format are placeholders served in?
WebP by default for modern browsers, JPG fallback for older clients. PNG mode available by appending ?format=png if you need transparency.

Related generators

Last updated: 2026-04-23