Technical writing services by Espirian

How to generate placeholder images for a website

Have you ever designed some content for the web and then needed to place a holding image on the screen to fit the intended layout? In this post, John Espirian shows an easy way to add image placeholders to your content.

Stuck for an image?

When you’re producing content for the web, it’s best to have all necessary image resources to hand straight away. But there are times when this might not be possible – perhaps you’re having difficulty sourcing exactly the right picture or you’re waiting for someone else to make a visual decision about a layout.

If you want to fill out a page with a test image that you know will be replaced later on, what do you do? Here are some options:

I recommend using an image placeholder. This will give your layout the right dimensions and won’t require you to upload any extra files to your website.

What is an image placeholder?

An image placeholder is simply an image of a given width and height that temporarily takes the place of another image that you intend to use on your website.

How do I add an image placeholder to a page?

Thankfully, there are now lots of free online services that will generate image placeholders for you. All you need to do is to place an <img> tag into your HTML and link it to one of these placeholder services.

The clever bit is that the information in the code is what defines the width and height of the image. You won’t need to edit the images or even upload them to your server.

Here are a couple of examples.

Using lorempixel

This service generates random pictures.


<img src="http://lorempixel.com/200/100/">

This generates a 200×100 image that looks like this:

To change the dimensions, just change the figures in the code. The first figure is for the width, the second for the height. The figures are separated by the / character.

In this example, the width is 200 and the height is 100. The figures represent pixels (px) but the units must not be written into the code.

Using placehold.it

This services generates simple grey boxes that display their dimensions.


<img src="http://placehold.it/100x150">

This generates a 100×150 image that looks like this:

Unlike the earlier example, the dimensions here are separated by an x character instead of a / character.

Conclusion

Instead of wasting time hunting around for a temporary image to occupy space in your web layouts, use a placeholder service to get the job done quickly and easily.

Thanks for reading,

Keep in touch

Join 323 others on my free Espresso ☕️ list and you'll receive:

  • 🔍 blog updates
  • 📘 free ebooks
  • 💰 discounts on consultancy
  • 🎟 offers and secret stuff

🔒  No spam, I promise