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.
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
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
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.
This service generates random pictures.
This generates a
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
In this example, the
200 and the
100. The figures represent pixels (
px) but the units must not be written into the code.
This services generates simple grey boxes that display their dimensions.
This generates a
150 image that looks like this:
Unlike the earlier example, the dimensions here are separated by an
x character instead of a
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,
Subscribe for tips
Join 413 others on my free Espresso ☕️ email list to receive:
- blog updates
- free ebooks
- discounts on consultancy
- offers and secret stuff