15+ of the best image placeholder services on the web 2018

Placeholder Image

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

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

ImgPlaceholder

Features:

  • Specify width and height
  • Custom background color (and transparent background)
  • Custom font + color + size
  • Custom text
  • Image from font (Font awesome, Ionicons, Glyphicons)

Sample

Sample usage

https://imgplaceholder.com/420x320/ff7f7f/333333/fa-image

Sample image

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

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

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

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

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

Placebear

Sample code

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

Sample image

Celebrities

Fill Murray

Sample code

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

Sample image

Steven Segallery

Sample code

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

Sample image

Morgan Fillman

Sample code

https://morganfillman.space/420/320

Sample image

Place Cage

Sample code

https://placecage.com/420/320

Sample image

Place Beyonce

Sample code

https://placebeyonce.com/420-320

Sample image

Misc

Placebacon

Sample code

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


Bacon Mockup

Sample code

https://baconmockup.com/420/320

Sample image

Placebeard

Sample code

https://placebeard.it/420/320

Sample image

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!

Share post
About Johan Boström

I'm a system architect, developer and solution expert, with experience in web-, application-, server- and windows service development with main focus on .NET / C#. Special skills with many kinds of CMS-tools, like EPiServer, Umbraco and Litium Studio.

Comments