Platzhalterbild-Generator (Beispielbilder erstellen)
Erzeugen Sie direkt im Browser ein Beispielbild, indem Sie Breite, Höhe, Hintergrundfarbe und Textfarbe festlegen, und laden Sie es als PNG herunter. Das Bild wird niemals an einen Server gesendet.
Gängige Größen für Beispielbilder
| Größe | Typische Verwendung |
|---|---|
| 300×200 | Platzhalter für ein kleines Banner oder einen Werbeplatz |
| 800×600 | Bild innerhalb eines Blogartikels oder vorübergehendes Wireframe-Bild |
| 1200×630 | OGP-Bild für Facebook- und X-(Twitter-)Share-Karten |
| 1080×1080 | Quadratischer Beitrag für Instagram und andere soziale Netzwerke |
| 1920×1080 | Full-HD-Hauptbild oder Hintergrund für Diashows |
| 640×360 | 16:9-Video-Vorschaubild oder Vorschaubild für Karten-UIs |
Was ein Platzhalterbild ist
Ein Platzhalterbild ist ein Ersatzstück, das eine Stelle freihält, solange die eigentliche Aufnahme oder Zeichnung noch aussteht. Es ist nichts weiter als ein einfarbiges Rechteck der genannten Größe, meist mit eben dieser Größe darübergeschrieben, und dient dem Prüfen eines Layouts oder dem Bau einer Attrappe. Gerade weil sein Inhalt nichts bedeutet, bleibt der Blick auf Anordnung und Abstände gerichtet statt auf das Bild.
Geben Sie diesem Werkzeug Breite, Höhe, Hintergrund- und Schriftfarbe, so zeichnet es sogleich eine Vorschau, die sich als PNG sichern lässt. Der überlagerte Text ist freigestellt: Lässt man ihn leer, so tragen sich die Werte „Breite × Höhe“ von selbst ein, sodass sich mehrere Größen nebeneinander auf einen Blick unterscheiden lassen. Farben lassen sich über die Auswahl oder als hexadezimale Codes eingeben und treffen so die Palette eines Entwurfs genau. Alles entsteht im Browser; das Bild wird nie an einen Server gesendet.
So fertigen Sie ein Platzhalterbild
- Maße festlegen Tragen Sie Breite und Höhe in Bildpunkten ein. Die Vorgaben 300×200, 800×600, 1200×630 (OGP) und 1080×1080 füllen beide Felder auf einmal.
- Farben wählen Setzen Sie Hintergrund- und Schriftfarbe. Neben der Auswahl dürfen Sie einen hexadezimalen Farbcode unmittelbar eintippen.
- Bei Bedarf Text hinzufügen Der überlagerte Text ist freigestellt. Bleibt er leer, erscheint „Breite × Höhe“ von selbst, was oft schon genügt.
- Die Vorschau prüfen Sie wird bei jeder Änderung neu gezeichnet. Sehen Sie hier nach, dass der Text vor dem Hintergrund nicht untergeht.
- Das PNG herunterladen „PNG herunterladen“ sichert es auf Ihrem Rechner. Die Datei entsteht ganz auf Ihrem Gerät und geht nirgendwo anders hin.
Tipps für die Nutzung
- Mit der Voreinstellung "1200×630 (OGP)" erhalten Sie sofort die Standardgröße, die in Facebook- und X-(Twitter-)Share-Karten ohne Beschneidung angezeigt wird.
- Lassen Sie den Überlagerungstext leer, werden automatisch die Zahlen "Breite×Höhe" angezeigt, sodass sich Größen beim Vergleich mehrerer Wireframes auf einen Blick unterscheiden lassen.
- Hintergrund- und Textfarbe lassen sich per Farbwähler auswählen oder direkt als Hexadezimalcode eingeben, sodass sie exakt zur Palette Ihres Design-Mockups passen.
- Das erzeugte Bild wird nur auf Ihr lokales Gerät heruntergeladen — es wird niemals an den Server dieser Website gesendet oder dort gespeichert.
Wofür sich Platzhalterbilder eignen
Drahtgerüste und Attrappen bauen
Noch ehe die Aufnahmen feststehen, lässt sich die Layoutarbeit voranbringen, indem man Kästen genau der vorgesehenen Größe einsetzt. Da die Größe im Bild steht, verwechselt man zwei davon nicht.
Den Rahmen für ein OGP-Bild sichern
1200×630 ist die Größe, die in einer Teilen-Karte ungeschnitten erscheint. Es hält die Stelle, bis das wirkliche Bild fertig ist.
Eine Bild-Uploadfunktion erproben
Da sich ein Bild beliebiger Maße rasch herstellen lässt, eignet es sich, um die Schranken eines Formulars und das Verhalten der Darstellung zu prüfen.
Ein Farbschema abtasten
Stellen Sie mehrere nebeneinander und wechseln Sie Hintergrund- und Schriftfarbe, so sehen Sie rasch, ob der Helligkeitsunterschied den Text lesbar lässt.
Wenn Sie an einem wirklichen Bild arbeiten wollen
Um die Maße eines vorhandenen Bildes zu ändern, nehmen Sie die Bildgrößenänderung; um nur den gewünschten Teil herauszuschneiden, den Bildzuschnitt.
Begriffe rund um Platzhalterbilder
- Platzhalter
- Ein stellvertretendes Element, das einen Ort freihält, bis das dorthin Gehörende bereitsteht. Neben Bildern dient Lorem Ipsum demselben Zweck für Text.
- Attrappe (Mockup)
- Ein unbewegtes Muster, das zeigen soll, wie etwas fertig aussehen wird. Es erlaubt, über Anordnung und Abstände zu urteilen, ehe das wirkliche Material vorliegt.
- OGP-Bild
- Das Bild, das als Karte erscheint, wenn eine Seite in sozialen Netzen geteilt wird. 1200×630 ist die verbreitete Größe; wer sie einhält, riskiert kaum ein Beschneiden an den Rändern.
- Hexadezimaler Farbcode
- Eine Schreibweise für Farben in der Form #RRGGBB, die die Stärke von Rot, Grün und Blau in je zwei Stellen von 00 bis FF angibt.
- Bildpunkt (Pixel)
- Die kleinste Einheit, aus der ein Bild aufgebaut ist. Breite und Höhe werden hier in dieser Einheit angegeben.
- PNG
- Ein verlustfrei komprimiertes Bildformat. Ein Bild aus nichts als einem einfarbigen Grund und etwas Text passt gut dazu, und die Datei bleibt klein.
Häufig gestellte Fragen
Übrigens – die Kultur der Platzhalterbilder
Im Webdesign ist es seit Langem üblich, Platzhalterbilder als vorübergehenden Ersatz zu verwenden, solange die endgültigen Fotos oder Illustrationen noch nicht fertig sind. Das folgt derselben Idee wie der Blindtext "Lorem Ipsum", der in der Druckbranche für unfertige Texte verwendet wird, nur eben auf Bilder angewendet.
Ein 2014 gestarteter Dienst namens "Lorem Picsum" wurde als weitverbreiteter Platzhalterbild-Dienst bekannt, der zufällig echte Fotografien liefert. Da er allein durch Angabe von Breite und Höhe in der URL ein Foto zurückgibt, wurde er in zahllosen Design-Mockups und Tutorials eingesetzt. Die Abhängigkeit von einem externen Dienst ist jedoch für Offline-Arbeiten oder Projekte mit hohen Vertraulichkeitsanforderungen nicht immer praktisch.
Dieses Tool verfolgt einen anderen Ansatz: Es erzeugt sofort ein einfarbiges Bild mit einer Textbeschriftung, vollständig innerhalb des