Front-End Developer

← Back to Blog

Some Tools to Create Placeholder Images

When creating websites, the best approach is usually a content first approach. However there are times when you’re waiting on imagery and you need to fill out a design with placeholder content to see how it will look. Rather than spending time searching on iStock or Getty there are a few free services you can use for placeholder images.

Placeholder.com

Placeholder.com allows you to create custom size placeholder images. By adding parameters on the end of the URL we can get different sized images. For example:

<!-- Add a 800x500 image -->
<img src="//placehold.it/800x500" alt="placeholder image">

"placeholder image"

You can also change the colours and text just by adding more modifiers to the URL:

<!-- Add colours (background/text) -->
<img src="//placehold.it/800x500/0084b4/fff" alt="Twitter placeholder graphic">
<!-- Add text -->
<img src="//placehold.it/800x500/0084b4/fff&text=Twitter+Graphic" alt="Twitter placeholder graphic">

"Twitter placeholder graphic"

Unsplash It

Unsplash It allows you to use real images which is great for seeing how a page will look when it’s populated with real content.

<!-- Add 800x500 image -->
<img src="//unsplash.it/800/500" alt="Blog image">

"Blog image"

You can turn the image blurry or greyscale by modifying the URL.

<!-- Blurry image -->
<img src="https://unsplash.it/800/500/?blur" alt="Random image">
<!-- Greyscale image -->
<img src="//unsplash.it/g/800/500" alt="Random image">

"Greyscale image"

You can also use a specific image to keep things consistent through the design process.

<!-- Waves image -->
<img src="https://unsplash.it/800/500?image=1041" alt="waves">

"Waves image"

PlaceIMG

PlaceIMG allows you to choose images from a range of categories such as animals, nature, architecture, people and tech.

<!-- Architectural image -->
<img src="//placeimg.com/800/500/arch" alt="architectural image">

"Architectural Image"

You can also further filter these images by adding a greyscale or sepia filter.

<!-- Nature image with a greyscale filter -->
<img src="//placeimg.com/800/500/nature/grayscale" alt="Nature image">
<!-- Nature image with a sepia filter -->
<img src="//placeimg.com/800/500/nature/sepia" alt="Nature image">

"Nature Image"

So the next time you need a quick filler image for a design you’ll know where to go.