Image Assets
Strategy: FREE RESOURCES FIRST, AI generation for custom needs.
Decision Tree
AVATARS:
→ DiceBear, Boring Avatars (FREE)
PLACEHOLDER PHOTOS:
→ Unsplash, Picsum (FREE)
ILLUSTRATIONS:
→ unDraw, Storyset (FREE SVG)
BACKGROUNDS:
→ Haikei, CSS patterns (FREE)
CUSTOM/BRANDED:
→ AI generation (PAID) — only if neededFree Avatar APIs
# DiceBear (many styles)
https://api.dicebear.com/7.x/lorelei/svg?seed=John
https://api.dicebear.com/7.x/avataaars/svg?seed=Jane
https://api.dicebear.com/7.x/initials/svg?seed=JD
# Boring Avatars
https://source.boringavatars.com/beam/120/John
# UI Avatars (initials)
https://ui-avatars.com/api/?name=John+Doe&background=6366f1&color=fff// Avatar with fallback
function Avatar({ src, name }) {
const fallback = `https://api.dicebear.com/7.x/lorelei/svg?seed=${name}`;
return <img src={src || fallback} alt={name} onError={e => e.target.src = fallback} />;
}Placeholder Photos
# Unsplash (by keyword)
https://source.unsplash.com/800x600/?technology
https://source.unsplash.com/1200x600/?office,workspace
# Picsum (random)
https://picsum.photos/800/600
https://picsum.photos/seed/hero/1200/600 # consistentFree Illustrations
unDraw: https://undraw.co/illustrations
Storyset: https://storyset.com
Humaaans: https://humaaans.com
Open Peeps: https://openpeeps.com
HOW:
1. Go to site
2. Set brand color
3. Search (e.g., "empty", "error")
4. Download SVG
5. Place in public/illustrations/Backgrounds
Haikei: https://haikei.app (blobs, waves, grids)
Hero Patterns: https://heropatterns.com (subtle patterns)
Cool Backgrounds: https://coolbackgrounds.io (gradients)AI Generation (When Needed)
Only use when:
- Custom branded illustration required
- No suitable free resource exists
- User explicitly requests
// DALL-E 3
const response = await fetch('https://api.openai.com/v1/images/generations', {
method: 'POST',
headers: { 'Authorization': `Bearer ${OPENAI_API_KEY}` },
body: JSON.stringify({
model: 'dall-e-3',
prompt: 'Minimal 3D illustration of [concept], soft gradient background, no text',
size: '1792x1024',
quality: 'hd',
}),
});Next.js Image Config
// next.config.js
images: {
remotePatterns: [
{ hostname: 'source.unsplash.com' },
{ hostname: 'picsum.photos' },
{ hostname: 'api.dicebear.com' },
{ hostname: 'ui-avatars.com' },
],
}Quick Reference
ALWAYS FREE FIRST:
avatars: DiceBear, Boring Avatars
photos: Unsplash, Picsum
illustrations: unDraw, Storyset
backgrounds: Haikei, CSS
AI ONLY WHEN:
- Custom branded needed
- No free alternative
- User requests