home office, workstation, macbook air

Image Placeholders for your Everyday Life

When you’re working on a site, you’ll often need an idea of how images are going to behave on the page before you actually have your hands on the assets. It’s such a common dilemma that dozens of third-party microservices have sprung up to provide quick, customizable placeholder images in a pinch.

They’re simple to use, as well; just drop the provided URL where you’d normally put your image URL, and you’re off to the races. Best of all, most of them are free.

Here are some of my favorites, from simple and utilitarian to downright goofy.

Utilitarian: place-hold.it

This is the OG placeholder service, and the best one to use if you want simple, professional, no-nonsense placeholders to display while you’re proofing or showcasing your work. There’s not much glitz here, but it gets the job done quite handily when you want to come across as “professional”.

It’s quite easy to use as well. Simply use the URL appended with the desired options. For example, using

<img src="https://place-hold.it/350x100/green" alt="I'm a Placeholder" />

will produce something like:

A full list of available options, plus a handy generator, is available at their website.

Pretty: Lorem Picsum

Of course, you’ll often want something a little more visually appealing than a drab grey rectangle. My favorite service for these cases is Lorem Picsum, which draws photos from the free crowd-sourced stock image site Unsplash.

Usage is very much the same as above, where you can specify height and width via the URL:

https://picsum.photos/400/200

However, there are a number of nifty features that make working with Lorem Picsum a joy. For example, you can get a random image, but specify a “seed” value so that you get the same one every time.

https://picsum.photos/seed/SomeRandomSeed/400/200

So even though the image was selected at “random”, we always get this lovely photo of the Brooklyn Bridge. This is especially handy if you want to seed a database with a large set of random test data that uses images, but you want to make sure the images are the same each time you access a particular one.

An example of such a use case (ripped directly from the user avatar seeder on one of my applications) might look like this:

sprintf("https://picsum.photos/seed/%s/300", sha1(time() + rand(1, 999999)))

Here we’re simply taking the current timestamp, adding a random integer (to avoid duplicates since many records will be processed on the same second), and hashing it via SHA1 to get a completely random seed. This particular example is drawn from PHP (and, incidentally, C), but you can apply the same concept to your language of choice and its equivalent string-handling function.

Now, I can generate hundreds of users, each with a unique avatar image that stays the same no matter how many times the page is reloaded. Handy!

Cute: PlaceKitten

Ok, now we’re getting down to business: this one functions very similarly to the others we’ve seen so far, but do the other ones deliver pictures of adorable kittens? Maybe sometimes, but clearly not enough.

http://placekitten.com/400/300
pspspspsps

Oh, and if you prepend the sizes with “/g/”, you get a greyscale image, e.g.:

http://placekitten.com/g/400/300
There, I’ve taught you something useful, this isn’t just an excuse to show you pictures of kittens at all.

Most Excellent: PlaceKeanu

Ok, yes, now we’re starting to move into the realm of absurdity. Yes, exactly as it sounds, this will drop in a placeholder image featuring acclaimed actor Keanu Reeves.

But in all fairness, I’ve actually found this useful for generating user avatars as well. Unlike my other go-to, Lorem Picsum (see above), you’re guaranteed to get a photo of, well, an actual person. PlaceKeanu also caches the image it serves you locally, meaning that it will be the same from session-to-session for up to a full day. This is often as handy as Lorem Picsum’s seed function, and you don’t have to do anything, but of course you have less control over it.

You can even specify whether you want to only see photos of “young” Keanu by passing the ‘y’ option, just in case your audience will be more familiar with Bill & Ted than Cyberpunk 2077.

https://placekeanu.com/500/300/y

…just don’t mess with his dog. Speaking of…

Goodest Boy: PlaceCorgi

Placeholder images. Of Corgis. I really don’t think I need to sell this one any further if I’m completely honest.

http://placecorgi.com/300/400

Should you be so inclined, there’s also a JavaScript implementation of this particular image service, the downside being that it relies on jQuery as a dependency which may be a nonstarter for some.

…on the other hand, corgis.

(Note: this one is now causing a mixed-content warning on my site, and sadly may not work if your application is served over HTTPS. Faked it for now, keeping it for posterity and corgis.)

Wrapping Up

Those are the placeholders I use on a day-to-day basis, but as I said before, there have got to be dozens to choose from nowadays. What’s your favorite? Feel free to drop me a comment below!

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top