Placeholder-Bild-Generator 2026

So funktioniert der Placeholder-Bild-Generator

Der Generator setzt aus Ihren Eingaben ein gültiges SVG-Dokument zusammen. Es besteht aus einem <rect> in voller Bildgröße als Hintergrund und einem zentrierten <text>-Element. Die Schriftgröße wird dynamisch berechnet (1/8 der kleineren Seite), damit der Text bei jeder Größe gut sichtbar bleibt.

Anschließend wird das SVG in einer Data-URL kodiert (URL-encoded UTF-8). Diese URL können Sie als src-Attribut im img-Tag verwenden oder als CSS-background-image. Alternativ lädt der Browser die Datei direkt als .svg-Download herunter.

SVG- und Data-URL-Standards

SVG 2 ist die aktuelle W3C-Empfehlung (2018), unterstützt von allen modernen Browsern. SVG basiert auf XML und ist textbasiert – das macht es leichtgewichtig, durchsuchbar und versionierbar in Git. Vektoren skalieren ohne Qualitätsverlust.

Data-URLs sind in RFC 2397 standardisiert. Sie ermöglichen es, Binärdaten direkt im URI-Schema zu transportieren – ohne separate HTTP-Anfrage. Ideal für kleine Inline-Assets bis ca. 10 KB; größere Dateien blähen das HTML auf und lohnen den separaten Request.

Anwendungsfälle

Wireframes: Platzhalter zeigen Bildflächen ohne Ablenkung durch echte Inhalte.
Prototypen: Figma-zu-Code-Tests benötigen Bilder, die noch nicht final sind.
Storybook: Komponenten-Bibliotheken brauchen reproduzierbare Mock-Bilder.
CMS-Templates: Standard-Bild für leere Beiträge, bevor Redakteure Inhalt hochladen.
Lazy-Loading-Fallback: Sehr leichter SVG-Platzhalter, bis das echte Bild im Viewport sichtbar wird.

Datenschutz: Client-Side

Die SVG-Generierung läuft komplett im Browser. Die Eingaben für Größe, Farben und Text verlassen Ihren Rechner nicht. Es gibt keine Server-Verarbeitung, keine Logs, keine Cookies, keine Drittanbieter.

Damit ist auch das Tool selbst DSGVO-konform nutzbar – es findet schlicht keine Verarbeitung personenbezogener Daten statt. Die heruntergeladenen SVGs sind reine, statische Dateien ohne externe Referenzen.

Typische Fehler

Platzhalter live lassen: Vergessene Platzhalter im Live-Betrieb wirken unprofessionell – immer Checkliste vor Deployment.
Data-URL ohne URL-Encoding: SVG enthält Zeichen wie Raute, kleiner und groesser, die in URLs codiert werden müssen, sonst funktioniert die Data-URL nicht.
Falsches MIME-Type: data:image/svg+xml ist korrekt – data:image/svg ohne +xml schlägt in einigen Browsern fehl.
Kein alt-Attribut: Auch Platzhalter brauchen alt="Platzhalterbild" für Screenreader und valides HTML.
Zu viele Platzhalter: Hunderte Platzhalter im DOM verlangsamen das Rendering – ein wiederverwendbarer CSS-Hintergrund ist effizienter.

Häufige Fragen

Platzhalter-Bilder helfen beim Layouting, bevor finale Inhalte verfügbar sind. Sie zeigen Designern und Entwicklern, wie viel Platz Bilder einnehmen und wie sich Texte um sie herum anordnen. In Wireframes, Prototypen, Storybook-Komponenten und CMS-Templates sind Platzhalter Standard. Auch für Demo-Daten und automatische Tests sind sie unverzichtbar.

Eine Data-URL ist ein vollständiges Bild als Text-String, beginnend mit data:image/svg+xml;utf8,…. Sie kann direkt im src-Attribut von <img> oder als CSS background verwendet werden, ohne dass eine separate Datei nötig ist. Ideal für inline-SVGs in Stylesheets oder als Fallback. Nachteil: Größere Bilder blähen das HTML auf.

SVG ist vektorbasiert – Platzhalter werden in jeder Größe gestochen scharf dargestellt, ohne Pixelmatsch. Die Dateigröße bleibt minimal (oft unter 1 KB), unabhängig von den Pixelmaßen. SVG enthält außerdem den Text als echten Text, nicht als Pixel – durchsuchbar und bei Bedarf nachträglich anpassbar.

Ja, alle modernen Browser unterstützen Data-URLs für Bilder seit über 15 Jahren. Auch in E-Mails (HTML-Mailings) sind SVG-Data-URLs grundsätzlich nutzbar – wobei einige Mailclients SVG zur Sicherheit blockieren. Für Mailings besser auf PNG zurückgreifen.

Im SVG selbst ist die Dateigröße typischerweise unter 500 Bytes – egal ob 100×100 oder 4000×3000 Pixel. Die Anzeige skaliert verlustfrei. Bei sehr vielen Platzhaltern auf einer Seite (>100) kann der DOM und das Rendering aber langsam werden, dann besser ein gemeinsames Hintergrundmuster nutzen.

Häufige Webformate: 16:9 (1280×720, 1920×1080) für Hero-Bilder, 4:3 (800×600) für Galerien, 1:1 (500×500) für Avatare, 3:2 (600×400) für Cards. Mobile First: oft kleinere Default-Maße wie 375×200 für Smartphone-Layouts. Bei Responsive Images mehrere Varianten erzeugen.

Ja, das generierte SVG ist Standard-XML mit <rect> und <text>. Sie können es in Inkscape, Illustrator, Figma oder einem Texteditor öffnen, Farben, Position und Schriftart ändern. Auch zur Laufzeit per JavaScript manipulierbar – nützlich für dynamische Platzhalter, die sich an die tatsächliche Containergröße anpassen.

Suchmaschinen indexieren keine Platzhalter und finden keinen sinnvollen Bildinhalt – das ist auch nicht das Ziel. Wichtig: Vor dem Live-Gang Platzhalter durch echte Bilder ersetzen und immer ein aussagekräftiges alt-Attribut setzen. Bei Lazy-Loading erst echtes Bild dann beim Scrollen laden.

Dieses Tool fokussiert auf SVG, weil das für Platzhalter ideal ist. Für andere Formate gibt es Online-Dienste wie placehold.co, picsum.photos oder unsplash.it, die echte Beispielbilder liefern. Lokal kann man SVG via Canvas zu PNG konvertieren – ein zusätzlicher Schritt, den dieses Tool bewusst nicht automatisiert, um schlank zu bleiben.