A placeholder image generator for any size, right in your browser
This placeholder image generator makes stand-in images of exactly the size you need — a 300 × 250 ad slot, a 1200 × 630 share image, a phone screen or a 4K hero — while the real artwork is still being designed. Pick a preset or type any width and height, choose a solid colour or a gradient, add text (by default the size itself, like “1200×630”) and an optional wireframe cross, stripes, grid, dots or checkerboard, then download PNG, JPG, WebP or SVG.
For developers there are ready-to-paste snippets: a data URI, an <img> tag with width and height, and CSS with the matching aspect-ratio. A batch box turns a list of sizes into a ZIP in one go, and a small helper script lets your own pages draw placeholders without calling any outside service. Everything is drawn locally with the canvas and SVG built into your browser.
How to use the Placeholder Image Generator
- Choose a Size preset (social media, IAB display ads, screens or web layout) or type the Width and Height in pixels. ⇄ swaps them.
- Pick a solid colour or a gradient with its angle, then the text colour, font and size. Leave the text empty to show the dimensions, or use
{w}and{h}in your own text. - Add a pattern if you like — the cross gives the classic wireframe look — and set how strong it is.
- Choose PNG, JPG, WebP or SVG and press Download, or Make code snippets for a data URI, HTML and CSS.
- For many sizes at once, list them in the batch box and press Download ZIP.
Placeholder Image Generator features
Any size up to 8000 px
Exact pixel dimensions with the aspect ratio shown (1200 × 630 is 40:21), plus 26 presets for social posts, ad units, screens and layouts.
Colours, gradients and patterns
Solid or angled linear gradients that follow CSS angle rules, with optional cross, stripes, grid, dots or checkerboard overlays.
Four formats
PNG for exact colours, JPG and WebP for small files, and SVG — a few hundred bytes that stay sharp at any size.
Copy-ready code
Data URI, an <img> tag with width, height and alt text, and CSS with aspect-ratio to prevent layout shift.
Batch ZIP
Up to 60 sizes in one ZIP, named like placeholder-300x250.png; duplicates and invalid lines are skipped and listed.
Common placeholder sizes
Platforms change their recommended sizes from time to time, so check the current guidance in the social media image sizes guide before final artwork. When the real image arrives, the Image Resizer can bring it to the same dimensions.
| Use | Size (px) | Aspect ratio |
|---|---|---|
| Open Graph / link preview | 1200 × 630 | 40:21 (about 1.91:1) |
| Instagram post · portrait | 1080 × 1080 · 1080 × 1350 | 1:1 · 4:5 |
| Stories, Reels, Shorts | 1080 × 1920 | 9:16 |
| YouTube thumbnail | 1280 × 720 | 16:9 |
| Medium rectangle ad | 300 × 250 | 6:5 |
| Leaderboard ad | 728 × 90 | about 8:1 |
| Full HD screen | 1920 × 1080 | 16:9 |
Placeholders without an external service
Many sites load placeholders from a third-party URL such as /300x250. That adds a network request, can break when the service goes down, and tells that service which pages you are building. The helper under the batch box avoids all of this: paste it once and every <img data-ph="300x250"> becomes an SVG drawn in the visitor’s browser in your colours. Add data-ph-text="Hero" to change the label.
For a single image, an SVG data URI is usually the lightest option — a plain placeholder is only a few hundred bytes. PNG data URIs grow with the image area, so for large raster placeholders a real file is better; the snippet panel shows the size so you can decide. You can also turn any downloaded file into a data URI later with Image to Base64.
Tips for using placeholder images
- Always set
widthandheight(oraspect-ratio) so the page doesn’t jump when the real image loads. - Use the size text as a reminder for designers: “Hero {w}×{h}” makes the required export size obvious in a mock-up.
- Keep text contrast high if placeholders appear in demos or screenshots shown to clients.
- Give placeholders an empty or descriptive
altso screen readers don’t announce a file name.
Placeholder Image Generator FAQ
How do I make a placeholder image of a specific size?
Type the width and height in pixels (or choose a preset), set colours and text, and press Download. The file has exactly those dimensions; the label under the preview confirms the size and aspect ratio.
Which format should I download?
SVG is tiny and sharp at any size, ideal for websites and prototypes. PNG keeps colours exact for design tools. JPG or WebP make the smallest raster files for large photos-in-waiting.
Can I use these placeholder images commercially?
Yes. They are generated from your own settings, with no stock art or watermark, so you can use them in client work, products and documentation.
Is anything uploaded?
No. The images are drawn on a canvas or written as SVG in your browser. Only the ZIP library is fetched from a CDN when you make a batch.
Why does the font look different in the SVG file?
An SVG uses the fonts installed on the device that opens it, while PNG, JPG and WebP have the text drawn into the pixels. The tool uses common system font families so the difference is small.
What is the largest image I can make?
Up to 8000 px on each side and 40 megapixels in total, which covers 4K screens and print banners while staying within what browsers can draw reliably.