About the Placeholder Image Generator
This placeholder image generator creates simple dummy images for mock-ups, wireframes and development: a solid background with a centred label showing the dimensions or any text you choose. Set the width and height (or pick a common size such as a 1200 × 630 social preview), choose colours, and download the result as a PNG or SVG — or copy the SVG code or a data URI to drop straight into HTML or CSS.
It is useful for front-end developers building layouts before real images arrive, designers presenting wireframes, and anyone testing how a CMS, email template or ad slot handles a particular image size. Because everything is generated in your browser, there is no external placeholder service to go down, slow your page or track your visitors.
The label font size is chosen automatically to fit the image, but you can set it yourself. SVG output stays perfectly sharp at any zoom level and is usually only a few hundred bytes.
How to use the placeholder image generator
- 1Pick a size preset or choose Custom and enter the width and height.
- 2Set the background and text colours as hex codes.
- 3Type a label, or leave it blank to show the dimensions.
- 4Download the image as PNG or SVG.
- 5Or copy the SVG code or data URI and paste it into your HTML or CSS.
Formula and method
The image is an SVG with a full-size rectangle in the background colour and a text element centred both ways. When the font size is left at 0, it is set so the label fills at most 90% of the width — assuming an average character is about 0.6 of the font size wide — and never exceeds 20% of the height, with an 8px minimum so tiny images still show a label.
The aspect ratio is reduced with the greatest common divisor, so 1200 × 630 becomes 40:21. PNG downloads are rendered from the same SVG on a canvas at the exact pixel size. Dimensions are limited to 4000px per side to keep the browser responsive.
- W, H
- Image width and height in px
- characters
- Number of characters in the label
- gcd
- Greatest common divisor
Worked examples
Open Graph placeholder, 1200 × 630
The default label "1200 × 630" has 10 characters, so the width allows 1080 ÷ 6 = 180px, but 20% of the 630px height caps it at 126px. 1200:630 reduces by 30 to 40:21, and the image holds 0.756 megapixels.
Square product photo stand-in with custom text
The 13-character label limits the font to 972 ÷ 7.8 ≈ 125px, which is smaller than the 216px height cap. A square image has a 1:1 ratio and 1.1664 megapixels.
Leaderboard ad slot preset
On a short 90px banner the height rule wins: 20% of 90 = 18px. 728 and 90 share a factor of 2, so the ratio is 364:45.
Frequently asked questions
What is a placeholder image?+
It is a temporary image used in a layout before the real photo or graphic is ready. It reserves the right space and size so you can build and test the page without waiting for final assets.
Should I download a PNG or an SVG?+
SVG is tiny and stays sharp at any size, which suits web mock-ups. Choose PNG when a tool, CMS or email client only accepts raster images or needs an exact pixel size.
How do I use the data URI?+
Paste it as the src of an img tag or inside CSS url("…"). The image is embedded in your code, so no extra network request or external placeholder service is needed.
Are my images uploaded anywhere?+
No. The SVG is built in your browser and the PNG is rendered locally on a canvas, so nothing is sent to a server.
What size should a social preview placeholder be?+
Open Graph images for link previews on Facebook, LinkedIn and most chat apps are commonly 1200 × 630 pixels, which is the default here.