Placeholder Service — Tips & Tricks

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

The manual explains every option, the examples show the workflows. This page is about what both assume but rarely state: how to use the URL scheme efficiently, when a raster image and when SVG is the better choice, and which quirks trip people up. Card and button names appear exactly as the tool spells them.

Using the URL scheme cleverly

You don't need the interface. Once you know the pattern ?WIDTHxHEIGHT-BACKGROUND-TEXTCOLOR/, you type placeholder URLs straight into your markup or template. The tool is then only there for quick experiments, picking colours, and checking contrast.
Generate placeholders in loops. Because each size and colour is its own URL, you can vary them systematically in a template loop — e.g. …-Image+1/, …-Image+2/ for a gallery. Dimensions and colours stay the same; only the text counts up.
Colours without #, short is fine. In the URL scheme hex values appear without the hash (cccccc, not #cccccc). The 3-digit shorthand from CSS works too: ?600x400-ccc-333/ is the same image as ?600x400-cccccc-333333/.
Spaces are +, hyphens are %2D. In the custom text, + becomes a space — for "Hello World" you write Hello+World. Because the hyphen separates the parts of the address, you encode it as %2D, and a literal plus sign as %2B. Copy the URL from the tool and that's already taken care of.
Combine options freely. Everything after the trailing slash is optional and can be combined at will, e.g. /&format=webp&scale=2&size=large. The order doesn't matter.

Caching and hotlinking

Images are cached for a year. The server sends Cache-Control: public, max-age=31536000, immutable. That's ideal for performance — the same placeholder URL loads from cache the second time.
One URL, one image. Because the URL describes the image completely, a placeholder only changes when its URL changes. Want a different image? Change a parameter — then it's guaranteed to be a "new" image, and no stale copy lingers in the cache.
Lots of placeholders on one page are fine. The server renders up to 300 images per minute per IP address; beyond that it answers with HTTP 429 and says via Retry-After when to try again. In practice you only hit that limit with scripts fetching masses of different images — requests served from the browser cache don't count.
Hotlinking is intended here — but mind the dependency. Embedding placeholders live from jpkc.com ties your page to this service. Fine for local mockups; for anything permanent, rather download the image or SVG and ship it, instead of linking out forever.

PNG or SVG — which when?

A raster image (server, URL scheme) is the right choice when you need a real image URL: for <img src>, for tests, for anything that expects an address. PNG is the default and is saved as a palette image, which keeps flat placeholders small; pick WebP or JPEG (&format=webp, &format=jpg, both at quality 90) when your project expects a specific format or you want to test delivery of exactly that format. The Image file card shows which formats are available.
Retina works as a raster image too. With Pixel density 2× or 3× (&scale=2, &scale=3) you get a correspondingly larger image, and the HTML tag comes with the matching srcset.
SVG (browser, SVG (no server needed) card) is the right choice for CSS backgrounds and anything that should scale without quality loss. The data URI in background-image triggers no network request and makes you independent of jpkc.com.
Remember: the URL scheme delivers PNG, WebP, or JPEG — but no SVG. SVG is produced exclusively in the browser; there's no SVG URL the server serves. Text and line breaks are identical in both variants, though.

Pitfalls from practice

A placeholder won't load? Open the URL directly. The server answers an invalid address with HTTP 400 and a short plain-text message starting with the reason, e.g. Invalid placeholder URL: colours must be 3 or 6 hex digits, e.g. 3c4955 or fff, followed by the expected format and an example. In an <img> you only see a broken image — in a browser tab you see the reason.
A hyphen in the text breaks the URL. An unencoded - in the text creates one part too many, and the answer is a 400 with the hint expected 3 or 4 parts. The fix: %2D — or copy the URL from the tool.
/, &, and # silently shorten the text. Unlike the hyphen they don't cause an error: the server only receives the text up to that character and returns an image with the shortened caption. In a URL you build by hand, write them as %2F, %26, and %23 — a URL copied from the tool already encodes them.
Accents work, typographic characters don't. The text may contain anything from printable Latin-1: umlauts, ß, accented letters, punctuation, & (as %26 in the URL), §. Curly quotes, en and em dashes (–, —), the euro sign, and emoji aren't in the font — they're dropped. Below Custom text the interface shows which characters it leaves out. Write "EUR" instead of "€" and straight quotes instead of curly ones.
The dimensions line can't always be switched off. Also show the size (or nodim=1) only takes effect when a Custom text is set. Without your own text the image shows the dimensions — otherwise there'd be nothing on it. The switch is deliberately disabled then, and &nodim=1 in the URL has no effect either.
Text size is a cap. A preset like xlarge sets the largest font, not a fixed one. Long text is wrapped and shrunk until it fits within 90 % of the image — with a lot of text in a small image, all the way down to 5 px. Shorten the text if it needs to stay legible.
Dimensions and pixel density share the limit. Values below 1 or above 3200 px are trimmed. With scale the limit applies to the finished image: 2000x1000 with &scale=2 would be 4000 pixels wide and is rejected with a 400. The interface won't stop you: the Preview always loads the 1× version and still shows an image, but Image URL, the download, and the high-density version in the srcset then run into that error. If you need more than 3200 px per side, this service can't do it.
Keep an eye on the contrast readout. The Colors card calculates the contrast ratio between text and background and warns below 4.5:1. For placeholders that have to stay legible in presentations or on projectors, it's worth a glance.

Use in HTML and CSS

Always set width/height. The <img> tag the tool produces brings both attributes — at 2× or 3× as well, then in CSS pixels. Keep them — they reserve the space and prevent layout shifts during loading (good for Core Web Vitals).
Take the srcset along. At a pixel density above 1× the HTML code includes a srcset with the standard and the high-density version. That way you can already test in the mockup whether your layout handles responsive images correctly.
Responsive placeholders. Set the image to max-width: 100%; height: auto, and a generously sized placeholder adapts to its container. For crisp, freely scaling fills, use the SVG data URI instead.
As meaningful alt text. The tool fills alt with your custom text or "W×H placeholder". In a real mockup it pays to replace alt with a description of the eventual image — then accessibility is already prepared before the real image arrives.

Combining it with other JPKCom tools

From placeholder to real graphic: when the dummy should become the finished image, the Graphic Editor handles cropping, labelling, and exporting at the same target size.
Finding the right hex values: with Color Tools you determine the background and text colour before you use them here — without the #. The Placeholder Service shows you the contrast directly in the Colors card.
Dummy text for the same mockup: where placeholder images sit, the text is usually missing too. Lorem Ipsum supplies it to match.

More context: the overview for the big picture, the manual for the full URL scheme, and the examples for the step-by-step workflows. You can try everything right in the tool.