How to Use Beautiful Image Placeholders in Your Web Designs

One way to increase the aesthetic quality and realism of your design presentations is to use actual photos for your image placeholders instead of generic image placeholders.

A generic placeholder is uninspiring.

However, this can be a tedious process: You have to look for photos, download them, and then place them in a web server to be able to use them in your design mockups.

Is there an easier and quicker option for implementing image placeholders?

Yes, there is.

It’s called Unsplash It, a free web service that allows web designers to serve beautiful photos from the Unsplash archive. (Unsplash is a site that publishes spectacularly high-quality public domain images).

Let me quickly walk you through how to use this wonderful image placeholder service.

How It Works

To place an image in an HTML document, all you have to do is mention the width and height in the URL of Unsplash It and then use that as the src value of your image element.

The format is:

https://unsplash.it/[width]/[height]

It sounds complicated, but it’s really not.

Let’s say you wanted to generate a 600x400px image placeholder. This is the HTML markup you’d use:

<img src= "https://unsplash.it/600/400" />

And this is the image placeholder that’s generated:

You’re done: No FTP’ing photos to your web host, or using photos that might be copyrighted and might get you (and possibly your client) in trouble.

Black-and-White Image Placeholders

Unsplash It also gives you a couple of nifty image effects, such as the ability to serve black-and-white (also known as grayscale) image placeholders. You just add a /g/ (which presumably stands for “grayscale”) in the URL prior to your width/height values:

<img src= "https://unsplash.it/g/600/400" />

The above markup results in the following image placeholder:

Using a Specific Image Placeholder

You can also use a specific photo from the Unsplash It image archive if you want to control which photo shows up in your image placeholder.

Let’s say you wanted to use image #501 from their archive.

You’ll just need to add ?image=501 in the URL:

<img src= "https://unsplash.it/600/400?image=501" />

And here we are:

Unsplash It has more options such as blurring images, specifying cropping gravity, generating a list of images, and all that good stuff — head over to their site to explore the web service’s complete feature set.

If you enjoyed this quick how-to tutorial, you’ll like these articles too:

• How to use images effectively in websites
• Where to find the best free stock photos
• 17 sites for finding free public domain images
• 10 more websites for free stock photos
• Usability mistakes to avoid when using photos in your website