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 PNG 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 und Farben-Picken 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 #. Im URL-Schema stehen Hex-Werte ohne Doppelkreuz (cccccc, nicht #cccccc) und müssen genau sechs Stellen haben. Drei-stellige Kurz-Hex (ccc) funktionieren hier nicht.
Leerzeichen sind +. Im Custom-Text wird + zum Leerzeichen. Willst du „Hello World", schreibst du Hello+World.

Caching und Hotlinking

Bilder werden ein Jahr lang gecacht. Der Server liefert Cache-Control: public, max-age=31536000 und ein weit in der Zukunft liegendes Expires. Das ist ideal für Performance — dieselbe Platzhalter-URL lädt beim zweiten Mal aus dem Cache.
Genau dieses Caching kann dich austricksen. Änderst du ein Bild bei identischer URL, hält der Browser womöglich die alte Version. Die Oberfläche umgeht das mit einem Cache-Buster beim Update Preview — im echten Einsatz änderst du einfach einen Parameter (und damit die URL), dann ist es garantiert ein „neues" Bild.
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 PNG oder SVG herunterladen und mitliefern, statt dauerhaft fremd zu verlinken.

PNG oder SVG — wann was?

PNG (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. Es ist ein Pixelbild in genau den angeforderten Maßen.
SVG (Browser, SVG Output) 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. Für Retina/HiDPI ist SVG ohnehin überlegen, weil es bei jeder Auflösung scharf bleibt.
Merke: Das URL-Schema liefert nur PNG. SVG entsteht ausschließlich im Browser über die SVG-Output-Karte — es gibt keine SVG-URL, die der Server ausspielt.

Stolperfallen aus der Praxis

Eine kaputte URL liefert HTML, kein Fehlerbild. Passt eine Adresse nicht ins Schema (falsche Teil-Anzahl, ungültige Farbe, fehlender x-Trenner), zeigt der Server die Generator-Oberfläche statt eines Bildes. In einem <img> erscheint das als „defektes Bild". Prüf bei einem nicht ladenden Platzhalter zuerst die URL-Struktur.
Umlaute und Sonderzeichen verschwinden. Der Custom-Text erlaubt serverseitig nur Buchstaben, Zahlen und Leerzeichen. „Café Müller!" wird zu „Caf Mller" — Umlaute, &, Satzzeichen werden entfernt. Für Mockups mit Umlauten ist die SVG-Variante zuverlässiger, weil sie den Text als echtes Markup führt.
Die Maße-Zeile lässt sich nicht immer abschalten. Show resolution (bzw. nodim=1) wirkt nur, wenn ein Custom-Text gesetzt ist. Ohne eigenen Text muss das Bild die Maße zeigen — sonst stünde gar nichts drauf. Der Schalter ist dann bewusst deaktiviert.
Maße werden hart begrenzt. Werte unter 1 oder über 3200 px werden zurechtgestutzt. Brauchst du etwas Größeres als 3200 px Kantenlänge, geht das mit diesem Dienst nicht.
Die Vorschau ist absichtlich manuell. Nach jeder Änderung musst du Update Preview klicken, damit die Bild-Vorschau neu lädt — URL und Code dagegen aktualisieren sich sofort. Das ist kein Bug, sondern spart Server-Requests, während du noch an den Reglern drehst.

Einsatz in HTML und CSS

Immer width/height setzen. Der vom Tool erzeugte <img>-Tag bringt beide Attribute mit. Behalt sie bei — sie reservieren den Platz und verhindern Layout-Sprünge beim Laden (gut für Core Web Vitals).
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 „WxH 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 (samt Kontrast-Check), bevor du sie hier — ohne # — einsetzt.
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.