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:
Related Resources
- 22 Beautifully Black Web Designs for Inspiration
- 30 Creative Resume Designs for Inspiration
- 28 Beautiful Debossed Business Cards for Inspiration
- Onboarding Techniques and Examples for Your New Users
- 30 Beautiful Packaging Designs for Inspiration
- 30 Web Designs That Have Beautiful Illustrations
- 30 Beautiful Foil Stamping Examples
- 20 Visually Inspiring Tumblr Blogs for Designers
- 18 Great Websites for Creative Inspiration
Resources by Industry
- Web Design for Excavation Companies: Top 5 Tips (With Examples!)
- 5 Web Design Tips for Fence Installers
- 5 Simple and Successful Web Design Tips for Auto Parts Retailers
- Tips for Medical Website Designs
- Medical Website Design from an Award Winning Agency
- Top 10 Effective Web Design Tips for Auto Service Centers
- Web Design for Renewable Energy: Tips for a Site That Shines
- Insurance Website Design Services
- 5 Web Design Tips for Fertility Clinics
How is your website’s SEO?
Use our free tool to get your score calculated in under 60 seconds.
Continue Reading
Get posts by email
Join 200,000 marketing managers and subscribe to Revenue Weekly!
"*" indicates required fields
WebFX Careers
Join our mission to provide industry-leading digital marketing services to businesses around the globe - all while building your personal knowledge and growing as an individual.