How to use the Placeholder Image Generator
- Enter the width and height, or click a preset size.
- Set the background (solid or gradient), text colour and label —
{w}and{h}become the dimensions. - Choose PNG, JPG, WebP or SVG and download — or copy a data URI or an
<img>tag to paste into your HTML. - Need a set? Open Generate many sizes, list one size per line and download a ZIP.
When to use placeholder images
Placeholders fill image slots while the real artwork isn’t ready: wireframes and mock-ups, CMS templates, design systems, test fixtures and seed data. Labelling each one with its size makes layout bugs obvious — you can see at a glance whether a 1200 × 630 slot is really receiving a 1200 × 630 image.
Which format?
- SVG — a few hundred bytes at any size, perfect inline in HTML or as a data URI.
- PNG — exact colours and crisp text, for uploads that require a raster file.
- JPG / WebP — when a system only accepts photos or you need realistic file sizes for performance tests.
Common sizes
| Size | Use |
|---|---|
| 1200 × 630 | Open Graph / link preview |
| 1920 × 1080 | Full-HD hero, 16:9 video thumbnail |
| 1080 × 1080 | Square social post |
| 300 × 250, 728 × 90, 160 × 600 | IAB ad units |
Make a real preview image with the OG image generator, convert files with image to Base64, and fill layouts with text from the lorem ipsum generator.
Tools that pair well with the Placeholder Image Generator
- Mock Data Generator — Create up to 10,000 rows of realistic test data — users, products, orders, addresses, companies or nested API records — or build your own schema.
- Image Resizer — Resize a photo to exact pixel dimensions or a percentage, crop it to fill a social-media size, or fit it inside a frame with a background colour — all locally in your browser.
- Image Compressor — Shrink photos and graphics by 50–90% without visible quality loss.
- Favicon Generator — Make a complete favicon package from a logo, a letter or an emoji: a multi-size favicon.ico, Apple touch icon, Android/PWA icons, a Webflow webclip, the web manifest and the HTML tags to paste.
Frequently asked questions
Can I use these images commercially?
Yes. They are generated on your device and contain only your own text and colours — no licence or attribution needed.
How do I use the data URI?
Paste it as the
src of an <img> or in CSS url(). It embeds the image in your code, so no file has to be hosted.What is the maximum size?
Up to 8000 × 8000 pixels; browsers limit canvas memory beyond that. SVG output has no practical limit.