Thought I would create a short list of image placeholder apis which I use when creating and testing front end development.

Lorem Flickr

A fun little image generator that returns a random image which, by default, will return images of cats (yeah...I know).

Format: <img src="http://loremflicker.com/{width}/{height}">

Like most of the image generators featured on this article, Lorem Flickr provides the ability to add a keyword to a url string. For example <img src="http://loremflickr.com/320/240/dog">:

Lorem Pixel

Another powerful generator which returns random images.

Format: <img src="http://lorempixel.com/{width}/{height}">

Similar to Lorem Flickr, you are able to add a keyword to the end of the url string. For example, <img src="http://lorempixel.com/320/240/sorts">

Source Unsplash

A random image generator which uses images found on unsplash (A collection of amazing, royalty free images). Images are submitted directly by photographers themselves, allowing them to create accounts and have users like images. Teams at spotify and .inc have got involved with uploading their content onto the site.

Format: <img src="https://source.unsplash.com/{width}x{height}">

As you can see, the size has a slightly different syntax, separating the width and height with the letter x.

This generator has a few keyword options you can pass into the url which which enhance the api and adds a great search options:

  • /user - which will search within for images from a specified user. For example https://source.unsplash.com/user/nicoleknipes.
  • /collection which will search for images within a collection. For example https://source.unsplash.com/collection/875121.
  • /category - which will search for images within which are within a specified category. For example https://source.unsplash.com/category/nature.

This is a great generator for presenting ideas to clients in an attractive way. There a loads more options which can be found within their api documentation.

BONUS: This is also a great way of find dummy profile images for an app your working on. I was able to find a collection of headshots! Example: <img src="https://source.unsplash.com/collection/888146/300x300">

Unsplash.it

Similar to Source Unsplash, as both use images from the unsplash website. However, unsplash.it hosts a limited number of images from the unsplash collection. Nevertheless, it still meet the same demands as other random image generators.

Format: <img src="https://unsplash.it/{width}/{height}">

There are a few keywords similar to source unsplash to customize the generation. This can be found on their website.

Placeholder.com

Format: <img src="http://via.placeholder.com/{width}x{height}">

As you can see, this simply produces an image with a grey background and the dimensions of the image placed in the middle. This is extremely useful when you need to understand spacing and sizing within your project.

Dummy Image

This image generator offers the same functionality provided by Placeholder.com. However, it offers the possibility of changing the color of both the foreground text and the background...

Format: <img src="https://dummyimage.com/{width}x{height}/{background-color-hex}/{foreground-color-hex}">

This added functionality should help with gettin the random images to match the current UI colours and give a look which fits. Which may be of benefit to the user. Another handy function added is adding custom text...

Adding &text=Example+Text to the end of the url string will generate the image with the custom text you have passed through.

TL:DR;

There are some great random image generators whcih can be used in your project These can come in handy whilst working on a website, dashboard, profile picture or just planning out the development of a website as you go along.