Placeholder Images for Design Mockups
Generate sized colored boxes for use in Figma, Sketch, or web design mockups before real images are ready.
Preset sizes
Color themes
💡 For HTML mockups: use the “Copy as data URL” option and paste into <img src="..."> for inline placeholders. For Figma / Sketch designs, download the PNG and drag in.
Design Mockups tips
For wireframes and mockups, use the "Slate" theme — neutral enough that real designs can layer over it cleanly.
Match each placeholder's aspect ratio to where it'll live: 16:9 for hero images, 1:1 for profile pictures, 4:5 for cards.
The dimension label baked into the image (e.g., "800 × 600") helps reviewers know what target size to plan for.
使い方
なぜ私たちのツール？
Also check out…
Inline Placeholders for HTML Prototypes
Use "Copy as data URL" to inline placeholder image
Placeholders for CMS Content Slots
When demoing a CMS template, use placeholder image
Social Media Image Templates
Generate correctly-sized placeholders for Instagra
CSS Layout Testing Images
Generate images at extreme aspect ratios to stress