20+ of the best image placeholder services on the web 2020

A list and implementation guide of some of the best image placeholder sites on the internet.

Johan Boström

3 minute read

So you’re creating a new site, but you haven’t gotten all those great images yet from your designer. To be able to continue working you might need some images that can give the look and feel of a more finished site. Here are some sites that can help you with just that, some professional and some lets say more creative alternatives.

Professional alternatives

Lorem Picsum

Features:

  • Specify width and height
  • Grayscale images
  • Random images
  • Get specific image
  • Images as JSON

Sample

Sample usage

https://picsum.photos/420/320?image=0

Sample image

Img

Lorempixel

Features:

  • Specify width and height
  • Grayscale images
  • Random images
  • Image by category
  • Get specific image
  • Text on image

Sample

Sample usage

https://lorempixel.com/420/320/abstract/1/Sample

Sample image

Img

placeholder.com

Features:

  • Specify width and height
  • Custom background color
  • Custom font color
  • Custom text

Sample

Sample usage

https://via.placeholder.com/420x320/ff7f7f/333333?text=Sample

Sample image

Img

Fake images please?

Features:

  • Specify width and height
  • Custom background color (and transparent background)
  • Custom font + color
  • Custom text

Sample

Sample usage

https://fakeimg.pl/420x320/ff0000,128/333333,255/?text=Sample&font=lobster

Sample image

Img

Dynamic Dummy Image Generator

Features:

  • Specify width and height
  • Custom background color
  • Custom font color
  • Custom text
  • Multiple image format
  • Predefined image size standards (ad sizes, screen- and video standards)
  • Bonus: It’s open source

Sample

Sample usage

https://dummyimage.com/420x320/ff7f7f/333333.png&text=Sample

Sample image

Img

PlaceIMG

Features:

  • Specify width and height
  • Images based on categories
  • Blur, grayscal and sepia effect

Sample

Sample usage

https://placeimg.com/420/320/tech/grayscale

Sample image

Img

Ipsum Image

Features:

  • Specify width and height
  • Custom background color
  • Custom font color
  • Custom text
  • Multiple image format

Sample

Sample usage

https://ipsumimage.appspot.com/420x320,ff7700

Sample image

Img

LoremFlickr

Features:

  • Specify width and height
  • Images based on categories
  • Images based on color

Sample

Sample usage

https://loremflickr.com/420/320?lock=1

Sample image

Img

KeywordIMG

Features:

  • Specify width and height
  • Custom background image from keyword

Sample

Sample usage

https://keywordimg.com/420x320/random

Sample image

Img

DummySrc

Features:

  • Specify width and height
  • Custom background color
  • Custom font color
  • Custom text
  • Multiple image format

Sample

Sample usage

http://www.dummysrc.com/430x320.png/22c5fc/17202A

Client side alternative

Sometimes you might not want to actually import an image from the scary internet, or maybe you would like to be able to work offline. In that case you could use a placeholder javascript framework.

One of those alternatives is Holder.js

Creative alternatives

A great alternative to those stiff and boring regular placeholders is to use a lets say more creative place holder. Down below follows some great placeholders focusing on more fun portraits.

Animals

Placekitten

Sample code

https://placekitten.com/420/320?image=2

Sample image

Img

Placebear

Sample code

https://placebear.com/420/320?image=2

Sample image

Img

Celebrities

Fill Murray

Sample code

https://www.fillmurray.com/420/320

Sample image

Img

Steven Segallery

Sample code

https://www.stevensegallery.com/420/320

Sample image

Img

Misc

Placebacon

Sample code

http://placebacon.net/420/320?image=2

Bacon Mockup

Sample code

https://baconmockup.com/420/320

Sample image

Img

Placebeard

Sample code

https://placebeard.it/420/320

Sample image

Img

Bonus

Need a clean and simple way to align your website layout? No complex grid frameworks necessary. Check out griddle.it

The basic URL structure to use for all grid shapes and sizes is:

http://griddle.it/[total width]-[number of columns]-[gutter size]

Simply set the URL as the background image on your body element. For example:

/* Generate a 960px grid, with 12 columns and 30px gutter */
body {
  background: url(http://griddle.it/960-12-30) repeat-y center top;
}

Have I missed one? Comment below!