# Placeholder Service — Examples

> Walkthroughs with the Placeholder Service: standard placeholder, brand colours with text, embedding in HTML and CSS, social-media mockups, and plain colour fills.

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

Back to the overview: [Placeholder Service](https://www.jpkc.com/db/en/tools/ph/) · Open the tool live: [www.jpkc.com/tools/ph/](https://www.jpkc.com/tools/ph/)

The [manual](https://www.jpkc.com/db/en/tools/ph/manual/) explains every option and the full URL scheme in detail. This page adds **concrete workflows**: typical tasks step by step, with the finished markup ready to take. The tool's interface is in English, so card and button names appear in their original spelling.

## Example 1: The standard placeholder — 600 × 400 in grey

The classic: a neutral grey rectangle at a fixed size, showing its dimensions.

1. Open the [Placeholder Service](https://www.jpkc.com/tools/ph/). In **Dimensions** set the width to `600` and the height to `400`.
2. In **Colors** pick a light background (e.g. `cccccc`) and a darker text colour (e.g. `333333`).
3. Leave **Custom Text** empty — the image then automatically shows its dimensions as "600 x 400".
4. Click **Update Preview** to load the preview, and copy the address from **Direct URL** or the finished `<img>` tag from **Generated Code**.

The direct URL then looks like this — you can even type it by hand without the interface:

```
https://www.jpkc.com/tools/ph/?600x400-cccccc-333333/
```

The tool provides the matching image tag too:

```html
<img src="https://www.jpkc.com/tools/ph/?600x400-cccccc-333333/" alt="600x400 placeholder" width="600" height="400">
```

## Example 2: Brand colours plus a caption

For a mockup that already looks like "your" site, output placeholders in your brand colours and label them.

1. Set the dimensions (e.g. `800 × 600`).
2. In **Colors** set the brand colour as the **Background Color** (e.g. the dark `264653`) and a high-contrast **Text Color** (e.g. the warm `e9c46a`). The swatches in the colour picker offer a ready palette for this.
3. In **Text Options** type a term under **Custom Text**, say `Hero Image`. Letters, numbers, and spaces are allowed.
4. Leave **Show resolution** on if you want text **and** dimensions — the image then renders two lines: "Hero Image" on top, "800 x 600" below.

The URL encodes the space as `+`:

```
https://www.jpkc.com/tools/ph/?800x600-264653-e9c46a-Hero+Image/
```

## Example 3: Embed placeholders directly in HTML

You don't have to download anything — the URL goes straight into the `src` attribute. Always set `width` and `height` so the layout doesn't shift (the tool writes them for you):

```html
<figure>
	<img
		src="https://www.jpkc.com/tools/ph/?1200x630-3c4955-eeeeee-Cover/"
		alt="Placeholder for the cover image"
		width="1200"
		height="630">
	<figcaption>Cover image to follow</figcaption>
</figure>
```

Because the server sends a long cache header, the same placeholder loads from the browser cache on the second request. If you need several dummies of the same size, just vary the text — `…-Image+1/`, `…-Image+2/` — and keep the dimensions and colours.

## Example 4: As a CSS background via the SVG data URI

For a placeholder that triggers **no** external request and scales without quality loss, use the SVG output.

1. Set dimensions, colours, and text as desired.
2. Go to the **SVG Output** card and open the **Data URI (CSS)** tab.
3. Copy the ready-made line and drop it into your stylesheet:

```css
.placeholder {
	background-image: url('data:image/svg+xml,...');
	background-size: cover;
}
```

The tool provides the full data-URI string — it contains the complete SVG graphic inline. Alternatively, the **IMG Tag** tab gives you an `<img>` with an embedded SVG that also works without an external file, or you save the graphic as a file with **Download SVG**.

## Example 5: A social-media mockup via a preset

For a preview image at exactly the right platform size, you don't have to look up the dimensions.

1. In **Dimensions** open the **Social Media** preset dropdown and pick, say, **Instagram Square** (1080 × 1080) or **YouTube Thumbnail** (1280 × 720). Width and height are set instantly.
2. Adjust colours and text as you like — e.g. `Thumbnail` as the custom text in large type.
3. Set **Text Size** to `large` or `xlarge` so the caption stays readable when scaled down.

The fixed text size lands as a query parameter in the URL:

```
https://www.jpkc.com/tools/ph/?1280x720-993366-eeeeee-Thumbnail/&size=xlarge
```

## Example 6: A plain colour fill, or text only

Sometimes you want no caption at all — or just your text without the dimensions.

- **Colour only, no text:** turn off **Show text on image**. The image becomes a flat fill — good as a coloured block in a layout. The URL gains `&notext=1`:

  ```
  https://www.jpkc.com/tools/ph/?300x250-2a9d8f-2a9d8f/&notext=1
  ```

- **Text only, no dimensions:** enter a **Custom Text** and turn off **Show resolution**. Now the image shows only your text (single line); the "W x H" line is gone. The URL carries `&nodim=1`:

  ```
  https://www.jpkc.com/tools/ph/?800x600-3c4955-eeeeee-Sale/&nodim=1
  ```

  Note: the dimensions can only be hidden when a custom text is set — otherwise the image would have no text at all, and the switch stays disabled.

---

Going deeper: the [overview](https://www.jpkc.com/db/en/tools/ph/) for the big picture, the [manual](https://www.jpkc.com/db/en/tools/ph/manual/) for the full URL scheme, and a collection of [tips & tricks](https://www.jpkc.com/db/en/tools/ph/tips/). You can try everything right in the [tool](https://www.jpkc.com/tools/ph/).