Quick and simple image placeholder
Generate awesome colorful placeholders for your web sites and projects.
Example Image Placeholders
Just some examples of our placeholding images. plchldr.co generates custom placeholder images on the fly, like these examples:
Using Image Placeholders
Use PLCHLDR.CO directly in your project.
Basic Usage Placeholder Images
This is the most basic way to use placeholders. Copy the code and modify the size to your liking.
Custom Background Color Placeholder Images
You can use custom background colors with our placeholders, Check out the example code below to learn how to do this.
Custom Text Color Placeholder Images
You can change the color of the placeholder text easily, Check out the example code below to learn how to do this.
Custom Text Placeholder Images
Using custom text in your placeholders is easy as pie! Check out the example code below to learn how to do this.
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 the width first, then height. Height is optional: if no height is specified, your placeholder image will be a square. https://plchldr.co/i/336 And generates a 336x336 pixel square dummy image.
You can specify text for your image by using a query string at the very end of the URL. https://plchldr.co/i/728x90?text=webdesign
Text is optional. The default is the image dimensions in pixels. You can use A-Z characters, upper or lowercase, numbers, and most symbols.
By default, text is white and the background random color. Colors are represented as hex codes after the dummy image dimensions. For example, #FF0000 is red. Colors must follow the dimensions. The first color is always the background color, and the second color is the text color.
https://plchldr.co/i/125x125?bg=000000&fc=ffffff&text=apple.com
https://plchldr.co/i/125x125?bg=f1dea1&fc=6040fb&text=godady.com
https://plchldr.co/i/125x125?bg=252f3f&fc=f29800&text=amazon.com
https://plchldr.co/i/125x125?bg=f1f1f1&fc=e200c2&text=lyft.com
https://plchldr.co/i/125x125?bg=5dd851&fc=000000&text=spotify.com
Standard Banner Sizes
The standard banner sizes that are used on the world wide web for the purpose of advertising, have been provided here. Standardized banners are found on several websites and have become a prominent form of advertising.
| Size (PX) | Banner Name | Global Frequency | Example Banner Link |
|---|---|---|---|
| 120×240 | Skyscraper | 1% | https://plchldr.co/i/120x240 |
| 120×600 | Skyscraper | 1% | https://plchldr.co/i/120x600 |
| 125×125 | Button | 1% | https://plchldr.co/i/125x125 |
| 250×250 | Square | 1% | https://plchldr.co/i/250x250 |
| 300×250 | Medium Rectangle | 40% | https://plchldr.co/i/300x250 |
| 300×600 | Half Page | 6% | https://plchldr.co/i/300x600 |
| 336×280 | Large Rectangle | 10% | https://plchldr.co/i/336x280 |
| 468×60 | Banner | 3% | https://plchldr.co/i/468x60 |
| 728×90 | Leaderboard | 25% | https://plchldr.co/i/728x90 |
| 970×250 | Billboard | 4% | https://plchldr.co/i/970x250 |
Dynamic Dummy Image Generator
Placeholder images for your project in progress. Custom URLs generate placeholder pictures in various sizes with categories and effects. When designing websites, you may not have the images you need at first. But you already know the sizes and inserting some placeholders can help you better seeing the layout. Don’t waste your time making dummy images for your mockup or wireframe. plchldr.co is a little tool that generates images with an URL. Choose the size, the colors, even the text. Placeholder Images for every case. Webdesign or Print. Just put a custom url in your html and you receive a proper placeholder picture. Free online placeholder image generator tool by plchldr.co to create perfect images. This placeholder image generator offers a lot of options, including width and height, ratios, background and foreground color, and our favorite—common preset screen and ad sizes.