JPKCom DB

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.

Placeholder images without an image editor

The Placeholder Service 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.

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 — 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.

These tools fit right in around placeholders and mockups:

  • Graphic Editor — when the placeholder should become a real graphic: crop, label, export.
  • Color Tools — find the right hex values for the background and text colour you use here.
  • Lorem Ipsum — dummy text for the same mockup that holds the placeholder images.

There's more on the subpages: the manual with the full URL scheme and every option, hands-on examples, and a collection of tips & tricks.