How to Use Placeholder Images While Designing
Placeholders keep a layout honest while the real images are still on their way.
What is the Placeholder Image Generator?
Placeholders are useful while a design is still being built, because they hold the exact space the final image will take. This tool calculates the aspect ratio and area for your size, then draws the size as text on a coloured canvas in the browser for download. It is a stand-in, not a finished photograph.
How to use it
- Enter the width and height you need
- Pick a background colour and label
- Generate and download the placeholder
Worked example
600 by 400 gives an aspect ratio of 1.5 and an area of 240,000 pixels, with the text 600 x 400 centred on the image.
When should you use a placeholder?
When a page, slide or advert needs an image of a known size but the final photo is not ready yet, so spacing and text flow can still be checked.
Frequently asked questions
Why show the dimensions on the image?
So anyone looking at a mock-up can see at a glance what size the final image should be.
Can I use placeholders in a live site?
Only while building. Replace them with real images before launch, or visitors will see the stand-ins.