Generate Placeholder Images
Create dummy images for your mockups, prototypes, and web development projects with a simple URL.
Quick Start - Placeholder Image API
Use this URL format to generate placeholder images:
https://placeholder.vn/placeholder/{width}x{height}?params
Replace {width}x{height} with your desired dimensions and add optional parameters for colors and text.
/placeholder/300x200
Basic Placeholder
Default 300×200 dummy image
/placeholder/250?bg=2563eb&color=ffffff&text=Logo
Custom Colors
Blue background with custom text
/placeholder/400x150?bg=059669&color=ffffff&text=Banner%20Image
Banner Placeholder
Perfect for website headers
/placeholder/200?bg=6b7280&color=ffffff&text=Avatar
Avatar Placeholder
Square format for profile pictures
/placeholder/350x200?bg=3b82f6&color=ffffff&text=Product%20Image
Product Mockup
Ideal for e-commerce layouts
/placeholder/300?bg=8b5cf6&color=ffffff&text=🎯
With Emoji
Unicode and emoji support
API Parameters
Customize your placeholder images with these URL parameters
| Parameter | Description | Default Value | Example |
|---|---|---|---|
width |
Image width in pixels (10-2000) | 300 | 400, 800, 1200 |
height |
Image height in pixels (10-2000) | Same as width | 300, 600, 800 |
text |
Custom text to display | "{width}×{height}" | Hello%20World, Product |
bg / background |
Background color (hex without #) | a3b0bb | 2563eb, 059669, ff6b6b |
color / textcolor |
Text color (hex without #) | ffffff | 000000, 1f2937, ffffff |
Code Examples
Integration examples for popular frameworks and development environments
HTML - Basic Usage
<!-- Basic placeholder image -->
<img src="https://placeholder.vn/placeholder/400x300" alt="Placeholder image">
<!-- Custom placeholder with colors -->
<img src="https://placeholder.vn/placeholder/600x400?bg=2563eb&color=ffffff&text=Product%20Image" alt="Product placeholder">
<!-- Square avatar placeholder -->
<img src="https://placeholder.vn/placeholder/150?bg=059669&color=ffffff&text=User" alt="User avatar placeholder">
CSS - Background Images
/* Hero section background */
.hero {
background-image: url('https://placeholder.vn/placeholder/1920x1080?bg=1f2937&color=ffffff&text=Hero%20Section');
background-size: cover;
background-position: center;
}
/* Card placeholder */
.card-image {
background-image: url('https://placeholder.vn/placeholder/400x300?bg=f3f4f6&color=6b7280&text=Image');
background-size: cover;
}
JavaScript / React
// Generate placeholder URL
const createPlaceholder = (width, height, text = 'Image', bgColor = '2563eb') => {
return 'https://placeholder.vn/placeholder/' + width + 'x' + height + '?bg=' + bgColor + '&color=ffffff&text=' + encodeURIComponent(text);
};
// React component
function PlaceholderImage({ width = 300, height = 200, text = 'Image', bgColor = '2563eb' }) {
const src = createPlaceholder(width, height, text, bgColor);
return (
<img
src={src}
alt={'Placeholder ' + text}
loading="lazy"
/>
);
}
Vue.js Template
<template>
<img
:src="placeholderUrl"
:alt="'Placeholder ' + text"
loading="lazy"
/>
</template>
<script>
export default {
props: {
width: { type: Number, default: 300 },
height: { type: Number, default: 200 },
text: { type: String, default: 'Image' },
bgColor: { type: String, default: '2563eb' }
},
computed: {
placeholderUrl() {
return 'https://placeholder.vn/placeholder/' + this.width + 'x' + this.height + '?bg=' + this.bgColor + '&color=ffffff&text=' + encodeURIComponent(this.text);
}
}
};
</script>
Features
Everything you need for professional placeholder images
Instant Generation
Generate placeholder images instantly with fast response times and global delivery
Fully Customizable
Control dimensions, colors, and text with simple URL parameters
Responsive Design
Perfect for any screen size from mobile to desktop
Simple API
No API keys or registration required. Just use the URL
SVG Vector
High-quality vector format that scales perfectly
100% Free
No limits, no costs, no hidden fees. Free forever
📊 Performance Stats
~50ms
Average Response Time
99.9%
Uptime Reliability
2000px
Max Image Size
∞
Free Requests
Use Cases
Common scenarios where placeholder images are essential
🌐 Web Development
Create mockups and prototypes during development before real images are available
🎨 Design Mockups
Fill design layouts with dummy images to visualize the final product
📱 App Prototyping
Test mobile and web app layouts with various image dimensions
🛒 E-commerce
Placeholder product images for testing shopping cart and catalog layouts
📝 Content Management
Default images for CMS systems when content is being uploaded
🧪 Testing
Generate test data and dummy content for automated testing
About Placeholder.vn - Free Dummy Image Generator
Placeholder.vn is a free placeholder image generator service designed for web developers, designers, and content creators. Our dummy image API allows you to create custom placeholder images instantly without any registration or API keys.
Whether you're building a website mockup, creating a design prototype, or need test images for your application, our placeholder image generator provides high-quality SVG images that scale perfectly across all devices. Simply specify the dimensions, colors, and text in the URL to generate the perfect dummy image for your project.
Our service supports unlimited free requests, making it the ideal solution for developers who need reliable placeholder images during the development process. From small icons to large banners, generate any size dummy image you need with our simple and intuitive API.
Best Practices
Tips for optimal placeholder image usage
🔗 URL Encoding
Use %20 for spaces in text parameters. Example:
text=Hello%20World🎨 Color Format
Use hex colors without the # symbol. Example:
bg=2563eb instead of #2563eb📏 Size Guidelines
Keep dimensions between 10-2000px for optimal performance and reasonable file sizes
♿ Accessibility
Always include meaningful alt attributes for screen readers and SEO optimization
🚀 Caching
Use consistent URLs to maximize browser caching and improve loading speeds
📱 Responsive
Consider using srcset with multiple sizes for responsive image implementations
Common Placeholder Dimensions
Facebook Cover: https://placeholder.vn/placeholder/820x312?bg=1877f2&color=ffffff&text=Facebook%20Cover
Instagram Post: https://placeholder.vn/placeholder/1080x1080?bg=e4405f&color=ffffff&text=Instagram%20Post
Twitter Header: https://placeholder.vn/placeholder/1500x500?bg=1da1f2&color=ffffff&text=Twitter%20Header
Hero Banner: https://placeholder.vn/placeholder/1920x600?bg=2563eb&color=ffffff&text=Hero%20Banner
Blog Thumbnail: https://placeholder.vn/placeholder/400x300?bg=059669&color=ffffff&text=Blog%20Post
Product Image: https://placeholder.vn/placeholder/300x300?bg=6b7280&color=ffffff&text=Product
App Icon: https://placeholder.vn/placeholder/512x512?bg=3b82f6&color=ffffff&text=App%20Icon
Splash Screen: https://placeholder.vn/placeholder/375x812?bg=1f2937&color=ffffff&text=Loading
Card Image: https://placeholder.vn/placeholder/350x200?bg=8b5cf6&color=ffffff&text=Card%20Content