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.

Image placeholder

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:

  • Don’t use any images
  • Use an image already on your computer
  • Use an image from a stock site such as RGBStock or freeimages
  • Use an image placeholder

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 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.


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

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

lorempixel placeholder

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.


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

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

placehold.it placeholder

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.

Want relentlessly helpful emails? Join Espresso ☕️

Get writing tips, web advice & goodies.

💙 606 digital caffeine fans

🍩 No spam or the doughnuts are on me • privacy

Who wrote this?

John Espirian freelance technical copywriter

John Espirian – the relentlessly helpful technical copywriter

I write B2B web content, blogs, user guides and case studies – all aimed at explaining how your products, services and processes work. I also offer LinkedIn profile critiquing and rewriting.

I work from home in Newport, South Wales and support the (formerly) mighty Liverpool FC 🔴⚽️