Common sizes worth knowing
| Preset | Size | Used for | | --- | --- | --- | | OG | 1200 × 630 | Open Graph, Twitter cards, link previews | | Square | 1080 × 1080 | Instagram feed, product tiles | | Story | 1080 × 1920 | Stories, Reels, vertical video | | Hero | 1600 × 900 | page headers, 16:9 embeds | | Thumb | 400 × 300 | list thumbnails, cards | | Avatar | 256 × 256 | profile pictures |
Placeholders should look like placeholders
The most expensive mistake in prototyping is a placeholder convincing enough to survive to launch. A grey box labelled with its own dimensions cannot be mistaken for a photograph — which is exactly why the dimensions label is the default here.
The optional grid overlay helps with a different job: checking how an image
behaves under object-fit: cover at different container sizes, where the grid
makes the crop immediately visible.
Why SVG is usually right
A 1200 × 630 SVG placeholder is around 300 bytes. The same image as PNG is tens of kilobytes. The SVG stays sharp on a retina screen, at print resolution, and when someone scales the prototype to 200%. There is no case where a raster placeholder is smaller or sharper — only cases where a tool will not accept a vector.
Generated on your device
The canvas draws in your browser and the file is created locally. No network request, no service to depend on, and it works offline.
Questions
Why not use a placeholder service?+
Because a remote placeholder is a third-party request on every page load of your prototype: it is slower, it breaks offline, it leaks what you are building to whoever runs the service, and it stops working the day that service shuts down — which has happened to the popular ones more than once. Generating locally has none of those problems.
Which format should I pick?+
SVG unless something refuses it. It is a few hundred bytes, stays sharp at any size, and scales without a second file. Use PNG when a tool insists on a raster, and JPG or WebP only when you specifically want to test how compression artefacts look.
Can I use these in production?+
As deliberate placeholders — an empty state, a missing avatar — yes. Just be certain they are labelled as placeholders in the interface, so a missing image never reads as real content.
What size should an Open Graph image be?+
1200 × 630. That is the preset here, and it is what every major platform crops from. Anything smaller than 600 px wide may be ignored entirely.