Ein Platzhalterbild erstellen
- Dokumentation
- API
Wie verwendet man es?
Geben Sie die gewünschte Bildgröße direkt in der Aufruf-URL an. Sie können die erzeugten Bilder gemäß dem Beispiel in Ihrem HTML oder CSS verwenden
Der erste Parameter definiert die Breite des Bildes
Der zweite Parameter definiert die Höhe des Bildes. Dieser ist optional. Wenn er nicht definiert ist, entspricht die Höhe der Breite des Bildes (das Bild ist quadratisch).
<img src="https://cdrn.fr/60" alt="placeholder image">
<img src="https://cdrn.fr/120x100" alt="placeholder image">
<img src="https://cdrn.fr/80x100" alt="placeholder image">
Beispiele
Quadratische Bilder
<img src="https://cdrn.fr/32" alt="placeholder image">
<img src="https://cdrn.fr/64" alt="placeholder image">
<img src="https://cdrn.fr/96" alt="placeholder image">
<img src="https://cdrn.fr/128" alt="placeholder image">
Bilder mit spezifischen Höhen
<img src="https://cdrn.fr/100x60" alt="placeholder image">
<img src="https://cdrn.fr/200x120" alt="placeholder image">
<img src="https://cdrn.fr/75x120" alt="placeholder image">
<img src="https://cdrn.fr/150x240" alt="placeholder image">
Häufig gestellte Fragen
In welchem Format wird das generierte Bild ausgeliefert?
Die Bilder werden im für das Web optimierten JPEG-Format zurückgegeben. Das Gewicht bleibt selbst bei großen Abmessungen minimal, was das Tool für HTML- und CSS-Mockups mit vielen Platzhaltern geeignet macht. Der visuelle Inhalt ist ein Verlauf oder eine neutrale Füllfarbe, niemals ein echtes urheberrechtlich geschütztes Foto.
Gibt es eine Größenbeschränkung für die erzeugten Bilder?
Vernünftige Abmessungen reichen von 16 px bis etwa 2000 px pro Seite. Darüber hinaus bleibt das Rendern möglich, aber die Erzeugung wird langsam und nicht wirklich sinnvoll, da die Platzhalter für bescheidenere Mockups gedacht sind. Für ein Hero-Visual von 1920 x 1080 reagiert das Tool problemlos.
Ist die URL stabil und in der Produktion nutzbar?
Die URL /image/<largeur>/<hauteur> ist deterministisch, Sie können sie unverändert in Ihre <img>-Tags einfügen, ohne sie vorher herunterzuladen. Für eine Produktionsumgebung bevorzugen Sie es, die endgültigen Bilder selbst zu hosten: Dieser Service ist in erster Linie für Mockups, Storybooks und Integrationstests gedacht.
Was ist der Unterschied zu Lorem Picsum oder Placeholder.com?
Lorem Picsum gibt echte zufällige Fotos zurück, die einem Mockup Realismus verleihen. Placeholder.com liefert Bilder mit einem Größen-Label. Der cdrn-Generator liefert einfache und schnelle Platzhalter, ohne externen Aufruf oder Drittanbieter-Abhängigkeit in Ihrem Frontend-Projekt.
Kann man die Farbe des Platzhalters wählen?
In dieser Version nicht. Die Bilder werden mit einem vordefinierten neutralen Rendering generiert. Wenn Sie die Hintergrundfarbe genau steuern müssen, um ein Layout mit Kontrasten zu validieren, erstellen Sie eine statische Datei von wenigen Kilobyte im gewünschten Farbton oder verwenden Sie direkt ein CSS-div mit background-color.
Welcher Nutzen für einen Frontend-Entwickler?
Schnell ein Layout testen, ohne ein echtes Bild liefern zu müssen, die Responsivität eines Rasters durch Einfügen mehrerer Verhältnisse validieren, ein Storybook oder eine Figma-zu-HTML-Vorschau speisen. Für Marketer und Designer dient das Tool dazu, hochauflösende Wireframes zu skizzieren, ohne auf lizenzierte Fotos angewiesen zu sein.
dieses Tool stellt keine Ausführungs-API bereit