isotropic-2022
Share
Blog
Search
Menu

How To Generate Random Images By URL (Web Dev)

By James LePage
 on June 7, 2021
Last modified on January 6th, 2022

How To Generate Random Images By URL (Web Dev)

By James LePage
 on June 7, 2021
Last modified on January 6th, 2022

This article will cover a few ways to automatically generate random images by using URLs. This is perfect for placeholders when developing websites.

The Question: "I would like to have a random image, each time. Even if I call for a random image ten times on one webpage. Is there a way that this is possible?"

For Standard Images

To insert standard image placeholders, where there's a random one for each instance, we use the Unsplash Source API. This is the best Random Images API we've found.

The Source is part of Unsplash, which is site that lets you search for high-quality images to use in your projects. All are royalty free.

The API makes it easy to find random images, in the form of a URL, which makes it really easy to add to any webpage using the <picture> or <img> element in HTML.

Here's how we use it.

  • The base url is https://source.unsplash.com/random.
  • After this url, you can add image dimensions via /800x800.
  • Finally, for more than one random image on a webpage, simply add a parameter like so: ?img=1

The final URL for the img src which will return a random image from the Unsplash collection looks something like this:

https://source.unsplash.com/random/800x800/?img=1

Here's a live example (refresh the page, and new random images will show):

For Portraits

The Unsplash Source API is quite robust, and allows us to filter down to search terms or even manual collections, selecting a random image from those parameters.

This is easy, just add the keyword portrait to the end of the Unsplash Random Image API, like so:

https://source.unsplash.com/1600x900/?portrait

For Headshots

Instead of using the Unsplash Source, which is still a great option for inserting random headshots into your web design project, we use another tool for this.

This is created by the same company behind Icons8, and is a random generator of faces, called Generated Photos. It uses AI to create people who don't exist, and is a great option for creating a ton of realistic placeholders for accounts, user pages, and anything that needs faces.

An example:

https://generated.photos/face-generator

If you have a low face count requirement, you can simply make one at a time, download, and randomly place into your web or app project.

But, for larger requirements, there's a low cost REST API what allows you to add Generated Photos to your project dynamically. It starts at $0.006/call.

Subscribe & Share
If you liked this content, subscribe for our monthly roundup of WordPress news, website inspiration, exclusive deals and interesting articles.
Unsubscribe at any time. We do not spam and will never sell or share your email.
Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Aryan Jain
Aryan Jain
6 months ago

Thank you so much!

Article By
James LePage
Contributors/Editors
notloggedin
James LePage is the founder of Isotropic Design, a digital agency that builds WordPress websites. I read, write and design constantly!
We're looking for new authors. Explore Isotropic Jobs.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram