Placeholder Image Generator
Generate and download dummy placeholder images on the fly with custom size, colors, text and format.
Settings
Common Size Presets
Format
Preview
Data URI
img tag
How to Use
1
Set size and colors
Enter width and height or pick a social media preset, then choose background and text colors.
2
Set text and format
Enter the text to show (leave blank to auto-display the size) and choose PNG, JPG or WebP.
3
Download or copy
Check the preview and download. Copy the Data URI or img tag to paste straight into your code.
What is a Placeholder Image?
A placeholder (dummy) image is a temporary image used during web and app design where the real image is not ready yet. It helps verify sizing and layout. This tool runs entirely in your browser using canvas, so images are never sent to any server.
Features
- Custom Size & ColorsFreely set width, height, background and text color with a real-time preview.
- Social Media PresetsSet common sizes like OGP, Instagram and YouTube thumbnails with one click.
- 3 Formats + Copy OutputDownload as PNG, JPG or WebP, and copy the Data URI or img tag with one click.
- Fully In-BrowserImages are generated with canvas and never sent to a server. Free, no signup, no install.
Use Cases
- Dummy images for web design and landing page mockups
- Checking OGP and social post layouts
- Temporary image placeholders while coding (img src)
- Verifying banner and thumbnail dimensions
- Placeholders for docs and wireframes
FAQ
Is the placeholder image generator free to use?
Yes, it is completely free. No registration or installation required. Just open it in your browser and start using it.
Are the generated images sent to any server?
No. All images are generated locally in your browser using canvas. Nothing is uploaded to any external service or server.
Which image formats are supported?
PNG, JPG (JPEG) and WebP are supported. Use JPG or WebP for photo-like dummies and PNG for simple graphics.
What can I do with the Data URI and img tag?
A Data URI is the image encoded as text that you can embed directly into CSS or HTML. The img tag can be pasted straight into HTML to show the placeholder while coding.
What happens if I leave the display text blank?
When the display text is empty, the image automatically shows its "width × height" size in the center, which is handy as a size reference.
What is the maximum size I can generate?
Both width and height can range from 1 to 5000 px. Very large sizes may take longer depending on your device performance.
Feedback
Missing a feature, or getting a result that looks wrong? Let us know — we improve our tools based on your feedback.