Inline Placeholders for HTML Prototypes
Use "Copy as data URL" to inline placeholder images directly in HTML for quick prototypes.
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.
HTML Prototypes tips
Copy the data URL and use it as <img src="data:image/png;base64,..."> — no external file needed.
For fast prototyping, this beats fetching from placeholder.com or unsplash — no external network requests in your dev environment.
For real production, replace with optimized real images. Data URLs add to HTML size and aren't cacheable separately.
使い方
なぜ私たちのツール？
Also check out…
Placeholder Images for Design Mockups
Generate sized colored boxes for use in Figma, Ske
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