Placeholder Service — Tipps & Tricks

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

Das Manual erklärt jede Option, die Beispiele zeigen die Arbeitsabläufe. Hier geht es um das, was beides voraussetzt, aber selten dabeisteht: wie du das URL-Schema effizient nutzt, wann Rasterbild und wann SVG die bessere Wahl ist und welche Eigenheiten dich sonst stolpern lassen. Die Oberfläche ist auf Englisch — die echten Karten- und Button-Namen stehen deshalb im Original.

Das URL-Schema clever nutzen

Du brauchst die Oberfläche nicht. Sobald du das Muster ?BREITExHÖHE-HINTERGRUND-TEXTFARBE/ kennst, tippst du Platzhalter-URLs direkt ins Markup oder ins Template. Das Tool ist dann nur noch zum schnellen Ausprobieren, Farben-Picken und Kontrast-Prüfen da.
Platzhalter in Schleifen erzeugen. Weil jede Größe und Farbe eine eigene URL ist, kannst du in einer Template-Schleife systematisch variieren — etwa …-Bild+1/, …-Bild+2/ für eine Galerie. Maße und Farben bleiben gleich, nur der Text zählt hoch.
Farben ohne #, gern auch kurz. Im URL-Schema stehen Hex-Werte ohne Doppelkreuz (cccccc, nicht #cccccc). Die 3-stellige Kurzform wie in CSS funktioniert ebenfalls: ?600x400-ccc-333/ ist dasselbe Bild wie ?600x400-cccccc-333333/.
Leerzeichen sind +, Bindestriche %2D. Im Custom-Text wird + zum Leerzeichen — „Hello World" schreibst du als Hello+World. Weil der Bindestrich die Teile der Adresse trennt, kodierst du ihn als %2D; ein echtes Pluszeichen als %2B. Kopierst du die URL aus dem Tool, ist das schon erledigt.
Optionen frei kombinieren. Alles nach dem Trailing-Slash ist optional und beliebig kombinierbar, etwa /&format=webp&scale=2&size=large. Die Reihenfolge spielt keine Rolle.

Caching und Hotlinking

Bilder werden ein Jahr lang gecacht. Der Server liefert Cache-Control: public, max-age=31536000, immutable. Das ist ideal für Performance — dieselbe Platzhalter-URL lädt beim zweiten Mal aus dem Cache.
Eine URL, ein Bild. Weil die URL das Bild vollständig beschreibt, ändert sich ein Platzhalter nur, wenn sich auch seine URL ändert. Willst du ein anderes Bild, änderst du einfach einen Parameter — dann ist es garantiert ein „neues" Bild, und der Cache hält nichts Altes fest.
Viele Platzhalter auf einer Seite sind kein Problem. Pro IP-Adresse erzeugt der Server bis zu 300 Bilder pro Minute; darüber antwortet er mit HTTP 429 und nennt per Retry-After, wann es weitergeht. Diese Grenze erreichst du praktisch nur mit Skripten, die massenhaft verschiedene Bilder abrufen — Aufrufe aus dem Browser-Cache zählen nicht.
Hotlinking ist hier gewollt — aber bedenke die Abhängigkeit. Bindest du Platzhalter live von jpkc.com ein, hängt deine Seite an diesem Dienst. Für lokale Mockups okay; für etwas Dauerhaftes lieber das Bild oder SVG herunterladen und mitliefern, statt dauerhaft fremd zu verlinken.

PNG oder SVG — wann was?

Rasterbild (Server, URL-Schema) ist die richtige Wahl, wenn du eine echte Bild-URL brauchst: für <img src>, für Tests, für alles, was eine Adresse erwartet. PNG ist der Default und wird als Palettenbild gespeichert, was flächige Platzhalter klein hält; WebP oder JPEG (&format=webp, &format=jpg, jeweils Qualität 90) nimmst du, wenn dein Projekt ein bestimmtes Format erwartet oder du die Auslieferung genau dieses Formats testen willst. Welche Formate verfügbar sind, zeigt die Karte Image file.
Retina geht auch als Rasterbild. Mit Pixel density 2× oder 3× (&scale=2, &scale=3) bekommst du ein entsprechend größeres Bild, und der HTML-Tag liefert das passende srcset gleich mit.
SVG (Browser, Karte SVG (no server needed)) ist die richtige Wahl für CSS-Hintergründe und alles, was verlustfrei skalieren soll. Der Data-URI in background-image löst keinen Netzwerk-Request aus und macht dich unabhängig von jpkc.com.
Merke: Das URL-Schema liefert PNG, WebP oder JPEG — aber kein SVG. SVG entsteht ausschließlich im Browser; es gibt keine SVG-URL, die der Server ausspielt. Text und Zeilenumbruch sind dafür in beiden Varianten identisch.

Stolperfallen aus der Praxis

Ein Platzhalter lädt nicht? Ruf die URL direkt auf. Eine ungültige Adresse beantwortet der Server mit HTTP 400 und einem kurzen Klartext, der mit dem Grund beginnt, etwa Invalid placeholder URL: colours must be 3 or 6 hex digits, e.g. 3c4955 or fff, gefolgt vom erwarteten Format samt Beispiel. Im <img> siehst du nur ein defektes Bild — im Browser-Tab steht der Grund.
Ein Bindestrich im Text bricht die URL. Ein unkodierter - im Text erzeugt einen Teil zu viel, die Antwort ist 400 mit dem Hinweis expected 3 or 4 parts. Abhilfe: %2D — oder die URL aus dem Tool kopieren.
/, & und # kürzen den Text still. Anders als der Bindestrich lösen sie keinen Fehler aus: Der Server bekommt nur den Text bis zu diesem Zeichen und liefert ein Bild mit dem verkürzten Text. In einer selbst gebauten URL schreibst du sie als %2F, %26 und %23 — die URL aus dem Tool kodiert sie schon.
Umlaute gehen, typografische Zeichen nicht. Der Text darf alles aus druckbarem Latin-1 enthalten: Umlaute, ß, Akzente, Satzzeichen, & (in der URL als %26), §. Typografische Anführungszeichen („…"), Gedankenstriche (–, —), das Euro-Zeichen und Emoji kennt die Schrift nicht — sie fallen weg. Die Oberfläche zeigt dir unter Custom text, welche Zeichen sie weglässt. Schreib „EUR" statt „€" und gerade Anführungszeichen statt typografischer.
Die Maße-Zeile lässt sich nicht immer abschalten. Also show the size (bzw. nodim=1) wirkt nur, wenn ein Custom text gesetzt ist. Ohne eigenen Text zeigt das Bild die Maße — sonst stünde gar nichts drauf. Der Schalter ist dann bewusst deaktiviert, und auch &nodim=1 in der URL bleibt ohne Wirkung.
Text size ist eine Obergrenze. Ein Preset wie xlarge legt die größte Schrift fest, nicht eine feste. Ein langer Text wird umbrochen und so lange verkleinert, bis er in 90 % des Bildes passt — bei sehr viel Text in einem kleinen Bild bis hinunter auf 5 px. Kürz den Text, wenn er lesbar bleiben soll.
Maße und Pixeldichte teilen sich die Grenze. Werte unter 1 oder über 3200 px werden zurechtgestutzt. Mit scale gilt die Grenze für das fertige Bild: 2000x1000 mit &scale=2 wäre 4000 Pixel breit und wird mit 400 abgelehnt. Die Oberfläche hält dich davon nicht ab: Die Preview lädt immer die 1×-Variante und zeigt weiter ein Bild, aber Image URL, der Download und die hochauflösende Variante im srcset laufen dann auf diesen Fehler. Brauchst du mehr als 3200 px Kantenlänge, geht das mit diesem Dienst nicht.
Achte auf die Kontrastanzeige. Die Karte Colors rechnet das Kontrastverhältnis zwischen Text und Hintergrund aus und warnt unter 4,5:1. Für Platzhalter, die in Präsentationen oder auf Beamern lesbar bleiben sollen, lohnt sich ein Blick darauf.

Einsatz in HTML und CSS

Immer width/height setzen. Der vom Tool erzeugte <img>-Tag bringt beide Attribute mit — auch bei 2× oder 3×, dann in CSS-Pixeln. Behalt sie bei — sie reservieren den Platz und verhindern Layout-Sprünge beim Laden (gut für Core Web Vitals).
srcset übernehmen. Bei einer Pixeldichte über 1× enthält der HTML-Code ein srcset mit der einfachen und der hochauflösenden Variante. So testest du schon im Mockup, ob dein Layout mit responsiven Bildern richtig umgeht.
Responsive Platzhalter. Setz das Bild auf max-width: 100%; height: auto, dann passt sich ein großzügig dimensionierter Platzhalter dem Container an. Für gestochen scharfe, frei skalierende Flächen nimmst du gleich die SVG-Data-URI.
Als sinnvoller alt-Text. Das Tool füllt alt mit deinem Custom-Text oder „W×H placeholder". Im echten Mockup lohnt es sich, den alt durch eine Beschreibung des späteren Bildes zu ersetzen — dann ist die Barrierefreiheit schon vorbereitet, bevor das echte Bild da ist.

Mit anderen JPKCom-Tools kombinieren

Aus Platzhalter wird echte Grafik: Wenn der Dummy zum fertigen Bild werden soll, übernimmt der Graphic Editor das Zuschneiden, Beschriften und Exportieren in der gleichen Zielgröße.
Die richtigen Hex-Werte finden: Mit den Color Tools bestimmst du Hintergrund- und Textfarbe, bevor du sie hier — ohne # — einsetzt. Den Kontrast zeigt dir der Placeholder Service direkt in der Karte Colors an.
Blindtext fürs gleiche Mockup: Wo Platzhalter-Bilder sitzen, fehlt meist auch der Text. Lorem Ipsum liefert ihn passend dazu.

Noch mehr Kontext: die Übersicht zum großen Bild, das Manual für das vollständige URL-Schema und die Beispiele für die Schritt-für-Schritt-Abläufe. Ausprobieren kannst du alles direkt im Tool.