Why placeholder images exist
When designing a layout, you rarely have the final images ready — they may be still being shot, licensed, or created. But a layout with empty gaps where images will go is impossible to judge, because so much of a design depends on how images sit within it. Placeholder images fill those gaps with something that occupies the exact space the real image will, so the layout can be assessed properly.
Crucially, a placeholder shows its own dimensions, which turns it into a working tool rather than just grey filler. At a glance you can see whether a slot is 1200 by 630 or 400 square, which helps everyone involved understand what the final image needs to be.
The dimension label is the point
A plain grey box tells you nothing. A box labelled with its pixel dimensions tells the photographer what to shoot, the person sourcing stock what to buy, and the developer what to code against. This is why placeholder services show dimensions by default, and why this tool does the same unless you override it with custom text.
The diagonal lines across the image are a common convention that makes the box read unmistakably as a placeholder, so nobody mistakes it for a real image or a design decision.
Common sizes worth knowing
Several dimensions recur so often they are worth having as presets. The 1200 by 630 size is the standard for social media share images, used across Facebook, LinkedIn and most platforms for link previews. Square formats at 1080 pixels suit Instagram and profile imagery. Full HD at 1920 by 1080 matches video and presentation slides. Small squares around 400 pixels serve avatars and thumbnails.
Designing to these standard sizes from the start avoids the awkward rework of discovering late that your hero image slot does not match the aspect ratio your images come in.
Placeholder images versus lorem ipsum
They serve the same purpose in different media. Just as placeholder text lets you judge typography without being distracted by meaning, placeholder images let you judge layout without waiting for or being distracted by specific pictures. Both keep the review focused on structure rather than content.
Generating them yourself
Many developers use online placeholder services that return an image from a URL, which is convenient but adds an external dependency — the mockup breaks if the service is down or the viewer is offline. Generating the images yourself and saving them removes that dependency entirely, which matters for mockups that need to work reliably or be shared with people who may view them offline.
Generating locally also lets you match your actual design colours rather than accepting a service's default grey, which makes the mockup read more like the finished product.
The reminder that applies to all placeholders
Like placeholder text, placeholder images have a habit of surviving into production if you are not careful. Before anything goes live, confirm that every placeholder has been replaced with a real image. A grey box with "600 × 400" written across it on a live site looks exactly as unfinished as it is.
Generated in your browser
Images are created locally on a canvas with nothing transmitted, at any size and in any format you choose.
Frequently Asked Questions
Why do placeholder images show their dimensions?
So everyone can see what size the real image needs to be — useful for photographers, stock sourcing and developers coding against the layout.
What are the diagonal lines for?
A convention that makes the box read unmistakably as a placeholder, so it is not mistaken for a real image or a deliberate design choice.
What sizes should I use?
1200 by 630 for social shares, 1080 square for Instagram, 1920 by 1080 for video and slides, and around 400 square for avatars.
Why generate images instead of using a placeholder service?
A saved local image has no external dependency, so the mockup works offline and does not break if a service goes down.
Do I need to remove placeholders before launch?
Yes. Like placeholder text, they survive into production if unchecked, and a labelled grey box on a live site looks unfinished.