JPKCom DB

Placeholder Service — Examples

Walkthroughs with the Placeholder Service: standard placeholder, brand colours with text, HTML and CSS, social-media presets, Retina WebP, and accented text.

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. Card and button names appear exactly as the tool spells them.

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 Width to 600 and Height to 400.
  2. In Colors pick a light Background (e.g. cccccc) and a darker Text colour (e.g. 333333). The contrast readout below reports Contrast 7.87:1 — easy to read.
  3. Leave Custom text empty — the image then automatically shows its dimensions as "600 x 400".
  4. The Preview updates on its own. Copy the address from Image URL or the finished <img> tag from HTML.

The direct URL then looks like this — you can even type it by hand without the interface (the shorthand ?600x400-ccc-333/ works just the same):

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="600×400 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 (e.g. the dark 264653) and a high-contrast Text colour (e.g. the warm e9c46a). The swatches in the colour picker offer a ready palette for this; the contrast readout confirms with about 6:1 that the combination is legible.
  3. In the Text card type a term under Custom text, say Hero Image. Accented letters and punctuation are allowed too.
  4. Leave Also show the size (width × height) on if you want text and dimensions — the image then shows "Hero Image" on top and "800 x 600" below.

The URL encodes the space as +:

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

Type a longer text, say a full caption, and the tool wraps it and shrinks the font until it fits the image with a little margin — there's nothing you need to set for that.

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 (no server needed) card and open the 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 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, YouTube thumbnail (1280 × 720), Instagram square (1080 × 1080), or Story / Reel (1080 × 1920). Width and height are set instantly.
  2. Adjust colours and text as you like — e.g. Thumbnail as the custom text.
  3. Text size is usually best left on Auto (fits the image): the type grows with the shorter image side, which already means 96 px for the thumbnail. If you'd rather have a more discreet caption, choose a fixed cap such as Medium (max. 32 px).

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

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

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 the 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 Also show the size (width × height). Now the image shows only your text; 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.

Example 7: A Retina placeholder as WebP with srcset

On high-density displays a placeholder at standard pixel density looks soft. The tool gives you the sharp version along with the matching markup.

  1. Set dimensions, colours, and text — for instance 800 × 600 with Hero Image.
  2. In the Image file card choose WebP under Format and 2× (Retina) under Pixel density. The badge on the preview now reads "800 × 600 @2x".
  3. Copy the tag from HTML. It keeps width and height in CSS pixels and offers both versions via srcset:
<img src="https://www.jpkc.com/tools/ph/?800x600-3c4955-eeeeee-Hero+Image/&amp;format=webp" srcset="https://www.jpkc.com/tools/ph/?800x600-3c4955-eeeeee-Hero+Image/&amp;format=webp 1x, https://www.jpkc.com/tools/ph/?800x600-3c4955-eeeeee-Hero+Image/&amp;format=webp&amp;scale=2 2x" alt="Hero Image" width="800" height="600">

On a Retina display the browser fetches the 1600 × 1200 pixel image, otherwise the standard one. Image URL shows the address for the chosen pixel density, and Download WebP saves it as placeholder-800x600@2x.webp. If the server doesn't offer WebP, it's missing from the format list — then use PNG or JPEG.

Example 8: Accents, hyphens, and plus signs in the text

Captions with accented letters are no problem, as long as the characters exist in the font.

  1. Type something like Café Müller – Pre-order 2+1 under Custom text.
  2. Below the field you'll see "Not in the font, left out: –": the typographic en dash (U+2013) lies outside Latin-1 and is missing from the image. The accented letters, the plain hyphen, and the plus sign are kept.
  3. If you want a visible separator there, replace the en dash with a plain hyphen or a colon.

The URL encodes all of it automatically — the hyphen as %2D, the plus sign as %2B, accented letters as UTF-8:

https://www.jpkc.com/tools/ph/?800x600-3c4955-eeeeee-Caf%C3%A9+M%C3%BCller+Pre%2Dorder+2%2B1/

If you build such URLs by hand, the same rule applies: an unencoded - in the text would be read as another part of the address, and the server answers with HTTP 400.

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.