Creating quick and easy placeholder images

Duncan Stephen
Wednesday 2 March 2011

Placeholder image

We have all been there. You are working on a test webpage, and you need to create a placeholder image to test out how it would look. What can you do?

You could always go on the hunt for a suitable stock image. But this can be time consuming and distracting.

So I went looking for a basic placeholder image that could be re-sized and re-used on a variety of different pages, and could represent a variety of different images. I was thinking of the sort of image often found in wireframes, which normally replace images with a plain rectangle with a cross going through it.

But instead I came across the hugely useful Placehold.it tool. This discovery has caused great excitement at web team HQ!

It is quite easy to use. Each placeholder image URL begins http://placehold.it/ — then you can just add the x and y dimensions to the end of the URL. For instance, the 640px × 360px image at the top of this post can be generated using the URL http://placehold.it/640x360

You can choose to add just a width to the URL, which will create a square image.

Example placeholder image

There are further useful customisation options. You can change the colours of the background and the text by adding hex values. Here is an image created using St Andrews Blue as the background color and white as the text colour: http://placehold.it/125x70/00539b/ffffff

Hello world!

You can even add your own text in place of the image dimensions: http://placehold.it/308x173/ee3224/ffffff&text=Hello+world

All of the customisation options have got us excited, but I can think of a few more features that would improve it even further.

  • The ability to set a width and an aspect ratio, for those times when you know you need a 16:9 image but just can’t be bothered to get the calculator out.
  • The ability to select a different font. The one used is groovy and all, but sometimes a more neutral font like Verdana might be better for testing webpages.
  • Perhaps the ability to add rounded corners? OK, now I am being really demanding…

Image of a cat

If blocks of colour are not your cup of tea, we have since been told about Placekitten, which was inspired by Placehold.it. This being the internet, Placekitten automatically generates an image of a cat for you to place on your test webpage.

I am often told that I ought to add more images to my blog posts. Now I really have no excuse.

Now all that is needed to make our lives complete is for a website to offer placeholder images containing fire engines.

Related topics

Share this story