AI Placeholder Images

Generate contextual images for development. The new era of AI placeholders.

What This Guide Covers

Two ways to generate placeholder images with Banatie:

Live URLs — describe what you need right in <img> src URLs
API generation — full control, permanent URLs, downloadable files

All examples on this page use real placeholder image URLs generated by Banatie.

How to Create Placeholders

Templates

Choose a style, get quality results. Banatie enhances your simple prompt based on the selected template:

photorealistic — photo-quality images
digital-art — stylized illustrations
3d-render — 3D graphics

View all templates →

Simple Prompts

Write minimal descriptions. Templates handle the rest:

→ "office" becomes a detailed modern office with proper lighting
→ "headshot" becomes a professional portrait with studio background

No need for complex prompts — this is for placeholders, not art.

Quick Start

Live URLs let you generate images by describing what you need right in the URL. No API calls, no file management — just an HTML placeholder image tag with your prompt. Each unique prompt is cached, so subsequent loads are instant via CDN.

Basic URL format:

URL Format

https://cdn.banatie.app/{org}/{project}/live/{scope}?prompt={description}&aspectRatio={ratio}

Example:

HTML Placeholder Image

<img
  src="https://cdn.banatie.app/sys/demo/live/test?prompt=mountain+landscape"
  alt="Mountain landscape"
/>

Result:

Parameters:

Parameter	Required	Description
`prompt`	Yes	Image description (URL-encoded)
`aspectRatio`	No	Ratio like 1:1, 16:9, 4:3 (default: 16:9)
`template`	No	Style template name

For full parameter reference, see Live URLs documentation.

Organizing Placeholders

Organize images by sections of your site using scopes:

text

/live/avatars?prompt=...  → user photos
/live/hero?prompt=...     → hero backgrounds
/live/products?prompt=... → product catalog

Learn more about scopes in Live URLs documentation.

Prompt Tips

Write less, not more

For placeholders, simple prompts are often enough. You can always add more details later if needed. Templates handle the rest:

→ Want an office? Write office
→ Need a dark version? Add office dark background
→ Templates handle lighting, composition, style

Colors and themes

Control the mood with color hints:

text

"dark background" → dark theme
"blue and orange accents" → specific palette
"warm lighting" → cozy feel

Pro Tip

Templates automatically enhance your prompts. A simple description becomes a detailed generation instruction.

Light Mode Placeholders

Generated images work well with light interfaces by default. If you need more control, specify background colors or accents to match your design system.

text

"product on white background"
"office with soft natural light"
"portrait, bright studio, pastel tones"
"dashboard mockup, light gray background, blue accent"

Light Background Example

Clean Workspace

White background, natural lighting

Dark Mode Placeholders

For dark interfaces, add dark background or descriptive words like night, moody, or twilight. You can also specify accent colors.

text

"office interior, dark background"
"product photo, dark surface, moody lighting"
"night cityscape, neon accents"
"abstract gradient, dark purple and blue"

Dark Background Example

Dark Gradient

Dark background with purple accents

Placeholder Image Examples

Copy-paste examples for common placeholder image use cases.

Avatar

1:1 · User profiles, team sections, testimonials

Live Example

Banatie cut our design mockup time in half. No more hunting for stock photos.

Sarah Chen

Product Designer at Acme

html

<img
  src="https://cdn.banatie.app/{org}/{project}/live/avatars?prompt=professional+headshot&aspectRatio=1:1"
  alt="User avatar"
  class="w-14 h-14 rounded-full object-cover"
/>

Team grid example:

Alex Rivera

Engineering Lead

Maria Santos

Design Director

James Wilson

Product Manager

Product

1:1 or 4:5 · E-commerce, catalogs, listings

Live Example

Wireless Pro Headphones

$299

html

<img
  src="https://cdn.banatie.app/{org}/{project}/live/products?prompt=product+photo+white+background&aspectRatio=1:1"
  alt="Product"
  class="w-full aspect-square object-cover rounded-lg"
/>

Product grid example:

Smart Watch X1

$199

Wireless Earbuds

$249

Portable Speaker

$79

Laptop Stand

$129

Hero

16:9 · Landing pages, section backgrounds

Live Example

Build the Future

Start your next project with AI-powered tools

html

<div class="relative w-full h-96 overflow-hidden">
  <img
    src="https://cdn.banatie.app/{org}/{project}/live/hero?prompt=abstract+tech+background&aspectRatio=16:9"
    alt="Hero background"
    class="w-full h-full object-cover"
  />
  <div class="absolute inset-0 bg-black/50 flex items-center justify-center">
    <h1 class="text-4xl font-bold text-white">Your Headline</h1>
  </div>
</div>

OG Image

1200:630 · Social sharing, Twitter/LinkedIn cards

Live Example

twitter.com

banatie.app

AI Placeholder Images Guide | Banatie

Generate AI placeholder images for development...

html

<meta property="og:image" content="https://cdn.banatie.app/{org}/{project}/live/og?prompt=your+description&aspectRatio=1200:630" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

OG images are cached by social platforms. Change the prompt to regenerate.

Features

1:1 · Feature grids, benefit sections, icons

Live Example

Lightning Fast

Deploy in seconds with our global CDN

Secure by Default

Enterprise-grade security built in

Easy Integration

Works with your existing stack

html

<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
  <div class="bg-slate-800/40 border border-slate-700/30 rounded-2xl overflow-hidden text-center
              transition-all duration-300 hover:border-slate-600/50 hover:shadow-lg hover:-translate-y-1">
    <img
      src="https://cdn.banatie.app/{org}/{project}/live/features?prompt=lightning+bolt+icon+single+line+art+illustration+minimal+background+hex+1e293b&aspectRatio=1:1"
      alt="Lightning Fast"
      class="w-full aspect-square object-cover"
    />
    <div class="p-4">
      <p class="font-semibold text-white">Lightning Fast</p>
      <p class="mt-1 text-sm text-gray-400">Deploy in seconds with our global CDN</p>
    </div>
  </div>
  <!-- Repeat for other features -->
</div>

File-based Workflow

Need files in your repo? Here's how to download generated images.

When to Use Files

Next.js/React projects with local image imports
Version-controlled placeholder assets
Offline or CI/CD environments

Generate via API

Request:

http

POST https://api.banatie.app/v1/generations
Content-Type: application/json
X-API-Key: your_api_key

{
  "prompt": "modern office interior"
}

Response:

json

{
  "image": {
    "id": "img_abc123",
    "cdnUrl": "https://cdn.banatie.app/org/project/images/2025-01/abc123.png"
  }
}

Open cdnUrl in your browser, save the image, and add it to your project's assets folder.

For full API reference, see Generations API.

Next Steps

Live URLs Reference

Full parameter documentation for Live URLs.

Generations API

Generate images programmatically.