Image Placeholders In Web Design and Development

There you are. You’re building out the next great web app that will revolutionize the world. Or you’re just building a website for a friend. You come to a place where you want to insert some images on the page. You can’t leave it empty because the page won’t lay out correctly. However, you don’t want to spend time creating the right size images for each place on the page. What do you do?

You need placeholder images. It may have been around for some time now, but it strikes me again today how amazing these are. Here’s what a typical image tag looks like:

<img src="my-made-up-image.jpg">

A placeholder image from a literal sense is just an image that fills that gap where you’ll want to put a more relevant image later. As we mentioned though, we don’t want to create blank images for every possible use and size. And so we have free services that accept an http request and return a placeholder image for you. No service to sign up for. No API key. Just use their URL instead of a local image name.

For example:

<img src="//via.placeholder.com/100x100/">

Which looks lik:

That’s it! About as simple as it gets.

There is more than one option now though. Here are my favorites so far.

This is the one I’ve used for a few years with no complaints. In writing this post, I realized that they’ve changed the name. Previously, it was known as placehold.it. While that placehold.it still seems to work, the domain currently redirects to placeholder.com. It’s simple to use the placeholders and it comes with a few options.

Some options include:

Square image only
<img src="//via.placeholder.com/200/">

Specify the width and height (width x height)
<img src="//via.placeholder.com/200x100/">

Specify the image type to render
<img src="//via.placeholder.com/200.png/">

Specify the colors (background then text color)
<img src="//via.placeholder.com/200/00f/fff/">

Add text in the image
<img src="//via.placeholder.com/300x100?text=Best+Placeholder+Ever">

For more examples and a generator for all of your options, visit their site at Placeholder.com.

This one is newer to me… but so cool. Instead of filling the area with a shape and color like placeholder.com, placeimg.com actually feeds you a photo. In the URL, you can specify a category, and placeimg.com chooses an image at random from your selected category.

Here are a few examples.

Specify the width and height (width / height)
<img src="//placeimg.com/300/250/any">

For placeimg.com, you do have to specify at least 3 options. The height and width are required. The third option is the category. If you want an image from any category, use the word “any”. Otherwise, you have 5 categories to choose from:

The last option is… optional. You can select whether to add a color filter to your image. There are two options, grayscale and sepia.

<img src="//placeimg.com/400/350/tech/grayscale/">

The next time you need to fill your mockup with images, don’t kill too much time in Photoshop. Just reach for one of these and take care of business from your code editor.