API Documentation

Complete guide to using PlaceOn.Site placeholder image generator API. Generate dynamic images with custom dimensions, colors, gradients, and more.

Table of Contents

🚀 Quick Start

PlaceOn.Site allows you to create URL-based dynamic placeholder images. Simply specify dimensions and other parameters in the URL to get instant images.

Simple Example:

https://placeon.site/300/200/png/cccccc

↳ Creates a 300x200 gray PNG placeholder image

300x200 PNG Example

Standard placeholder

PlaceOn.Site

With custom color & text

📝 URL Format

Basic Format:

https://placeon.site/[WIDTH]/[HEIGHT]/[FORMAT]/[COLOR]?[PARAMETERS]

Required Parameters:

  • WIDTH - Image width (1-1920)
  • HEIGHT - Image height (1-1080)
  • FORMAT - File format (png, jpg, jpeg, gif)
  • COLOR - Hex color (ff0000) or gradient format

⚙️ Parameters

🎨 Color Formats

ff0000

Hex color code (without #)

linear-45-ff0000-0000ff

Linear gradient: direction-startcolor-endcolor

radial-ff0000-0000ff

Radial gradient: startcolor-endcolor

📝 Text Parameters

text

Text to display (max 150 characters)

font

Font family (opensans, roboto, lato, etc.)

fontSize

Font size (8-72)

🎬 Animation Parameters

animation

fade, slide-left, slide-right (GIF only)

🔤 Available Fonts

opensansrobotolatosourcesansoswaldmontserratraleway

💡 Examples

Basic Examples:

Simple Placeholder
https://placeon.site/400/300/png/cccccc

400x300 standard gray placeholder

Colored Placeholder
https://placeon.site/400/300/png/e11d48

400x300 pink placeholder

Text Placeholder
https://placeon.site/400/300/png/4f46e5?text=Hello%20World&fontSize=32

400x300 blue placeholder with text

Linear Gradient
https://placeon.site/400/300/png/linear-45-4f46e5-6366f1

400x300 linear gradient placeholder

Advanced Examples:

GIF Animation
https://placeon.site/300/200/gif/6366f1?animation=fade&text=Loading...

GIF placeholder with fade animation

Radial Gradient
https://placeon.site/500/300/png/radial-667eea-764ba2?text=Beautiful%20Gradient&font=montserrat&fontSize=28

Radial gradient + custom font + large text

🔌 Integration

HTML

<img src="https://placeon.site/400/300/png/4285f4?text=My%20Image" alt="Placeholder" />

CSS

.hero-background {
  background-image: url("https://placeon.site/1200/600/png/linear-45-667eea-764ba2");
  background-size: cover;
}

React/Next.js

import Image from "next/image"

function PlaceholderImage() {
  return (
    <Image
      src="https://placeon.site/400/300/png/0ea5e9?text=Next.js"
      alt="Placeholder"
      width={400}
      height={300}
    />
  )
}

Markdown

![Alt text](https://placeon.site/400/300/png/8b5cf6?text=Markdown)

✨ Best Practices

📐 Size Optimization

  • • Use dimensions smaller than 1920x1080 for web
  • • Prefer smaller sizes like 400x300 for GIF animations
  • • Use multiple sizes for responsive design

🎨 Color Selection

  • • Use hex color codes without # (encode as %23)
  • • Choose harmonious color palettes for gradients
  • • Consider contrast for text readability

📝 Text Usage

  • • URL encode text (use %20 for spaces)
  • • Use short descriptive phrases instead of long text
  • • Adjust font size based on image dimensions

🚀 Performance

  • • Use same URLs to enable image caching
  • • Large GIFs may load slowly, watch file sizes
  • • Use lazy loading in production
← Back to Generator