Placeholder Service — Manual

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

Dieses Manual beschreibt den Placeholder Service vollständig: das öffentlich aufrufbare URL-Schema mit allen Parametern und Grenzen, jede Option der Oberfläche und die zwei Ausgabewege PNG (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, Generated Code, Direct URL, API Usage), rechts die Eingaben (Dimensions, Colors, Text Options, Actions, SVG Output). Du stellst rechts etwas ein, links aktualisieren sich URL und Code sofort — nur die Bild-Vorschau lädst du bewusst per Knopf neu (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.

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

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.

Pflicht-Parameter

Teil	Bedeutung	Format / Grenze
W	Breite	Ganzzahl 1–3200
H	Höhe	Ganzzahl 1–3200
BG	Hintergrundfarbe	6-stelliger Hex ohne `#` (z. B. `cccccc`)
TXT	Textfarbe	6-stelliger Hex ohne `#` (z. B. `333333`)
Text	Custom-Text (optional)	Buchstaben, Zahlen, Leerzeichen; `+` = Leerzeichen; 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".

Optionale Query-Parameter

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

Parameter	Wirkung
`&size=small\|medium\|large\|xlarge`	Feste Textgröße statt automatischer Skalierung (Default: `auto`)
`&notext=1`	Blendet jeden Text aus — reine Farbfläche
`&nodim=1`	Blendet die Maße-Zeile aus — zeigt nur den Custom-Text (nur sinnvoll, wenn ein Custom-Text gesetzt ist)

Beispiel-URLs

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

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

# große Schrift erzwingen
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

Validierung und Grenzen

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

Das Segment muss 3 oder 4 Teile haben und der erste Teil exakt das Muster BREITExHÖHE. Hintergrund und Textfarbe müssen aus Hex-Ziffern bestehen und werden auf genau 6 Zeichen geprüft.
Maße müssen numerisch sein und werden hart auf den Bereich 1–3200 begrenzt (PH_MAX_DIMENSION). Größere oder kleinere Werte werden zurechtgestutzt.
Der Custom-Text wird gefiltert: + wird zu einem Leerzeichen, alles außer Buchstaben, Ziffern und Leerzeichen wird entfernt, und der Rest auf 255 Zeichen gekürzt (PH_MAX_TEXT_LENGTH). Umlaute, Satzzeichen und Sonderzeichen fallen also weg.
Wichtig: Passt eine Adresse nicht ins Schema (falsche Teil-Anzahl, ungültige Farbe), liefert der Server kein Fehlerbild, sondern zeigt die Generator-Oberfläche an. Eine kaputte Bild-URL erscheint im <img> also als „defektes Bild", weil HTML zurückkommt statt PNG.

Maße (Dimensions)

Die Dimensions-Karte hat zwei Zahlenfelder Width und Height (je 1–3200). Ein Swap dimensions-Knopf (Pfeil-Symbol) 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 Color und Text Color, jeweils über einen Farbwähler bedienbar (Hex-Format, mit einer Reihe vordefinierter Swatches). Ein Swap colors-Knopf 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 #.

Text-Optionen (Text Options)

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

Show text on image — Hauptschalter für den Text. Aus → das Bild ist eine reine Farbfläche (entspricht notext=1).
Show resolution (width × height) — blendet die Maße-Zeile 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, was nicht erlaubt ist. Aus → nur der Custom-Text erscheint (entspricht nodim=1).
Custom Text — dein eigener Text (max. 255 Zeichen). Erlaubt sind nur Buchstaben, Zahlen und Leerzeichen; tippst du andere Zeichen, meldet das Feld „Only letters, numbers, and spaces allowed" und filtert sie heraus. Leer lassen → das Bild zeigt nur die Maße.
Text Size — Auto (an die Bildgröße angepasst), Small, Medium, Large oder Extra Large. Bei auto skaliert die Schrift mit der kleineren Bildseite; die festen Größen entsprechen 12, 24, 48 bzw. 72 Punkt.

Sind Custom-Text und Maße sichtbar, rendert das Bild zwei Zeilen: oben der Custom-Text, darunter die Maße.

Vorschau und Code-Ausgabe

Drei Karten links zeigen das Ergebnis:

Preview — die Bild-Vorschau mit einem Badge, das die aktuellen Maße nennt. Sie aktualisiert sich nicht automatisch: Nach jeder Änderung wird der Knopf Update Preview aktiv; ein Klick lädt das Bild neu (mit einem Cache-Buster, damit der Browser nicht die alte Version zeigt). Das spart Server-Requests, während du noch an den Einstellungen drehst.
Generated Code — der fertige <img>-Tag inklusive src, alt, width und height, mit Copy-Knopf.
Direct URL — die reine Bild-URL nach dem Schema oben, ebenfalls mit Copy-Knopf.

Eine API Usage-Karte fasst das URL-Format und die Parameter direkt im Tool zusammen — dieselben Angaben wie oben in diesem Manual.

PNG- und SVG-Download

Die Actions-Karte bietet zwei Downloads:

Download PNG — speichert das serverseitig erzeugte PNG als placeholder-WxH.png. 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 SVG Output-Karte 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 Source — der rohe <svg>-Quelltext (ein <rect> als Fläche, ein <text> zentriert; bei Custom-Text plus Maßen zwei <tspan>-Zeilen).
Data URI (CSS) — eine fertige CSS-Zeile background-image: url('data:image/svg+xml,…') zum direkten Einsetzen in dein Stylesheet.
IMG Tag — ein <img> mit eingebettetem SVG-Data-URI, das ganz ohne externe Datei und ohne Server-Request auskommt.

Weil SVG vektorbasiert ist, skaliert diese Variante verlustfrei. Anders als das PNG-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 — Facebook Post 1200 × 630, Twitter Post 1200 × 675, Instagram Square 1080 × 1080, Instagram Portrait 1080 × 1350, 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 4K 3200 × 1800, MacBook Pro 1512 × 982.
Common — Square Small 150 × 150, Square Medium 300 × 300, Square Large 600 × 600, Thumbnail 150 × 100, Preview 400 × 300, Hero 1200 × 400.

Caching und Betrieb — kompakt

Ausgabeformat Server: ausschließlich PNG (image/png). SVG ist eine reine Browser-Funktion.
Caching: ausgelieferte Bilder tragen Cache-Control: public, max-age=31536000 und ein Expires ein Jahr in der Zukunft — Browser und CDN dürfen sie lange vorhalten.
Maße: 1–3200 px je Seite, hart begrenzt.
Text: max. 255 Zeichen, nur Buchstaben/Ziffern/Leerzeichen; + = Leerzeichen.
Farben: je 6-stelliger Hex ohne #.
Fehlerverhalten: ungültige URL → Generator-Oberfläche statt Fehlerbild.

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.