# Placeholder Service — Tipps & Tricks

> Kniffe für den Placeholder Service: URL-Schema clever nutzen, Caching und Hotlinking, PNG vs. SVG, typische Stolperfallen und die Kombination mit anderen JPKCom-Tools.

Source: https://www.jpkc.com/db/tools/ph/tips/

Zurück zur Übersicht: [Placeholder Service](https://www.jpkc.com/db/tools/ph/) · Tool live öffnen: [www.jpkc.com/tools/ph/](https://www.jpkc.com/tools/ph/)

Das [Manual](https://www.jpkc.com/db/tools/ph/manual/) erklärt jede Option, die [Beispiele](https://www.jpkc.com/db/tools/ph/examples/) 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](https://www.jpkc.com/db/tools/graphic/)** das Zuschneiden, Beschriften und Exportieren in der gleichen Zielgröße.
- **Die richtigen Hex-Werte finden:** Mit den **[Color Tools](https://www.jpkc.com/db/tools/colors/)** 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](https://www.jpkc.com/db/tools/lorem-ipsum/)** liefert ihn passend dazu.

---

Noch mehr Kontext: die [Übersicht](https://www.jpkc.com/db/tools/ph/) zum großen Bild, das [Manual](https://www.jpkc.com/db/tools/ph/manual/) für das vollständige URL-Schema und die [Beispiele](https://www.jpkc.com/db/tools/ph/examples/) für die Schritt-für-Schritt-Abläufe. Ausprobieren kannst du alles direkt im [Tool](https://www.jpkc.com/tools/ph/).