Platzhalter-Bildgenerator

Ein Platzhalterbild ist eine temporäre Füllgrafik, die genau den Platz reserviert, den später ein echtes Foto einnehmen wird, bevor das endgültige Material existiert. Statt eines Produktfotos oder Hero-Bilds zeigt es eine Volltonfarbe, einen Verlauf oder ein Muster, meist mit den eingeblendeten Pixelmaßen, damit du prüfen kannst, ob der Slot in der gewünschten Größe gerendert wird. Ein echtes Bild trägt tatsächlichen Inhalt und Bedeutung; ein Platzhalter trägt nur die Layoutstruktur. Designer und Entwickler nutzen Platzhalter bei Mockups, Prototypen und unfertigen Seiten, damit das Layout vollständig und korrekt proportioniert wirkt, während die eigentlichen Assets noch produziert werden. Wird der Platzhalter direkt in der finalen Größe erzeugt, verhindert das außerdem, dass sich Inhalte verschieben, sobald das echte Bild später geladen wird. Gib oben Breite, Höhe, Farbe und Beschriftung ein, um in Sekunden einen passend dimensionierten Platzhalter zu erstellen.

Cumulative Layout Shift, einer der Core Web Vitals von Google, misst, wie stark sich sichtbare Inhalte beim Laden einer Seite unerwartet verschieben. Eine häufige Ursache sind Bilder ohne reservierten Platz: Der Browser lässt eine Box mit der Höhe null, rendert den umliegenden Text und schiebt dann alles nach unten, sobald das Bild endlich eintrifft. Wird frühzeitig ein korrekt dimensionierter Platzhalter geladen, tritt dieses Problem nicht auf, weil der Browser die Maße der Bildbox bereits kennt, sodass der Inhalt an Ort und Stelle bleibt, wenn das echte Asset eingesetzt wird. Denselben Effekt erzielt man durch explizite width- und height-Attribute, weshalb das copy-ready HTML-Snippet hier beide Werte plus loading="lazy" enthält. Wenn du Layouts während der Entwicklung gegen final dimensionierte Platzhalter baust, spiegelt dein CLS-Wert die tatsächliche Produktionsrealität wider und nicht eine vorübergehende Lücke. Lege oben deine exakten Abmessungen fest und kopiere das generierte Markup, um die Bildbox zu fixieren.

Gängige Social- und Web-Abmessungen behält man selten korrekt im Kopf, deshalb liefert dieses Tool mehr als 28 Größen-Presets, gruppiert in Social Media, Web, Druck und Bildschirme. Häufig genutzte Größen sind ein Instagram-Quadrat mit 1080 mal 1080 Pixeln, ein YouTube-Thumbnail mit 1280 mal 720 sowie ein Open-Graph-Bild für Link-Vorschauen mit 1200 mal 630, das auf den meisten Plattformen als Standard gilt. Die Druck-Presets decken Formate wie A4 ab, und die Kategorie Bildschirme enthält Auflösungen bis hin zu 4K UHD. Ein Klick setzt die exakten Pixelwerte, wodurch Rateversuche und ein leicht daneben liegender Zuschnitt entfallen. Zusätzlich lässt sich das Seitenverhältnis sperren, sodass beim Ändern einer Seite die andere automatisch mitskaliert wird. Wähle oben ein Preset und lade den Platzhalter anschließend als PNG, JPG oder WebP herunter, oder erzeuge gleich einen ganzen Satz auf einmal.

Ja. Im Tab „Batch Generate“ kannst du mehrere Größen mit jeweils eigener Beschriftung auflisten und alle in einem Durchgang herunterladen, jeweils mit deinen aktuellen Hintergrund- und Texteinstellungen. Das geht deutlich schneller, als jedes Bild einzeln neu zu erstellen, und sorgt für ein einheitliches Erscheinungsbild im gesamten Set. Ein typischer Anwendungsfall ist die Erstellung responsiver Platzhalter für eine einzelne Komponente, etwa Varianten für Desktop, Tablet und Mobile, sodass jeder Breakpoint schon vor den eigentlichen Assets einen korrekt dimensionierten Füllplatz hat. Da das Tool jedes Bild lokal über die Canvas-API des Browsers zeichnet, läuft auch die Batch-Generierung vollständig auf deinem Gerät, ganz ohne Upload oder Registrierung, und funktioniert selbst offline weiter. Farbe, Verlauf oder Muster, Textüberlagerung und Ausgabeformat legst du einmal fest, und sie gelten für jedes Bild im Batch. Öffne oben den Tab „Batch Generate“, um in Sekunden einen kompletten responsiven Satz zu erstellen.

Beides funktioniert, und die richtige Wahl hängt von deinem Workflow ab. Der Download als PNG-, JPG- oder WebP-Datei liefert dir ein eigenständiges Asset, das in deinem Projekt liegt, offline weiterfunktioniert und nicht davon abhängt, dass ein externer Server erreichbar bleibt. Das eignet sich für fertige Mockups, Design-Übergaben und Seiten, die zuverlässig rendern müssen. Eine gehostete Platzhalter-URL ist praktisch für schnelle Prototypen, bei denen du lieber ein Bild referenzierst, statt Dateien zu verwalten; dieses Tool kann Request-URLs für drei externe Dienste erstellen, placehold.co, via.placeholder.com und dummyimage.com, sodass du einfach einen Link statt einer Datei einfügst. Der Nachteil ist, dass externe URLs eine zusätzliche Netzwerkanfrage bedeuten und nicht mehr funktionieren, falls der Dienst nicht erreichbar ist. Zu jedem Bild generiert das Tool außerdem copy-ready HTML-, JSX-, CSS- und Markdown-Snippets. Wähle oben deine Bildquelle und lade dann die Datei herunter oder kopiere die generierte URL.