DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,274 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Dynamic Dummy Image Generator
Placeholders
Placeholders

Posted on

Dynamic Dummy Image Generator

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

Top comments (2)

Collapse
 
miaconn profile image
Mia Conn

I like it (:

Collapse
 
peopledatabase profile image
People Database

πŸ‘

Take a look at this:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. πŸ›