Placeholder Service — Manual

Zurück zur Übersicht: Placeholder Service · Tool live öffnen: www.jpkc.com/tools/ph/

Dieses Manual beschreibt den Placeholder Service (in der Oberfläche „Placeholder Generator") vollständig: das öffentlich aufrufbare URL-Schema mit allen Parametern und Grenzen, die Regel, nach der der Text ins Bild gesetzt wird, jede Option der Oberfläche und die zwei Ausgabewege Rasterbild (Server) und SVG (Browser). Die Oberfläche des Tools ist auf Englisch — die Karten- und Button-Bezeichnungen stehen hier deshalb in ihrer englischen Original-Schreibweise (mit deutscher Erläuterung), damit du dich im echten Interface zurechtfindest.

Die Oberfläche im Überblick

Die Generator-Seite ist zweispaltig: links die Ausgaben (Preview, HTML, Image URL, URL format), rechts die Eingaben (Dimensions, Colors, Text, Image file samt den Download-Knöpfen) und darunter die SVG-Ausgabe (SVG (no server needed)). Alles aktualisiert sich live: URL, Code und SVG sofort beim Tippen, das Vorschaubild vom Server kurz danach (siehe Vorschau und Code-Ausgabe). Die Voreinstellung ist ein 800 × 600-Bild mit dunklem Hintergrund (3c4955) und hellem Text (eeeeee), das die Maße „800 x 600" anzeigt — als PNG in einfacher Pixeldichte.

Das URL-Schema (die eigentliche API)

Der Kern des Tools ist ein echtes, öffentliches URL-Schema: Jedes Platzhalter-Bild lässt sich allein durch den Aufruf einer Adresse erzeugen — ohne die Oberfläche, ohne Account, ohne Datei-Download. Der Server generiert daraus on-the-fly ein Rasterbild (PNG, WebP oder JPEG).

Aufbau der Adresse

Basis ist die Tool-URL, gefolgt von einem Parameter-Segment und einem Trailing-Slash:

https://www.jpkc.com/tools/ph/?BREITExHÖHE-HINTERGRUND-TEXTFARBE/
https://www.jpkc.com/tools/ph/?BREITExHÖHE-HINTERGRUND-TEXTFARBE-Text/

Das Segment besteht aus drei oder vier mit Bindestrich getrennten Teilen: zuerst die Maße als BREITExHÖHE, dann die Hintergrundfarbe, dann die Textfarbe und optional als vierter Teil ein eigener Text. Die optionalen Query-Parameter (siehe unten) hängst du nach dem Trailing-Slash mit & an.

Als Bild-Anfrage gilt das Segment nur, wenn es mit einer Ziffer beginnt — eine Adresse wie ?utm_source=… zeigt deshalb ganz normal die Generator-Seite. Neben der Query-Form akzeptiert der Server auch die Pfad-Form ohne Fragezeichen (/tools/ph/800x600-3c4955-eeeeee/). Sie taugt aber nur für die einfache Variante: Ein Text darf dort nur aus ASCII-Buchstaben, Ziffern und Unterstrichen bestehen, und Optionen wie &format= kommen in dieser Form nicht beim Tool an. Das Tool selbst erzeugt immer die Query-Form — nimm sie, sobald Leerzeichen, kodierte Zeichen oder Optionen im Spiel sind.

Pflicht-Parameter

Teil	Bedeutung	Format / Grenze
W	Breite	Ganzzahl, höchstens 5 Ziffern, auf 1–3200 begrenzt
H	Höhe	Ganzzahl, höchstens 5 Ziffern, auf 1–3200 begrenzt
BG	Hintergrundfarbe	Hex ohne `#`, 6- oder 3-stellig (z. B. `cccccc` oder `ccc`)
FG	Textfarbe	Hex ohne `#`, 6- oder 3-stellig (z. B. `333333` oder `333`)
Text	Custom-Text (optional)	`+` = Leerzeichen, `%2D` = „-", `%2B` = „+", `%2F` = „/", `%26` = „&", `%23` = „#"; druckbares Latin-1 (Umlaute, ß, é, ñ, Satzzeichen); max. 255 Zeichen

Maße und Farben sind also immer Pflicht; der Text ist optional. Lässt du den Text weg, zeigt das Bild die Maße als „W x H". Groß- und Kleinschreibung der Hex-Werte spielt keine Rolle; die 3-stellige Kurzform wird wie in CSS verdoppelt (fff = ffffff).

Optionale Query-Parameter

Diese hängst du hinter dem Trailing-Slash an (mit & verbunden):

Parameter	Wirkung
`&size=small\|medium\|large\|xlarge`	Obergrenze für die Schriftgröße: 16, 32, 64 bzw. 96 px statt automatischer Größe (Default: auto). Langer Text wird trotzdem verkleinert, bis er passt.
`&notext=1`	Blendet jeden Text aus — reine Farbfläche
`&nodim=1`	Blendet die Maße-Zeile aus — zeigt nur den Custom-Text. Ohne Custom-Text wirkungslos: Dann zeigt das Bild weiter die Maße.
`&format=png\|webp\|jpg`	Ausgabeformat, Default `png`; `jpeg` wird als `jpg` verstanden. Angeboten wird nur, was die Grafikbibliothek (GD) des Servers schreiben kann — PNG immer, WebP und JPEG nur bei entsprechender Unterstützung.
`&scale=1\|2\|3`	Pixeldichte: Das Bild hat W × scale mal H × scale Pixel, der Text wächst mit. Für Retina- und andere hochauflösende Displays. Default `1`.

Beispiel-URLs

# 600 x 400, hellgrau, dunkler Text, zeigt die Maße
https://www.jpkc.com/tools/ph/?600x400-cccccc-333333/

# dasselbe mit Kurz-Hex
https://www.jpkc.com/tools/ph/?600x400-ccc-333/

# 800 x 600 in Markenfarben mit eigenem Text (Leerzeichen als +)
https://www.jpkc.com/tools/ph/?800x600-3c4955-eeeeee-Hello+World/

# größere Startschrift (96 px statt automatisch 84 px)
https://www.jpkc.com/tools/ph/?1200x630-264653-e9c46a-Cover/&size=xlarge

# nur Farbfläche, kein Text
https://www.jpkc.com/tools/ph/?300x250-eeeeee-eeeeee/&notext=1

# nur der Custom-Text, ohne Maße-Zeile
https://www.jpkc.com/tools/ph/?800x600-3c4955-eeeeee-Sale/&nodim=1

# WebP in doppelter Pixeldichte (1600 x 1200 Pixel)
https://www.jpkc.com/tools/ph/?800x600-3c4955-eeeeee-Hero/&format=webp&scale=2

# Umlaut und Bindestrich im Text: "Größe Sommer-Sale"
https://www.jpkc.com/tools/ph/?800x600-3c4955-eeeeee-Gr%C3%B6%C3%9Fe+Sommer%2DSale/

Validierung und Grenzen

Der Server prüft jede Adresse, bevor er ein Bild erzeugt:

Das Segment muss 3 oder 4 Teile haben. Ein Bindestrich im Text würde einen fünften Teil erzeugen — deshalb %2D.
Ein unkodiertes /, & oder # beendet die Anfrage an dieser Stelle: / schließt das Segment ab, & beginnt die nächste Option, und alles ab # schickt der Browser gar nicht erst mit. Der Text wird dann still abgeschnitten — aus ?800x600-fff-000-Ein/Aus/ wird „Ein", aus ?800x600-fff-000-A&B/ wird „A", und der Server liefert ohne Fehlermeldung (HTTP 200) ein Bild mit dem verkürzten Text. Schreib diese Zeichen als %2F, %26 und %23; in der URL aus dem Tool ist das schon erledigt.
Der erste Teil muss exakt das Muster BREITExHÖHE aus Ziffern haben (je höchstens 5 Ziffern; Schreibweisen wie 1e3x10 werden abgelehnt). Innerhalb dieses Musters werden die Maße hart auf 1–3200 begrenzt: 5000x100 ergibt ein 3200 × 100-Bild, 0x100 ein 1 × 100-Bild.
Hintergrund und Textfarbe müssen 3 oder 6 Hex-Ziffern sein.
Der Text muss gültiges UTF-8 sein. + wird zum Leerzeichen, danach werden Prozent-Kodierungen aufgelöst. Erhalten bleibt druckbares Latin-1 — das ist der Zeichenvorrat der verwendeten Schrift Droid Sans: ASCII, Umlaute, ß, Akzentbuchstaben und Zeichen wie §, ° oder ©. Alles andere (typografische Anführungszeichen und Gedankenstriche, €, Emoji) wird entfernt, mehrfache Leerzeichen danach zusammengefasst und der Rest auf 255 Zeichen gekürzt.
format muss ein vom Server unterstütztes Format sein, scale 1, 2 oder 3 — und die größere Seite mal scale darf 3200 Pixel nicht überschreiten (2000x1000 mit &scale=2 wird abgelehnt).
Fehlerantwort: Passt eine Adresse nicht, antwortet der Server mit HTTP 400 und einem Klartext (text/plain) der Form Invalid placeholder URL: <Grund>, gefolgt vom Format und einem Beispiel. Im <img> erscheint das als defektes Bild; rufst du die Adresse direkt im Browser auf, liest du dort den Grund.

So passt der Text ins Bild

Rasterbild und SVG setzen den Text nach derselben Regel, deshalb sehen beide gleich aus:

Startgröße: Mit Text size auf Auto ist sie die kürzere Bildseite geteilt durch 6 (eine Zeile) bzw. durch 7,5 (Custom-Text plus Maße-Zeile), mindestens 5 und höchstens 170 px. Ein Preset (small 16, medium 32, large 64, xlarge 96 px) ersetzt diese Startgröße.
Umbruch: Der Custom-Text wird an Wortgrenzen umbrochen, sobald eine Zeile breiter als 90 % des Bildes würde. Ein einzelnes Wort, das allein schon zu breit ist, bleibt in seiner eigenen Zeile.
Verkleinern: Passen nicht alle Zeilen in 90 % der Breite oder der ganze Block in 90 % der Höhe, schrumpft die Schrift in 10-%-Schritten und der Umbruch wird neu berechnet — bis alles passt oder die Mindestgröße von 5 px erreicht ist.

Die Zeilen stehen mit 1,2-fachem Zeilenabstand mittig im Bild; die Maße-Zeile „W x H" ist immer die letzte. Die Presets sind damit Obergrenzen: Ein langer Text wird auch mit xlarge kleiner gesetzt, damit er nicht über den Rand läuft.

Maße (Dimensions)

Die Dimensions-Karte hat zwei Zahlenfelder Width und Height (je 1–3200). Werte außerhalb dieses Bereichs werden beim Verlassen des Feldes auf die Grenze gesetzt. Ein Tausch-Knopf (Pfeil-Symbol, „Swap width and height") vertauscht Breite und Höhe — praktisch, um vom Quer- ins Hochformat zu wechseln. Darunter liegen vier Presets-Dropdowns mit fertigen Maßen; ein Klick auf einen Eintrag setzt Breite und Höhe (siehe Presets).

Farben (Colors)

Die Colors-Karte hat zwei Felder, Background und Text, jeweils über einen Farbwähler bedienbar (Hex-Format ohne Transparenz, mit zwölf vordefinierten Swatches). Du kannst auch direkt tippen; #fff oder fff werden ebenso verstanden wie #ffffff, beim Verlassen des Feldes steht dort wieder die volle 6-stellige Form. Ein Tausch-Knopf („Swap colors") tauscht Hinter- und Vordergrundfarbe — nützlich, um schnell eine helle und eine dunkle Variante zu vergleichen. Im URL-Schema landen diese Werte als 6-stelliger Hex ohne #.

Unter den Feldern zeigt das Tool den Kontrast zwischen Text- und Hintergrundfarbe als Verhältnis an, etwa Contrast 7.95:1 für die Voreinstellung (berechnet nach der WCAG-Formel für relative Leuchtdichte). Unter 4,5:1 färbt sich die Anzeige als Warnung und ergänzt „below 4.5:1, the text may be hard to read".

Text-Optionen (Text)

Die Text-Karte steuert, was auf dem Bild steht:

Show text on the image — Hauptschalter für den Text. Aus → das Bild ist eine reine Farbfläche (entspricht notext=1).
Custom text — dein eigener Text (max. 255 Zeichen). Erlaubt ist alles aus druckbarem Latin-1, also auch Umlaute, ß und Satzzeichen. Zeichen, die die Schrift nicht kennt, lässt das Tool weg und nennt sie unter dem Feld: „Not in the font, left out: …". Leer lassen → das Bild zeigt nur die Maße (so verrät es auch der Platzhaltertext „Leave empty to show the size"). Bindestriche und Pluszeichen kodiert das Tool in der URL selbst.
Also show the size (width × height) — blendet die Maße-Zeile zusätzlich zum Custom-Text ein oder aus. Dieser Schalter ist nur aktiv, wenn Text gezeigt wird und ein Custom-Text gesetzt ist — sonst hätte das Bild gar keinen Text mehr. Aus → nur der Custom-Text erscheint (entspricht nodim=1).
Text size — Auto (fits the image), Small (max. 16 px), Medium (max. 32 px), Large (max. 64 px) oder Extra large (max. 96 px). Wie die Größe zustande kommt, steht unter So passt der Text ins Bild; das Tool erinnert daran mit „Long text is wrapped and shrunk so it always fits."

Sind Custom-Text und Maße sichtbar, steht oben der (gegebenenfalls mehrzeilige) Custom-Text, darunter die Maße.

Vorschau und Code-Ausgabe

Vier Karten links zeigen das Ergebnis:

Preview — das Vorschaubild, so wie es der Server liefert („image from the server"), mit einem Badge, das die aktuellen Maße nennt (bei höherer Pixeldichte mit Zusatz wie „@2x"). Die Vorschau aktualisiert sich automatisch, rund eine halbe Sekunde nach der letzten Änderung; sie lädt immer die Variante in einfacher Pixeldichte. Ein eigener Knopf zum Aktualisieren ist nicht nötig.
HTML — der fertige <img>-Tag inklusive src, alt, width und height, mit Copy-Knopf. alt ist dein Custom-Text oder „W×H placeholder"; Sonderzeichen sind HTML-escaped. Bei einer Pixel density von 2× oder 3× bekommt der Tag zusätzlich ein srcset mit der einfachen und der hochauflösenden Variante, während width und height die CSS-Maße behalten.
Image URL — die reine Bild-URL nach dem Schema oben, inklusive format und scale, ebenfalls mit Copy-Knopf.
URL format — eine Kurzreferenz des URL-Formats und der Optionen direkt im Tool, mit den Formaten, die dieser Server tatsächlich anbietet.

Format, Pixeldichte und Download (Image file)

Die Image file-Karte legt das Rasterformat fest und bietet zwei Downloads:

Format — PNG, WebP oder JPEG. Die Liste zeigt nur die Formate, die der Server erzeugen kann. Die Wahl wirkt auf Preview, Image URL, HTML und den Download.
Pixel density — 1× (standard), 2× (Retina) oder 3×. Das Bild bekommt entsprechend mehr Pixel, der Text bleibt im Verhältnis gleich groß. Die Grenze von 3200 Pixeln gilt für das Ergebnis: Bei 3× sind höchstens 1066 Pixel Kantenlänge möglich.
Download PNG / WebP / JPEG — der Knopf trägt das gewählte Format im Namen und speichert das serverseitig erzeugte Bild als placeholder-WxH.png bzw. bei höherer Dichte als placeholder-WxH@2x.webp o. Ä. Dieser Weg nutzt genau das URL-Schema.
Download SVG — speichert die im Browser erzeugte SVG-Variante als placeholder-WxH.svg.

SVG-Ausgabe im Detail

Die Karte SVG (no server needed) ist eine eigenständige, rein clientseitige Funktion — sie erzeugt aus deinen Einstellungen eine SVG-Grafik ohne Server-Request. Oben siehst du eine Live-SVG-Vorschau, darunter drei Tabs mit Copy-Knopf:

SVG — der rohe <svg>-Quelltext: ein <rect> als Fläche und ein <text> mit einem <tspan> je Zeile, horizontal zentriert.
CSS — eine fertige CSS-Zeile background-image: url('data:image/svg+xml,…'); zum direkten Einsetzen in dein Stylesheet.
IMG — ein <img> mit eingebettetem SVG-Data-URI, das ganz ohne externe Datei und ohne Server-Request auskommt.

Das SVG übernimmt Zeilen und Schriftgröße exakt aus der Text-Layout-Regel; im Browser misst das Tool dafür mit derselben Schrift Droid Sans wie der Server und ohne Kerning. Im SVG selbst steht als Schrift die Kette 'Droid Sans', 'Noto Sans', Roboto, Arial, sans-serif — ist Droid Sans beim Betrachter nicht installiert, springt die nächste Schrift ein, und die Laufweite kann minimal abweichen. Das SVG hat immer die CSS-Maße; die Pixeldichte spielt hier keine Rolle, weil eine Vektorgrafik ohnehin bei jeder Auflösung scharf bleibt.

Anders als das Raster-URL-Schema landet hier nichts auf dem Server — die Grafik existiert nur in deinem Browser, bis du sie kopierst oder herunterlädst.

Presets: fertige Maße

Die vier Preset-Dropdowns setzen mit einem Klick gängige Größen:

Social media — Open Graph / Facebook 1200 × 630, X / Twitter post 1200 × 675, Instagram square 1080 × 1080, Instagram portrait 1080 × 1350, Story / Reel 1080 × 1920, LinkedIn post 1200 × 627, YouTube thumbnail 1280 × 720.
Web banners — Leaderboard 728 × 90, Large leaderboard 970 × 90, Medium rectangle 300 × 250, Wide skyscraper 160 × 600, Half page 300 × 600, Billboard 970 × 250, WP plugin banner 772 × 250, WP plugin banner @2x 1544 × 500.
Devices — iPhone 15 Pro 393 × 852, iPhone SE 375 × 667, iPad Pro 1024 × 1366, Desktop HD 1920 × 1080, Desktop QHD 2560 × 1440, MacBook Pro 1512 × 982.
Common — Square small 150 × 150, Square medium 300 × 300, Square large 600 × 600, Thumbnail 150 × 100, Preview 4:3 400 × 300, Hero 1200 × 400, Video 16:9 1280 × 720.

Caching und Betrieb — kompakt

Ausgabeformate Server: PNG (image/png) immer, WebP und JPEG (Qualität 90), soweit die Grafikbibliothek des Servers sie unterstützt. SVG ist eine reine Browser-Funktion.
Caching: ausgelieferte Bilder tragen Cache-Control: public, max-age=31536000, immutable — die URL beschreibt das Bild vollständig, Browser und CDN dürfen es ein Jahr vorhalten.
Maße: 1–3200 px je Seite, hart begrenzt; mit scale gilt die Grenze für das Ergebnis in Pixeln.
Text: max. 255 Zeichen, druckbares Latin-1; + = Leerzeichen, %2D = „-", %2B = „+", %2F = „/", %26 = „&", %23 = „#".
Farben: je 6- oder 3-stelliger Hex ohne #.
Fehlerverhalten: ungültige URL → HTTP 400 mit Klartext-Hinweis, nicht gecacht.
Rate Limit: höchstens 300 neu erzeugte Bilder pro Minute und IP-Adresse; darüber antwortet der Server mit HTTP 429 und einem Retry-After-Header. Wiederholte Aufrufe, die der Browser aus seinem Cache bedient, erreichen den Server gar nicht erst und zählen deshalb nicht mit.
Kein Account, kein Verlauf: Das Tool merkt sich keine Einstellungen; jedes Bild entsteht allein aus seiner URL.

Für den Einstieg, die Zielgruppen und das große Bild siehe die Übersichtsseite. Praxisnahe Durchläufe stehen in den Beispielen. Ausprobieren kannst du alles direkt im Tool.