HTML: How to get random stock images on your web page using unsplash.com

The website https://unsplash.com provides a free service that allows web developers to use random images of any size on their websites. All you have to do is place a URL like this in your HTML img tag, with the size of the image listed at the end of the URL. For example, this will produce a 200 by 200 pixel random image:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
https://source.unsplash.com/random/200x200
https://source.unsplash.com/random/200x200
https://source.unsplash.com/random/200x200

If you need a grid of images, and you want them all to be unique, specify different sizes for each image in the grid. For example, in this case, I changed them each by 1 pixel in width from the previous. (I can do this because the size of the images on my web page is being controlled by CSS.)

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<section class="portfolio">
<img src="https://source.unsplash.com/random/200x200" alt="">
<img src="https://source.unsplash.com/random/201x200" alt="">
<img src="https://source.unsplash.com/random/202x200" alt="">
<img src="https://source.unsplash.com/random/203x200" alt="">
<img src="https://source.unsplash.com/random/204x200" alt="">
<img src="https://source.unsplash.com/random/205x200" alt="">
<img src="https://source.unsplash.com/random/206x200" alt="">
<img src="https://source.unsplash.com/random/207x200" alt="">
<img src="https://source.unsplash.com/random/208x200" alt="">
</section>
<section class="portfolio"> <img src="https://source.unsplash.com/random/200x200" alt=""> <img src="https://source.unsplash.com/random/201x200" alt=""> <img src="https://source.unsplash.com/random/202x200" alt=""> <img src="https://source.unsplash.com/random/203x200" alt=""> <img src="https://source.unsplash.com/random/204x200" alt=""> <img src="https://source.unsplash.com/random/205x200" alt=""> <img src="https://source.unsplash.com/random/206x200" alt=""> <img src="https://source.unsplash.com/random/207x200" alt=""> <img src="https://source.unsplash.com/random/208x200" alt=""> </section>
<section class="portfolio">
   <img src="https://source.unsplash.com/random/200x200" alt="">
   <img src="https://source.unsplash.com/random/201x200" alt="">
   <img src="https://source.unsplash.com/random/202x200" alt="">
   <img src="https://source.unsplash.com/random/203x200" alt="">
   <img src="https://source.unsplash.com/random/204x200" alt="">
   <img src="https://source.unsplash.com/random/205x200" alt="">
   <img src="https://source.unsplash.com/random/206x200" alt="">
   <img src="https://source.unsplash.com/random/207x200" alt="">
   <img src="https://source.unsplash.com/random/208x200" alt="">
</section>

This works for other size images as well. For example:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
https://source.unsplash.com/random/780x200
https://source.unsplash.com/random/780x200
https://source.unsplash.com/random/780x200