JPKCom DB

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.

Back to the overview: Placeholder Service · Open the tool live: www.jpkc.com/tools/ph/

The 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. 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:

<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):

<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:
.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 for the big picture, the manual for the full URL scheme, and a collection of tips & tricks. You can try everything right in the tool.