Quick and Simple Image Placeholders
Generate awesome placeholders for your web sites and projects.
Placeholder Image Generator
Live Preview
Best Dynamic Dummy Image Generator
Placeholder images are temporary, generic visuals used to replace graphics or text on a webpage during the design process. They are crucial for designers and developers who want to present a design concept to clients before finalizing the layout and content.
These images are easily recognizable and simple to use. Designers can employ them in various projects such as brand development, marketing campaigns, landing pages, company brochures, and corporate identity suites. Placeholder images help visualize the layout when the final images are not yet available.
Using a tool like plchldr.co can streamline this process. This tool generates placeholder images through custom URLs, allowing you to choose the size, colors, and text. It offers numerous options, including width, height, aspect ratios, background and foreground colors, and common preset screen and ad sizes. By using placeholder images, designers save time and can focus on refining their designs rather than creating temporary visuals manually.
What is a Dummy Image Generator?
A Dummy Image Generator is an online tool that creates temporary, generic images for use in design projects. These images serve as placeholders in a layout where the final content is not yet available. Designers and developers use these generators to visualize and test the layout, design, and overall look of a webpage or print project without needing the final images. Dummy image generators allow customization of image size, colors, text, and sometimes even categories and effects, making them a versatile tool for various design needs. They help streamline the design process by providing instant visual elements that can be easily swapped out with the final images later on.
Why Choose PLCHLDR.CO?
Lightning Fast
Instant image generation with smart caching. Subsequent requests are served in milliseconds.
100% Free
No registration, no API keys, no rate limits. Use it freely for personal and commercial projects.
Full Customization
Choose any size, color, text, and font. Support for PNG, WebP, and SVG formats.
SEO Friendly URLs
Clean, readable URLs that are easy to remember and share. No query strings needed.
9 Google Fonts
Beautiful typography with Roboto, Open Sans, Lato, Montserrat, Poppins, and more.
No CORS Issues
Use images anywhere without cross-origin restrictions. Perfect for all web projects.
Integration Examples
Copy and paste these code snippets into your project
HTML Image Tag
<img src="https://plchldr.co/i/600x400"
alt="Placeholder">
CSS Background
.hero {
background-image: url('https://plchldr.co/i/1920x1080');
background-size: cover;
}
React Component
<img
src="https://plchldr.co/i/400x300/667eea/fff"
alt="Placeholder"
loading="lazy"
/>
Markdown Syntax

Vue Template
<img
:src="`https://plchldr.co/i/${width}x${height}`"
alt="Dynamic placeholder"
/>
Next.js Image
<Image
src="https://plchldr.co/i/1200x630"
width={1200}
height={630}
alt="OG Image"
/>
How to use dummy images?
plchldr.co is a server-side image rendering tool that allows web developers and designers alike to dynamically create images to be used as placeholders in a project. The only required parameter is a number for the image's width. Of course, you also have the ability to supply more parameters, such as height, colors, text and more!
Just specify the image size after our url and you'll get a placeholder image. So the image URL should look this: https://plchldr.co/i/336x280
You can use the images in your HTML or CSS, like this:
<a href="https://plchldr.co/"><img src="https://plchldr.co/i/336x280" alt="plchldr.co"></a>
Specify width and height after /i/ in the format WIDTHxHEIGHT:
https://plchldr.co/i/800x600
Maximum dimensions: 4000x4000 pixels
Add your custom text at the end of the URL:
https://plchldr.co/i/600x400/667eea/ffffff/png/default/Hello+World
URL encode spaces as + or %20. Maximum text length: 100 characters
Add hex color codes (without #) after the size:
https://plchldr.co/i/600x400/667eea/ffffff
Format: /i/{width}x{height}/{bg-color}/{text-color}
Use 3 or 6 character hex colors (e.g., fff or ffffff)
We support PNG (default), WebP, and SVG formats. Add format parameter after colors:
https://plchldr.co/i/600x400/667eea/ffffff/webp
PNG: Best compatibility, larger file size
WebP: Modern format, 25-35% smaller, faster loading
SVG: Vector format, perfect scaling, smallest size
Yes! We offer 9 beautiful Google Fonts. Add font name after format:
https://plchldr.co/i/600x400/667eea/ffffff/png/roboto
Available fonts: roboto, opensans, lato, montserrat, poppins, raleway, inter, playfair, nunito
Default system font is used if no font is specified.
You can use placeholder images as CSS background images:
background-image: url('https://plchldr.co/i/1920x1080/667eea/ffffff');
Or with background shorthand:
background: url('https://plchldr.co/i/1920x1080') center/cover no-repeat;
Minimum: 1x1 pixel
Maximum: 4000x4000 pixels
For best performance, we recommend keeping images under 2000x2000 pixels. Larger images may take longer to generate and load.
Yes, plchldr.co is completely free to use for personal and commercial projects!
There are no rate limits for normal usage. Images are cached for optimal performance, so subsequent requests for the same image are served instantly.
Please don't abuse the service with excessive automated requests.
Example Placeholders
/i/245x155/EC6357/ffffff
/i/245x155/EC6357/ffffff
/i/245x155/EC6357/ffffff
/i/245x155/EC6357/ffffff
/i/336x180/7BC955/ffffff
/i/336x180/7BC955/ffffff
/i/336x180/7BC955/ffffff
/i/520x190/5597C9/ffffff
/i/520x190/5597C9/ffffff
/i/1070x200/C98EC2/ffffff