BrowserTools
Startseite / Bilder / Platzhalterbild-Generator, erstelle Dummy-Bilder im Browser

Platzhalterbild-Generator, erstelle Dummy-Bilder im Browser

Erzeuge Platzhalterbilder vollständig in deinem Browser. Lege Größe, Farben, Text und Format fest (PNG, JPEG, WebP oder SVG) und lade sie herunter oder kopiere eine Data-URI.

Betreut von BrowserTools

Platzhalterbild-Generator, erstelle Dummy-Bilder im Browser wird geladen… Wenn nichts passiert, aktiviere JavaScript.

Ein Platzhalterbild ist eine vorläufige Ersatzgrafik, die beim Gestalten oder Entwickeln einer Seite verwendet wird, bevor die echten Fotos und Illustrationen fertig sind. Dieser Generator erstellt sie sofort und vollständig in deinem Browser: Wähle Breite und Höhe (von 1 bis 4000 Pixel, mit Ein-Klick-Voreinstellungen für gängige Größen wie 1920×1080 oder 1200×630), lege Hintergrund- und Textfarbe fest, tippe optional eine eigene Beschriftung ein und lade das Ergebnis als PNG, JPEG, WebP oder SVG herunter. Standardmäßig ist das Bild mit seinen eigenen Abmessungen beschriftet, die Konvention, auf die sich Entwickler verlassen, um Layout-Plätze auf einen Blick zu erkennen.

Häufig gestellte Fragen

Wofür wird ein Platzhalterbild verwendet?
Platzhalterbilder reservieren Platz in einem Layout, bevor das endgültige Bildmaterial existiert. Designer setzen sie in Wireframes und Mockups ein, Entwickler testen damit Bildplätze, responsives Verhalten und CMS-Vorlagen, und Tester nutzen Dummys in exakter Größe, um Zuschneide- und Seitenverhältnislogik zu prüfen. Die Beschriftung des Bildes mit seinen eigenen Abmessungen macht jeden Platz auf einen Blick identifizierbar.
Kontaktiert dieses Tool einen Platzhalterdienst wie placehold.co?
Nein. Alles wird lokal in deinem Browser mit der Canvas-API oder als Inline-SVG-Markup erzeugt. Es gibt keine Netzwerkanfragen, keinen externen Dienst, keine Ratenbegrenzungen und keine Abhängigkeit, die ausfallen kann. Es funktioniert offline und sieht oder speichert niemals etwas von dem, was du erzeugst.
Welches Ausgabeformat sollte ich wählen?
SVG ist für Platzhalter meist am besten: Es ist winzig, skaliert perfekt auf jede Auflösung und lässt sich als Code einfügen. Wähle PNG, wenn ein Tool in deiner Pipeline eine Rasterdatei verlangt, JPEG, wenn du bei großen, fotoartigen Größen das kleinste Raster willst, und WebP für moderne Pipelines, die es unterstützen. Alle vier werden lokal erzeugt.
Was ist eine Data-URI und wann sollte ich sie verwenden?
Eine Data-URI bettet das gesamte Bild direkt in das HTML oder CSS ein, als Base64-Zeichenkette (oder URL-codiertes SVG), zum Beispiel src="data:image/png;base64,...". Sie ist perfekt für schnelle Prototypen und Ein-Datei-Demos, weil kein separates Asset gehostet werden muss. Vermeide riesige Data-URIs in der Produktion, da sie nicht separat gecacht werden können und das Dokument aufblähen.
Warum warnt mich das Tool, dass meine Data-URI groß ist?
Base64-Codierung macht Binärdaten etwa 33 % größer als die Datei selbst, und die gesamte Zeichenkette liegt in deinem HTML oder CSS. Ein PNG mit 4000×4000 kann leicht eine URI von mehreren Megabyte erzeugen, die Editoren und Seitenladezeiten ausbremst. Die Warnung erscheint, damit du zu einer heruntergeladenen Datei oder einem SVG wechseln kannst, das bei einfarbigen Bildern dramatisch kleiner ist.
Was ist die maximale Bildgröße, die ich erzeugen kann?
Breite und Höhe akzeptieren jeweils Werte von 1 bis 4000 Pixel, was alles abdeckt, vom 1×1-Tracking-Pixel-Ersatz bis zu Bannern in 4K und darüber. Die Grenze hält den Canvas-Speicherverbrauch auf typischen Geräten vernünftig; Browser scheitern bei riesigen Canvas-Flächen stillschweigend, deshalb bleibt das Tool sicher unter diesen Schwellen.
Kann ich eigenen Text auf den Platzhalter setzen?
Ja. Standardmäßig zeigt das Bild seine eigenen Abmessungen, etwa 800×600, die während der Entwicklung nützlichste Beschriftung. Tippe etwas Beliebiges in das Textfeld, um sie zu ersetzen, zum Beispiel "Hero-Bild", "Demnächst" oder einen Kundennamen. Lässt du das Feld leer, wird die automatische Größenbeschriftung wiederhergestellt.
Wie wird die Schriftgröße im Auto-Modus gewählt?
Der Auto-Modus skaliert die Beschriftung auf etwa ein Fünftel der kürzeren Bildseite und verkleinert sie weiter, falls der Text die Breite sprengen würde. So bleiben kurze Beschriftungen kräftig und lesbar, während langer eigener Text auch in schmale Banner passt. Wechsle in den manuellen Modus, um selbst eine exakte Pixelgröße festzulegen.
Warum ist SVG für Platzhalter oft besser als PNG?
Ein SVG-Platzhalter besteht aus nur wenigen Zeilen Markup: einem Rechteck und einem Textelement. Er wiegt typischerweise unter einem halben Kilobyte, unabhängig von den Abmessungen, bleibt auf jeder Bildschirmdichte gestochen scharf und lässt sich später von Hand bearbeiten. PNG und andere Rasterformate wachsen mit der Pixelzahl und werden beim Hochskalieren unscharf.
Darf ich die erzeugten Bilder kommerziell nutzen?
Ja. Die Ausgabe ist ein schlichtes farbiges Rechteck mit Text, den du selbst konfiguriert hast; sie enthält keinerlei Werke Dritter, keine von externen Diensten eingebetteten Schriften und kein lizenziertes Material. Du kannst die erzeugten Dateien in kommerziellen Mockups, Produkten, Dokumentationen oder überall sonst ohne Namensnennung verwenden.

Über Platzhalterbild-Generator, erstelle Dummy-Bilder im Browser

Die meisten Platzhalterdienste funktionieren, indem sie ein Bild von einem entfernten Server anfordern, was bedeutet, dass jedes geöffnete Mockup Netzwerkanfragen auslöst, offline nicht mehr funktioniert, die lokale Entwicklung verlangsamt und die URLs deiner unfertigen Arbeit an Dritte weitergibt. Dieses Tool erledigt dieselbe Aufgabe ganz ohne Netzwerk: Das Bild wird direkt auf deinem Gerät auf ein Canvas gezeichnet (oder als SVG-Markup zusammengesetzt). Nichts wird irgendwo angefragt, hochgeladen oder protokolliert, Vorschauen erscheinen sofort, und der Generator funktioniert auch im Flugzeug, hinter einer strengen Firmen-Firewall oder in einer Offline-Demoumgebung weiter.

Über das Herunterladen einer Datei hinaus kannst du das Bild als Data-URI kopieren und direkt in ein src-Attribut oder ein CSS-background-image einfügen, wodurch schnelle Prototypen völlig eigenständig bleiben, ohne Asset-Dateien zu verwalten. Das Tool warnt dich, wenn eine Data-URI groß wird, denn Base64 bläht die Dateigröße um etwa ein Drittel auf, und sehr große URIs blähen HTML und Stylesheets auf. Wenn du die SVG-Ausgabe wählst, kannst du auch den rohen SVG-Code selbst kopieren, meist die kleinste und schärfste Option, da er auf jede Auflösung skaliert und oft nur wenige hundert Bytes wiegt.

Typische Einsatzzwecke sind Wireframes und Design-Mockups, CMS-Seed-Daten, Unit- und Layout-Tests, die ein Bild in exakter Größe benötigen, Stellvertreter für Open-Graph- und Social-Karten (die 1200×630-Voreinstellung), Video-Vorschaubilder (1920×1080) und E-Commerce-Raster, die auf Produktfotografie warten. Die Schriftgröße wird automatisch berechnet, damit die Beschriftung bei allen Abmessungen lesbar bleibt, oder du legst sie manuell für einen bestimmten Look fest. Wenn die echten Assets eintreffen, helfen dir der Bildgrößen-Änderer und der Favicon-Generator dieser Website bei der Vorbereitung, und der Verlaufsgenerator kann dekorativere vorläufige Hintergründe erzeugen.

Lorem Ipsum für Bilder: Wie Platzhalterbilder zum Webstandard wurden

Lange vor dem Web markierten Printdesigner unfertige Layouts mit den Buchstaben FPO, kurz für "for position only", quer über vorläufiges Bildmaterial gestempelt, damit niemand versehentlich einen Entwurf an die Druckpresse schickte. Text erhielt dieselbe Behandlung durch Greeking und die berühmte Lorem-Ipsum-Passage, verwürfeltes Latein, das seit den 1960er Jahren als Fülltext dient, als Schriftsetzer es aus einem Text Ciceros aus dem 1. Jahrhundert populär machten. Als das Design auf Bildschirme wechselte, zog die graue FPO-Box mit um und lernte einfach, sich selbst zu beschreiben, mit ihren Pixelmaßen quer über die Mitte gedruckt.

Das Web machte aus Platzhaltern einen Dienst. Anfang der 2010er erschien eine Welle winziger Ein-Zweck-Websites, bei denen die URL selbst die API war: placehold.it lieferte graue Boxen in jeder Größe, die man in die Adresszeile tippte, placekitten.com gab Katzenfotos zurück, zugeschnitten auf die gewünschten Maße, und lorempixel, placebear, fillmurray (Bilder von Bill Murray) und placecage (Nicolas Cage) folgten demselben Rezept. Kätzchen- und Promi-Platzhalter wurden zum Running Gag in der Agenturarbeit, und mehr als ein Team hat eine Geschichte darüber, wie ein Katzenfoto oder Nicolas Cage versehentlich bis zur Kundendemo oder in ein Produktionsrelease überlebte.

Diese Bequemlichkeit hatte versteckte Kosten: Jeder entfernte Platzhalter ist eine Netzwerkabhängigkeit. Als der beliebte Dienst lorempixel unzuverlässig wurde und placehold.it die Domain wechselte, füllten sich unzählige Mockups, Tutorials und sogar ausgelieferte Codebasen mit kaputten Bildern, eine kleine Erinnerung daran, dass hotgelinkte Assets verrotten. Die moderne Praxis ist zu eigenständigen Platzhaltern zurückgeschwenkt, winzigen Inline-SVGs, Base64-Data-URIs und lokal erzeugten Dateien, genau der Ansatz dieses Tools: die klassische graue Box mit Größenbeschriftung, nur ohne den Server.

Verwandte Tools

Bildgröße ändern, Fotos online skalieren

Ändere die Bildgröße nach Breite, Höhe oder Prozentsatz, sperre das Seitenverhältnis und wähle einen Anpassungsmodus. 100 % in deinem Browser, ohne Uploads.

Favicon-Generator

Erzeuge Favicon-PNGs in allen Standardgrößen und eine .ico-Datei mit mehreren Auflösungen aus einem beliebigen Bild, vollständig in deinem Browser.

CSS-Verlaufsgenerator

Erstelle lineare, radiale und konische CSS-Verläufe mit Live-Vorschau und kopierfertigem Code.

SVG-Optimierer

Bereinige und verkleinere SVG-Dateien, indem du Editor-Metadaten, Kommentare und überflüssige Leerzeichen entfernst, lokal in deinem Browser.
Unterstützen