Placeholder Service

Placeholder images without an image editor

The Placeholder Service (called "Placeholder Generator" in the interface) 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 the live preview shows the result right away, together with a finished <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. Long captions are wrapped and scaled down automatically to fit the image — down to a 5 px font size.

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/
https://www.jpkc.com/tools/ph/?800x600-3c4955-eeeeee-Hello+World/&format=webp&scale=2

The server renders a raster image on the fly — PNG by default, or WebP or JPEG on request (&format=) as long as the server supports the format, and with &scale=2 or &scale=3 at double or triple pixel density for Retina displays. Dimensions run from 1 to 3200 pixels per side, colours are 6- or 3-digit hex values (without #, so fff works too), and spaces in the text become +. The text may contain accented letters, umlauts, and punctuation; a hyphen has to be written as %2D, because - separates the parts of the address, and /, &, and # as %2F, %26, and %23. If an address is invalid, the server answers with HTTP 400 and a short plain-text explanation.

That means you can link placeholders straight into HTML, CSS, or Markdown without ever downloading a file. The images ship with a one-year cache header (immutable), making them CDN- and browser-cache-friendly. The full scheme with every parameter is in the manual.

What you can configure

In the interface you configure your placeholder through a few clearly arranged cards:

Dimensions — width and height (1–3200 px each), a button to swap 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), again with a swap button. A contrast readout warns you when the text drops below 4.5:1 and gets hard to read.
Text — show or hide the text, your own Custom text, an extra line with the dimensions, and a Text size (Auto, or a cap between 16 and 96 px).
Image file — Format (PNG, WebP, JPEG) and Pixel density (1×, 2× Retina, 3×), plus downloads as a raster image or SVG.
Preview & output — a Preview that updates on its own, the finished <img> tag (HTML, with srcset at higher pixel densities), the direct Image URL with copy buttons, and a quick reference of the URL format.

Raster image from the server, SVG from the browser

Two paths lead to an image, and they differ technically:

PNG, WebP, or JPEG are produced server-side — that's exactly what the URL scheme above serves, and what the download button saves (it reads Download PNG, Download WebP, or Download JPEG, depending on the format).
SVG is built entirely in the browser: the tool turns your settings into an SVG graphic and offers it in the SVG (no server needed) card under three tabs — as SVG source, as a data URI for CSS (background-image), and as a ready-made IMG tag with an embedded data URI. Download SVG saves it as a file. This variant needs no server request and scales without quality loss — ideal for CSS backgrounds and crisp placeholders.

Both paths use the same font (Droid Sans) and the same layout rule, so the raster image and the SVG show the same lines at the same font size.

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. Open Graph / Facebook 1200 × 630, Instagram square 1080 × 1080, Story / Reel 1080 × 1920, 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, Video 16:9 1280 × 720). 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.