# Placeholder Service

> Generate placeholder images with custom dimensions, hex colors, and text — via a real URL scheme or as a PNG/SVG download. Your starting point for manual, examples, tips.

Source: https://www.jpkc.com/db/en/tools/ph/

## Placeholder images without an image editor

The [Placeholder Service](https://www.jpkc.com/tools/ph/) creates grey (or any-colour) placeholder images at any size — for prototypes, mockups, demos, and layout tests where the real image isn't ready yet. You set the dimensions, background and text colour, and an optional caption, and immediately get a finished graphic, an `<img>` tag, and a direct URL to copy.

It solves an everyday web-development problem: you're building a layout, but the final images aren't there yet. Instead of quickly exporting an empty rectangle from a graphics program, you grab a pixel-perfect placeholder here — at the right resolution, in your brand colours, labelled with its dimensions or a caption of your own.

It's built for everyone who builds pages and layouts: **developers** who need an image of the right size in a template fast; **designers** who fill mockups with consistent dummy images; and anyone who needs an exact pixel size for **social-media templates, ad banners, or device mockups**. Free, no account, right in the browser.

## A real URL scheme: fetch images by address

Unlike most tools, the Placeholder Service has a **real, publicly callable URL scheme**. You don't have to use the interface at all — a placeholder image is produced simply by requesting an address that follows this pattern:

```
https://www.jpkc.com/tools/ph/?WIDTHxHEIGHT-BACKGROUND-TEXTCOLOR/
https://www.jpkc.com/tools/ph/?WIDTHxHEIGHT-BACKGROUND-TEXTCOLOR-Text/
```

Concretely:

```
https://www.jpkc.com/tools/ph/?600x400-cccccc-333333/
https://www.jpkc.com/tools/ph/?800x600-3c4955-eeeeee-Hello+World/
```

The server generates an on-the-fly **PNG image** from it — dimensions from 1 to 3200 pixels per side, colours as 6-digit hex values (without `#`), spaces in the text as `+`. So you can link placeholders straight into HTML, CSS, or Markdown without ever downloading a file. The images ship with a **one-year cache header**, making them CDN- and browser-cache-friendly. The full scheme with every parameter is in the [manual](https://www.jpkc.com/db/en/tools/ph/manual/#the-url-scheme-the-real-api).

## What you can configure

In the interface (the tool labels are English) you configure your placeholder through a few clearly arranged cards:

- **Dimensions** — width and height (1–3200 px each), a **Swap** button to flip them, and dropdowns with ready-made **presets** (Social Media, Web Banners, Devices, Common).
- **Colors** — background and text colour via a colour picker (hex, with swatches), also with a **Swap** button.
- **Text Options** — show/hide text, show/hide the dimensions line, your own **Custom Text** (letters, numbers, spaces), and a **Text Size** (Auto, Small, Medium, Large, Extra Large).
- **Preview & output** — a preview (refreshed by button), the finished `<img>` tag, the direct URL, and copy buttons for both.

## PNG from the server, SVG from the browser

Two paths lead to an image, and they differ technically:

- **PNG** is produced **server-side** — that's exactly what the URL scheme above serves, and what you download with **Download PNG**.
- **SVG** is built **entirely in the browser**: the tool turns your settings into an SVG graphic and offers it in three forms — as **SVG source**, as a **CSS data URI** (`background-image`), and as a ready-made **IMG tag** with an embedded data URI. **Download SVG** saves it as a file. This SVG variant needs no server request and scales without quality loss — ideal for CSS backgrounds and crisp placeholders.

## Preset sizes

You don't have to memorise the common sizes — the presets supply them ready-made, grouped into four dropdowns: **Social Media** (e.g. Facebook Post 1200 × 630, Instagram Square 1080 × 1080, YouTube Thumbnail 1280 × 720), **Web Banners** (e.g. Leaderboard 728 × 90, Medium Rectangle 300 × 250, Billboard 970 × 250), **Devices** (e.g. iPhone 15 Pro 393 × 852, iPad Pro 1024 × 1366, Desktop HD 1920 × 1080), and **Common** (e.g. Square 150/300/600, Thumbnail 150 × 100, Hero 1200 × 400). One click sets width and height — then you adjust colours and text.

## Try it now

**[→ Open the Placeholder Service](https://www.jpkc.com/tools/ph/)** — pick dimensions, set colours, type a caption, copy the URL or `<img>` tag. Or skip the interface entirely: write an address following the URL scheme into your markup and the server delivers the image. No account, free, right in the browser.

## Related JPKCom tools

These tools fit right in around placeholders and mockups:

- **[Graphic Editor](https://www.jpkc.com/db/en/tools/graphic/)** — when the placeholder should become a real graphic: crop, label, export.
- **[Color Tools](https://www.jpkc.com/db/en/tools/colors/)** — find the right hex values for the background and text colour you use here.
- **[Lorem Ipsum](https://www.jpkc.com/db/en/tools/lorem-ipsum/)** — dummy text for the same mockup that holds the placeholder images.

---

There's more on the subpages: the **[manual](https://www.jpkc.com/db/en/tools/ph/manual/)** with the full URL scheme and every option, hands-on **[examples](https://www.jpkc.com/db/en/tools/ph/examples/)**, and a collection of **[tips & tricks](https://www.jpkc.com/db/en/tools/ph/tips/)**.