loading...
Cover image for Dynamic Dummy Image Generator

Dynamic Dummy Image Generator

placeholders profile image Placeholders ・2 min read

Dummy images for your project in progress. Custom URLs generate dummy images 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 dummy images generator offers a lot of options, including width and height, ratios, background and foreground color, and our favorite—common preset screen and ad sizes.

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 dummy images 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!

Basic usage dummy images
This is the most basic way to use dummy images. Copy the code and modify the size to your liking.

plchldr.co

<img src="https://plchldr.co/i/675x200" alt="plchldr.co">
Enter fullscreen mode Exit fullscreen mode



Custom background color dummy images
You can use custom background colors with our dummy images, Check out the example code below to learn how to do this.

plchldr.co

<img src="https://plchldr.co/i/675x200?bg=111111" alt="plchldr.co">
Enter fullscreen mode Exit fullscreen mode



Custom text color dummy images
You can change the color of the dummy images text easily, Check out the example code below to learn how to do this.

plchldr.co

<img src="https://plchldr.co/i/675x200?fc=cc0000" alt="plchldr.co">
Enter fullscreen mode Exit fullscreen mode



Custom Text dummy images
Using custom text in your dummy images is easy as pie! Check out the example code below to learn how to do this.

plchldr.co

<img src="https://plchldr.co/i/675x200?text=dev.to" alt="plchldr.co">
Enter fullscreen mode Exit fullscreen mode

Discussion

pic
Editor guide