Lorem-Bildgenerator

Mockups benötigen Bilder, lange bevor die echte Fotografie existiert. Dieser Platzhalterbild-Generator zeichnet ein korrekt dimensioniertes Dummy-Bild auf ein HTML5-Canvas: Breite und Höhe festlegen, Hintergrund- und Textfarbe wählen, optional ein Label hinzufügen und das Ergebnis als PNG speichern. Nichts wird hochgeladen, und das Ganze läuft lokal im Browser.

Verwendung

1. Breite und Höhe in Pixeln eingeben. Die Felder akzeptieren 1 bis 2000 pro Seite.
2. Hintergrund- und Textfarbe mit den beiden Farbwählern auswählen.
3. Optional ein Label eintippen. Bleibt es leer, werden die Abmessungen automatisch ausgegeben.
4. Auf Generieren klicken. Das Canvas zeichnet sofort neu, und die Zeile darunter zeigt die Pixelgröße plus eine eventuelle Kontrastwarnung.
5. Mit der rechten Maustaste auf das Bild klicken und „Bild speichern unter“ wählen, um das PNG herunterzuladen.

Was Pixel für Pixel gezeichnet wird

Die Zeichenreihenfolge ist einfach und wissenswert, wenn ein Platzhalter falsch aussieht.

1. Das Canvas wird auf genau die eingegebene Breite und Höhe gesetzt.
2. Die gesamte Fläche wird über fillRect mit der Hintergrundfarbe gefüllt.
3. Die Textfarbe wird angewendet, der Ursprung auf center/center gesetzt, und die Schrift wird auf Arial, sans-serif bei max(min(width, height) / 10, 12) Pixeln gestellt.
4. Das Label wird mit fillText exakt im Mittelpunkt gezeichnet.

Weil der Ursprung die Mitte ist, wird jedes Label horizontal und vertikal zentriert, ohne manuelles Messen. Ein langes Label wird weder umgebrochen noch verkleinert, kann also auf einem kleinen Bild über den Rand hinauslaufen; halten Sie Labels kurz oder erhöhen Sie die Abmessungen.

Die Seite berechnet außerdem die WCAG-Relativluminanz beider Farben und zeigt das Kontrastverhältnis an. Verhältnisse unter 1,5 lösen einen Hinweis „sehr geringer Kontrast“ aus, unter 3 einen Hinweis „geringer Kontrast“. Ein angenehmer Platzhalter kombiniert meist einen mittelgrauen Hintergrund mit einem dunkleren grauen Label, was deutlich über 3 landet.

Praxisbeispiele

Ein 16:9-Hero-Slot. 1280 × 720 mit einem hellgrauen Hintergrund #e5e7eb und einem dunklen Label #374151 einstellen. Die Schrift wird max(720 / 10, 12) = 72px, groß genug, um den Platzhalter quer durch den Raum als solchen zu erkennen. Lassen Sie das Label leer, wird 1280 × 720 ausgegeben.

Ein quadratischer Avatar. 256 × 256 mit #cccccc auf #666666 einstellen. Die Schrift ist max(256 / 10, 12) = 25px. Das Kontrastverhältnis liegt hier nahe 2,6, sodass das Tool geringen Kontrast meldet — nützliches Feedback, wenn Sie das Label tatsächlich lesen wollen, aber harmlos für eine temporäre Box.

Ein schmales Banner. 1200 × 90 einstellen. Die kürzere Seite ist 90, die Schrift wäre also 9px, bevor der Mindestwert sie auf 12px anhebt. Das ist ein guter Grund, ein explizites Label wie AD 1200×90 einzutippen, statt sich darauf zu verlassen, dass der Abmessungstext hineinpasst.

Platzhalter versus echte Assets im Workflow

Der Sinn eines Platzhalters ist, das Layout zu entscheiden, bevor Inhalt existiert. Das Seitenverhältnis und das visuelle Gewicht eines Bildes prägen ein Raster weit stärker als sein Motiv, sodass eine korrekt dimensionierte graue Box Ihnen erlaubt, Abstände, Beschnitt und responsive Breakpoints sofort festzulegen. Wenn das finale Artwork eintrifft, tauschen Sie die Datei aus, und das Layout ist bereits erprobt.

Es gibt einen zweiten, weniger offensichtlichen Vorteil: klare Platzhalter verhindern versehentliches Ausliefern. Auffällige Stockfotos als Platzhalter ziehen Feedback zum Foto statt zum Design an und überleben hartnäckig bis in die Produktion. Eine Box, die buchstäblich 1280 × 720 ausgibt, kann nicht für fertige Arbeit gehalten werden.

Größen-Übersicht für Platzhalter

Wenn das finale Asset noch nicht existiert, macht die Übereinstimmung mit den Abmessungen des echten Objekts das Mockup nützlich. Diese Größen lohnen sich zu merken.

Slot	Abmessungen	Hinweise
Social Share / Open Graph	1200 × 630	Ungefähr 1,91:1; der sichere Bereich ist schmaler als die volle Breite
Full-HD-Hero	1920 × 1080	16:9; eine 1280 × 720-Version ist ein leichterer Ersatz
Video-Thumbnail	320 × 180	16:9; auch für Karten geeignet
Quadratischer Avatar	256 × 256	Mindestens das 2-Fache der CSS-Anzeigegröße verwenden
App-Icon-Quelle	512 × 512	Auf die einzelnen Icon-Größen herunterskalieren
Inline-Bild im Blog	800 × 450	16:9; verhindert, dass Text bedrängt wird

Abmessungen eingeben, Label leer lassen, und das Bild druckt seine eigene Größe, sodass Reviewer auf einen Blick sehen, welchen Slot sie vor sich haben.

Grenzen und Anwendungsfälle

• Nur undurchsichtige Hintergründe. Es gibt keine Alpha-Option; das Canvas wird immer gefüllt.
• Kein Textumbruch und keine automatische Verkleinerung. Lange Labels laufen über kleine Canvas-Flächen hinaus.
• PNG nur über die Oberfläche. Das Logikmodul kennt ein Formatfeld und einen Standard-Qualitätswert, aber die Oberfläche rendert immer das Canvas, und der Canvas-Export per Browser-Speichern erzeugt PNG.
• Kein Designwerkzeug. Es gibt keine Rahmen, Verläufe, Fadenkreuze, Schriften oder mehreren Textzeilen.
• Feste Schriftfamilie. Der Text verwendet Arial mit generischem Sans-Serif-Fallback.

Wo das Tool passt:

• Wireframes und Mockups, bei denen die finalen Bilder noch offen sind
• Frontend-Arbeit, die echte Pixelabmessungen braucht, um responsives Layout und Lazy Loading zu testen
• Befüllen von CMS-Vorlagen und Staging-Sites mit visuell neutralem Inhalt
• Dokumentation, die eine erforderliche Upload-Größe zeigen muss
• E-Mail-Vorlagen, in denen ein Bild mit bekannten Abmessungen den richtigen Platz reserviert

Verwandte Tools

• Lorem-Ipsum-Generator — Textbereiche mit Blindtext füllen.
• Seitenverhältnis-Rechner — Passende Breiten- und Höhenpaare berechnen.
• Farbwähler — Hintergrund- und Textfarben mit Hex-Werten finden.
• Bildkompressor — Fertige Bilder vor der Veröffentlichung verkleinern.
• Favicon-Generator — Ein Website-Icon in den richtigen Größen erstellen.