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.