Platzhalterbild-Generator

So wird es benutzt 3 Schritte
  1. Geben Sie Breite in Pixeln und Höhe in Pixeln ein oder wählen Sie eine gängige Größe.
  2. Legen Sie Hintergrundfarbe, Textfarbe und ein optionales Beschriftung fest.
  3. Drücken Sie Bild erzeugen und laden Sie das Bild herunter.

Das Bild wird in Ihrem Browser auf ein Canvas gezeichnet – das funktioniert offline und kontaktiert keinen externen Platzhalterdienst. Damit erfährt auch kein Dritter, auf welchen Seiten Ihre Entwürfe liegen. Die Beschriftung skaliert mit der kürzeren Bildseite und bleibt so in jedem Seitenverhältnis lesbar.

So funktioniert dieses Werkzeug

Ein schlichtes Bild wird in den von Ihnen gewünschten Maßen erzeugt, mit seiner eigenen Größe beschriftet und in Farben Ihrer Wahl. Nichts wird hochgeladen und nichts abgerufen — das Bild wird in der Seite gezeichnet — und genau das unterscheidet es von den Platzhalterdiensten, auf die ein Mockup sonst angewiesen ist, bei denen jeder Kasten im Entwurf eine Anfrage an fremde Server ist.

Voreinstellungen decken die Größen ab, die am häufigsten vorkommen: gängige Social-Cards, Profilbilder, Banner und übliche Werbeformate. Die Beschriftung mit den Maßen ist in der Praxis der nützliche Teil, denn sie zeigt auf einen Blick, welcher Kasten in einem Layout welche Größe hat, ohne dass etwas gemessen werden muss.

Platzhalter in einem Layout einsetzen

  • Platzhalter verbergen echte Probleme: Ein Layout, das auf ordentlichen grauen Kästen in exakten Maßen aufbaut, trifft auf echte Bilder uneinheitlicher Proportionen und fällt auseinander. Testen Sie mit echten Fotos, bevor Sie etwas abnehmen.
  • Erzeugen Sie die Extreme: Das breiteste und das schmalste, das höchste und das flachste. Ein Layout, das beide übersteht, übersteht alles dazwischen.
  • Lokal erzeugt heißt ohne Abhängigkeit: Ein Mockup voller externer Platzhalter-URLs bricht, sobald dieser Dienst ausfällt oder einen Verweis blockiert. Eine erzeugte Datei funktioniert weiter.
  • Sie dürfen nicht in den Produktivbetrieb gelangen: Ein Platzhalter auf einer Live-Seite fällt mehr auf als Blindtext, weil ein Bild den Blick zieht. Suchen Sie vor dem Start danach.

Generated locally, not fetched

Most placeholder workflows point at a remote service, which means every grey box in a mockup is a request to somebody else's server. That works until the service is slow, goes down, blocks a referrer, or the mockup is opened on a machine with no network.

The [msm_tool slug="placeholder-image"] draws the image in the page and hands you a file. No request, no dependency, and it keeps working when the design is opened in two years.

The label showing the dimensions is the practically useful part — it lets you see at a glance which box in a layout is which size, without measuring anything.

Placeholders hide the problems real images reveal

This is the thing worth saying, because it is where designs fail after sign-off.

A layout built on neat grey rectangles at exact dimensions meets real photographs of inconsistent proportions, unpredictable brightness and varying busyness, and falls apart. Text over an image that was a flat grey box is now text over a bright sky. A card grid that looked orderly now has one landscape image among eleven portraits.

Placeholders are for blocking out a layout. They are not for validating one. Swap in real content — ideally the worst real content you have — before anyone signs anything off.

Generate the extremes

The widest and the narrowest, the tallest and the shortest, and the largest count and the smallest. A layout that survives both ends survives everything between.

The specific cases that break things most often:

  • One item where the design assumed a full row.
  • An odd number where the grid expects pairs.
  • A portrait image in a layout designed around landscapes.
  • An image far larger than any other in the set.

The sizes worth having

Rather than inventing dimensions, use the ones the destination actually uses:

  • 1200×630 — the shape most platforms crop link previews to.
  • 1080×1080 — square social posts.
  • 1920×1080 — full-width heroes and video thumbnails.
  • 400×400 — avatars, at twice the usual display size.
  • 728×90 and 300×250 — the two most common advertising units, worth blocking out early if a page will carry them.

They must not reach production

A placeholder on a live page is more visible than lorem ipsum text, because an image draws the eye first. It is also indexed, and it can end up as the preview image on a shared link, which is a memorable way to launch.

Search for them before going live — both the files and any remote placeholder URLs left in the markup. The remote ones are worse, because they will keep working right up until they do not.

A note on greyboxing

There is a real argument for designing in grey deliberately: it forces attention onto hierarchy, spacing and flow rather than onto the photography. That is a legitimate method and this supports it.

The discipline it requires is the same one above — the grey phase ends before approval, not at it.

Häufig gestellte Fragen

Speziell zum Platzhalterbild-Generator. Allgemeinere Fragen zu dieser Kategorie werden auf der Kategorieseite beantwortet.

Keine Anfrage, keine Abhängigkeit, kein Verweis. Ein Mockup voller externer Platzhalter-URLs funktioniert nicht mehr, sobald dieser Dienst es nicht mehr tut.
Die des echten Bildes. Die Voreinstellungen decken die gängigen Social-, Profilbild- und Werbeformate ab.
Die Beschriftung zeigt die Maße, und genau das macht einen Platzhalter im Layout nützlich. Für beliebigen Text fügen Sie ihn danach mit dem Textwerkzeug hinzu.
Nur zu Beginn. Echte Bilder schwanken in Proportion und Unruhe auf eine Weise, wie ordentliche graue Kästen es nie tun — und genau daran brechen Layouts.
Dieselbe Idee. Beide stehen für Inhalt, der noch nicht da ist, und beide müssen vor dem Start verschwunden sein.

Abonniere Benachrichtigungen zu neuen Tools, Funktionen und Produktivitätstipps.