Tools
Placeholder image generator
Create stand-in images at any size and colour for mock-ups and prototypes.
About this tool
When you are building a website, an email template or a prototype, the final photos are often not ready yet. A placeholder image fills the slot at exactly the right dimensions and makes it obvious what belongs there, so the layout doesn’t collapse. It is also handy for testing how a design copes with different formats, or for showing a client the proportions of a banner.
Type the width and height in pixels or pick a quick size: HD, Square, Banner, Thumb, Social (1200×630) or Avatar. Under “Colours”, set the background and text with the picker or by typing a HEX code. By default the image shows its own dimensions, but you can enter custom text instead. Choose PNG or SVG, then hit “Download” or copy the data URL to paste straight into your HTML or CSS.
The image is drawn in your browser and never sent to a server, so you don’t depend on a third-party placeholder service staying online. SVG output is tiny and stays sharp at any size; PNG is more convenient for tools that don’t accept vectors. The text uses a monospaced system font and is always centred. There are no stock photos or patterns: it is a block of colour with text.
Frequently asked questions
What is a placeholder image?
It is a temporary image that holds the space for the final one in a design or a site under construction. It is usually a block of colour with its dimensions written on it, so the required size is clear at a glance.
Should I use PNG or SVG placeholders?
SVG weighs almost nothing and stays crisp at any size, which makes it ideal for HTML mock-ups. PNG is the better choice if the image is going into software or platforms that don’t support SVG.
What is the data URL for?
A data URL contains the image encoded inside the text itself. You can paste it into the src of an <img> tag or a CSS background-image without saving or uploading a file.
What size should a link-preview image be?
The “Social” preset creates a 1200×630 px image, the usual size for the Open Graph images that Facebook, LinkedIn and WhatsApp show when a link is shared.