Placeholder Image Generator
Create dummy images in any size for mockups, wireframes and development. Pick a preset, style it, then download or paste a data URI straight into your code.
No external service needed: the placeholder is embedded right in your HTML or CSS, so it works offline and never breaks.
How to use Placeholder Image Generator
- 1
Set the size
Type a width and height or pick one of 35+ presets for websites, social media, ad banners and screens. Switch to Batch for many sizes at once.
- 2
Style it
Choose a theme or your own colours, add a pattern, border and rounded corners, and set the text. Use {w} and {h} to show the size.
- 3
Download or embed
Download PNG, JPG, WEBP or SVG, a ZIP for batches, or copy a data URI,
tag, inline SVG or CSS snippet.
Placeholder images without an external service
Placeholder images (also called dummy images or filler images) stand in for real photos while you design a layout, build a website or prepare a presentation. Instead of linking to a third-party placeholder service that might be slow, blocked or shut down, this generator creates the images in your browser. You can download them or embed them directly in HTML or CSS as a data URI, so they keep working offline and never break your build.
Presets for every common size
- Web: Full HD, HD video, Open Graph (1200 × 630), blog hero, cards, thumbnails, avatars and icons.
- Social media: Instagram post, portrait and story, YouTube thumbnail and banner, X header, LinkedIn banner, Facebook cover and Pinterest pin.
- Ad banners: the IAB standard sizes such as 300 × 250 medium rectangle, 728 × 90 leaderboard, 160 × 600 skyscraper, 300 × 600 half page and 320 × 50 mobile banner.
- Screens: 4K, QHD, laptop, iPhone, Android, iPad and mobile viewport.
Style your placeholders
Choose from colour themes or set your own background, text and pattern colours. Add stripes, a grid, dots, a checkerboard, waves, a diagonal cross or a gradient, plus a border and rounded corners. The text shows the dimensions by default, but you can write anything: tokens like {w} and {h} are replaced by the width and height, and an optional second line shows the aspect ratio.
Batch generation
Need a full set of ad banners or responsive image sizes? Switch to Batch and enter one size per line, optionally followed by a label such as 728x90 Leaderboard. Every size is rendered with the same style and packed into a single ZIP file.
Embed with a data URI
The code panel gives you the placeholder as a data URI, a ready-made <img> tag with width and height, inline SVG or a CSS background rule. SVG placeholders are tiny, usually under 1 KB, and stay sharp at any size.
Which format should I use?
SVG is the smallest and scales perfectly, ideal for code. PNG works everywhere, including design tools like Figma and Photoshop. JPG and WEBP are useful when you want to test real-world file sizes and loading behaviour.