Placeholder Image Generator – Documentation

Create dynamic placeholder images via URL parameters. Perfect for mockups, prototypes, and development environments.

holdmyimages.com · API Reference

Overview

The Placeholder Image Generator creates images based on query parameters. Quick start with the following call:

https://holdmyimages.com/placeholder.php?w=400&h=300

Creates a 400×300 px image with default colors and size text.

Parameters

Parameter Reference

Basics

  • w: Width in pixels. Default: 600. Example: w=800
  • h: Height in pixels. Default: 400. Example: h=600
  • size: Square size (sets width = height). Example: size=500
  • text: Display text. Default: {width}x{height} (e.g. 400x300)

Colors

  • bg: Background color (Hex without #). Default: F5F5F5
  • color: Text color (Hex without #). Default: 666666

Text

  • fontsize: Font size in pixels. Range: 8–200. Default: 12

Format & Quality

  • format: Output format (png, jpg, jpeg, svg). Default: png
  • quality: JPEG quality 1–100. Default: 95
  • scale: Resolution scaling 1.0–4.0. Default: 1.0
Examples

Practical Examples

Standard Placeholder

https://holdmyimages.com/placeholder.php?w=400&h=300

400×300 px, default gray, text shows the size.

Square Logo

https://holdmyimages.com/placeholder.php?size=300&text=Logo&bg=333333&color=FFFFFF

300×300 px, dark background, white text.

Colored Header Image

https://holdmyimages.com/placeholder.php?w=600&h=400&text=Header&bg=FF6B6B&color=FFFFFF&fontsize=24

Red (#FF6B6B) with large white font.

Retina (Scale ×2)

https://holdmyimages.com/placeholder.php?w=400&h=300&text=Retina&scale=2

Creates 800×600 px, sharp on HiDPI/Retina displays.

SVG for Vectors

https://holdmyimages.com/placeholder.php?w=500&h=200&text=Vector&format=svg

Infinitely scalable, ideal for logos and text.

JPEG with Quality

https://holdmyimages.com/placeholder.php?w=800&h=600&format=jpg&quality=90

Small file size for large images.

Integration

HTML Integration

IMG Tag

<img src="https://holdmyimages.com/placeholder.php?w=400&h=300&text=Sample" alt="Placeholder">

Responsive (Retina)

<img src="https://holdmyimages.com/placeholder.php?w=800&h=600&scale=2" style="max-width: 400px; height: auto;" alt="Retina Placeholder">

CSS Background Image

.hero { background-image: url('https://holdmyimages.com/placeholder.php?w=1200&h=600&bg=2c3e50&text=Hero'); background-size: cover; }
Best Practices

Best Practices & Notes

Tips:
  • scale=2 for sharp display on Retina displays.
  • format=jpg for large images without transparency (smaller files).
  • SVG for logos, icons and text (scales infinitely).
  • Encode spaces in text with %20.
Important:
  • Maximum width/height: Do not exceed 2000 px.
  • SVG uses system fonts instead of custom OTF fonts.
FAQ

FAQ

Why is my text not displayed sharply?

Use scale=2 for double resolution or format=svg for vector-based, pixel-independent display.

Which image format is the right one?

PNG for general web graphics (lossless, transparency). SVG for logos/icons/text (infinitely scalable). JPEG for photos and large images (smaller files).

How do I create transparent images?

Use the PNG format; JPEG does not support transparency.

Footer

Copyright ©HoldMyImages