Platzhalterbild-Generator: PNG, JPG, WebP oder SVG | We.Inc
Erstelle ein Platzhalterbild in jeder Größe mit eigenen Farben und Beschriftung. Lade PNG, JPG oder WebP herunter oder kopiere eine Inline-SVG-Data-URL, die keinen Bild-Host braucht.
Platzhalterbild-Generator
Lege Breite, Höhe, Hintergrund, Textfarbe und Beschriftung fest, und der Generator zeichnet einen Platzhalter in deinem Browser. Lade ihn als PNG, JPG oder WebP herunter oder kopiere eine winzige SVG-Data-URL, die du direkt in ein img-Tag oder in CSS einfügst. So hängt dein Mockup nie von einem fremden Bilddienst ab.
Wähle das Format danach, wo der Platzhalter landet
Format
Ideal für
Hinweise
SVG-Data-URL
Prototypen und Codebeispiele
Keine Datei, keine Anfrage, scharf bei jedem Zoom
PNG
Designdateien, Uploads in ein CMS
Verlustfrei, von jedem Browser unterstützt
JPG
Stellen, die PNG ablehnen
Verlustbehaftet, keine Transparenz
WebP
Echtes Seitengewicht testen
Hier verlustbehaftet, kleine Dateien
Gehostete Platzhalterdienste sind praktisch, bis einer ausfällt oder von einem Netzwerkfilter blockiert wird, und dann geht jede graue Box in deiner Demo kaputt. Dieses Tool erzeugt das Bild stattdessen lokal: Du bekommst entweder eine echte Datei oder einen eigenständigen SVG-String, der direkt in deinem Code steckt.
Wähle eine gängige Größe aus der Liste oder gib eigene Werte für Breite und Höhe ein, bis zu 4000 Pixel pro Seite.
Wähle Hintergrund- und Textfarbe. Lass die Beschriftung leer, um die Abmessungen anzuzeigen, oder gib etwas wie Hero-Foto ein.
Die Vorschau wird als SVG in deinem Browser gezeichnet. Kopiere die Data-URL oder das fertige img-Tag für deinen Code.
Für eine echte Datei wählst du PNG, JPG oder WebP und lädst sie herunter. Das Canvas in deinem Browser kodiert sie, es wird also nichts hochgeladen.
Setze immer die Attribute width und height am img, auch bei Platzhaltern, damit das Layout nicht springt, wenn das echte Foto kommt.
Beschrifte Platzhalter mit dem, was dort hingehört, etwa Teamfoto oder Produkt vorne, damit die Verantwortlichen für den Inhalt wissen, was sie liefern müssen.
Nimm einen mittelgrauen Hintergrund mit dunklerem Text; rein weiße Boxen verschwinden vor weißen Seitenabschnitten.
Ersetze vor dem Launch jeden Platzhalter. Durchsuche deinen Code nach data:image/svg+xml, um vergessene zu finden.
Häufige Fragen
Laufen diese Bilder irgendwann ab?
Nein. Eine heruntergeladene Datei gehört dir, und eine SVG-Data-URL ist nur Text in deiner Seite. Es gibt also keinen Server dahinter, der verschwinden könnte.
Warum hat der JPG-Download keine Transparenz?
JPEG hat keinen Alphakanal. Jeder Platzhalter hier hat ohnehin einen deckenden Hintergrund, aber wähle PNG oder WebP, wenn du die Datei später bearbeitest und einen transparenten Bereich brauchst.
Kann ich die SVG-Data-URL in CSS verwenden?
Ja. Setze sie in url("...") innerhalb von background-image. Das Tool ersetzt doppelte Anführungszeichen bereits durch einfache und kodiert #, < und >, damit der String in CSS und HTML-Attributen intakt bleibt.
Welche Browser können WebP exportieren?
Den Canvas-Export nach image/png muss jeder Browser beherrschen, JPEG und WebP sind optional. Kann ein Browser kein WebP erzeugen, liefert er stillschweigend ein PNG, und der Dateiname hier zeigt das an.
Platzhalter, die helfen, statt Probleme zu verstecken
Ein guter Platzhalter hat dasselbe Seitenverhältnis wie das endgültige Bild. Wenn das Hero-Bild ein 16:9-Foto wird, arbeite im Prototyp mit 1920 mal 1080 statt mit einem Quadrat, sonst wird das freigegebene Layout später schlecht beschnitten.
Schreib die vorgesehene Größe auf die Box. Designer, Texter und Fotografen sehen dann, was sie liefern sollen, ohne den Code zu öffnen.
Data-URLs oder Dateien
Eine Data-URL packt die Bildbytes direkt in das src. Für ein kleines SVG ist das günstiger als eine Netzwerkanfrage und macht das Snippet portabel: Füge es irgendwo ein, und es wird angezeigt.
Für alles, was du in ein CMS hochlädst, in einer Designdatei ablegst oder aufbewahrst, lade lieber eine echte Datei herunter. Lange Data-URLs sind im Code-Review schwer zu lesen.
Gängige Platzhaltergrößen
Im Generator verfügbare Vorlagen
Verwendung
Breite
Höhe
Open-Graph-Karte
Hero, 16:9
Blog-Vorschaubild
Quadratischer Beitrag
Story im Hochformat
Avatar
Produktfoto, 4:5
Leaderboard-Banner
Platzhalter in einem img-Tag und in CSS
Inline-SVG-Platzhalter, ohne Anfrage
Dieselbe graue Box mit 640 mal 360 zweimal verwendet: einmal als Bildquelle, einmal als CSS-Hintergrund.
Open-Graph-Karte
Hero, 16:9
Blog-Vorschaubild
Quadratischer Beitrag
Story im Hochformat
Avatar
Produktfoto, 4:5
Leaderboard-Banner
Dein Browser konnte kein Canvas öffnen.
Das Bild konnte nicht kodiert werden.
{name} gespeichert ({n} KB).
Platzhalter erstellen
Wähle Größe, Farben und optional eine Beschriftung. Kopiere eine SVG-Data-URL oder ein img-Tag oder lade ein in deinem Browser erzeugtes PNG, JPG oder WebP herunter.