Image Placeholders

Yesterday’s post/article was talking about using Dummy Text (Lorem Ipsum) as a placeholder for copy and test when you want to see what the layout is going to look like. This is helpful when you do not have the actual copy available or it is not ready yet.

The next logical topic to share would be to provide you with some places where you can get some images that you can use for placeholders. You can use your source of images that you are currently accessing (if you have an unlimited subscription). In some cases, having ‘real’ images could be distracting. Clients may not be able to see through the images and get caught up in the placeholders. It is the same as when someone looks at a house and cannot see, “the potential” of the house because it is not decorated in the style they like.

Without further adieu, i give you some resources!

Lorem Pixel

Lorem Pixel is a great site that provides either generic images or images by topic. as they say on the site,

Placeholder Images for every case.
Webdesign or Print. It’s simple and absolutely free!
Just put the custom url in your code like this:

 <img src="https://lorempixel.com/400/200" />

to get your FPO / dummy image.

When you do that, you get an image that looks like this:

Change the code to be

 <img src="https://lorempixel.com/175/350" />

and you get

 

PlaceKitten

Want a site full of cute and cuddly kittens? Look no further! PlaceKitten is the site for you!

A quick and simple service for getting pictures of kittens for use as placeholders in your designs or code. Just put your image size (width & height) after our URL and you’ll get a placeholder.

For example,

https://placekitten.com/150/125

will produce the image

and

https://placekitten.com/400/100

will produce the image

and using the /g/ you will get a black and white (Grey)

https://placekitten.com/g/350/350

will produce the image

 

And finally, for something even more generic, there is…

Dummy Image

DummyImage.com is a little more complex but more flexible, DummyImage lets you do colors, gradients and announce the size.

For example https://dummyimage.com/350×300/f00/fff is

Let me know if you will be using one of these, or if you have others that you use. leave a comment and share your sources!