Placeholder images

Placeholder image URL for any size

Build a placeholder image straight from the URL: the width, height, label, colors and format are all query parameters, so you can type one by hand without opening a design tool.

Open the generator

Light grey 400 x 300 placeholder image — 400 x 300 example from DummyImg

Placeholder image URL examples

Basic, 300 x 200

https://www.dummyimg.in/placeholder?width=300&height=200

Card, 400 x 300

https://www.dummyimg.in/placeholder?width=400&height=300

Hero banner, 1920 x 600

https://www.dummyimg.in/placeholder?width=1920&height=600&text=Hero%20banner

Open Graph, 1200 x 630

https://www.dummyimg.in/placeholder?width=1200&height=630&bg_color=%23245bd8&text_color=%23ffffff

Thumbnail, 150 x 150

https://www.dummyimg.in/placeholder?width=150&height=150

100 x 100

https://www.dummyimg.in/placeholder?width=100&height=100

Brand colors

https://www.dummyimg.in/placeholder?width=600&height=400&bg_color=%23111827&text_color=%2362a0ff

Custom text

https://www.dummyimg.in/placeholder?width=600&height=400&text=Coming%20soon

How a placeholder image URL is built

Start with https://www.dummyimg.in/placeholder and add query parameters. width and height set the size in pixels (10 to 3000). text sets the label, which defaults to the size. bg_color and text_color take a CSS color name or a hex code with the # written as %23. format picks PNG, JPEG, WEBP, GIF or BMP.

Because everything lives in the URL, you can keep placeholder images in your source code, swap the numbers when a layout changes, and replace them with real images later without touching the markup around them.

HTML

<img src="https://www.dummyimg.in/placeholder?width=400&height=300"
     width="400" height="300" alt="Card image placeholder">

CSS

.banner {
  aspect-ratio: 16 / 5;
  background: url("https://www.dummyimg.in/placeholder?width=1920&height=600") center / cover;
}

Next.js Image

// next.config.js: images.remotePatterns: [{ hostname: "www.dummyimg.in" }]
<Image src="https://www.dummyimg.in/placeholder?width=400&height=300" width={400} height={300} alt="" />

Questions

What size can a placeholder image be?

Any width and height from 10 to 3000 pixels.

How do I use hex colors in the URL?

Encode the # as %23, for example bg_color=%23245bd8. CSS color names like lightgray or navy also work.

Can I remove the size label?

Set your own label with text=, for example text=Logo. The label defaults to the image size.

Does it work with Next.js, Vue or a CMS?

Yes. It is a normal image URL, so anything that accepts an image URL can use it. In Next.js, allow www.dummyimg.in in images.remotePatterns.