Press "Enter" to skip to content

Embed unsplash images fast

If you are looking for high quality and royalty-free stock photo’s, there is at the moment no better source than Unsplash. They have over 500,000 photo’s in stock and are still adding more. We are going to cover how to quickly embed and use images from Unsplash. But first, why use these images?

The images on offer are high-quality stock images and they are free for you to use in almost every circumstance. The Unsplash license to use these images is similar to a CC-0 License. The big difference between a CC-0 and unsplash license is that the later prohibits starting a service similar to unsplash using their images.

This license does not include the right to compile photos from Unsplash to replicate a similar or competing service.

I first heard of Unsplash thru the use of Sketch. Where the integration of unsplash within sketch means that you can rapidly prototype a wireframe to complete design including images. (I’m not sure now but it might have been a plugin by Invision that adds support to sketch).

Unsplash has an official API for when you want to use the images on high traffic websites. If you want to quickly embed an image, unsplash offers a way to do that as well. Meet source by Unsplash.

Use cases where source might come in handy:

  • You need a temporary placeholder image
  • During a hackaton
  • You have no place to host the image

Getting a specific photo

When you browse the Unsplash site and have found an image you want to embed you can do that with the following parameters:

https://source.unsplash.com/{PHOTO ID}/{WIDTHxHEIGHT}

To get the photo ID, you can check the address bar when you are watching the image. The ID follows after https://unsplash.com/photos/. See the image below. Optional you can specify a width and a height.

the unsplash photo id is in the address bar

A screenshot of the Unsplash website showing that the image id is in the address bar.

Getting a random photo

To get a random image there are two options: you can search for a photo in the curated collection, in which case you use the featured route like so:https://source.unsplash.com/featured/?{KEYWORD}. Or you can search all images just by keyword. In that case, you need to specify the dimensions as a route, like this: https://source.unsplash.com/1600x900/?{KEYWORD}. If you want to search for more than one keyword you can comma separate them:  .../?{KEYWORD},{KEYWORD}.

 

Random image from a collection on unsplash, this collection is themed woodcutter.

A random image from a collection on Unsplash.

Random from a collection

This is, in my opinion, the best use case for Unsplash source. You can create your own collections, say portraits, outdoor activities etc and link to these to give your (demo) site coherence and an authentic feel. Be sure to not set your collections to private if you want to link to them. Also note that in the URL to a collection, for example: https://unsplash.com/collections/3115242/woodcutter, collections is plural. When you want an image from a collection, collection in the path is singular, https://source.unsplash.com/collection/3115242/woodcutter.

That’s it

These are, I think, the most useful functions that Unsplash source has to offer, but there are more. Be sure to check them out. Alternatively, for more advanced functionality, check out their API docs. Let me know how you use Unsplash and if I missed anything.

Be First to Comment

Leave a Reply

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