How to make a placeholder image
- Type a width and height, or tap a common size such as the 1200 × 630 Open Graph image or a 728 × 90 banner.
- Pick background and text colors, and optionally your own label instead of the dimensions.
- Download as PNG, JPEG, WebP or SVG, or copy a data URI to paste straight into HTML or CSS.
Why use placeholder images?
Placeholders let you build and test layouts before the real photos and artwork are ready. Showing the exact dimensions on the image tells designers, developers and clients what size the final asset must be, and helps catch layout bugs such as stretched or cropped images early. They are also handy for wireframes, slide templates and testing how a CMS handles uploads of a particular size.
The SVG format is tiny (a few hundred bytes) and scales perfectly, which makes it the best choice for a data URI in prototypes: no external placeholder service, no network request, and nothing breaks when a third-party service goes offline. PNG is best when a system requires a raster file of specific dimensions.
Images are created in your browser. Nothing is uploaded or tracked.
What size is an Open Graph image?
1200 × 630 pixels, the size Facebook, LinkedIn and most link previews recommend.
Can I use a data URI in an img tag?
Yes: paste it as the src attribute. It works offline and needs no separate file.
Is there a size limit?
Up to 8000 × 8000 pixels. Very large PNGs may take a moment to create on phones.