How To Generate Random Images By URL (Web Dev)

Published: 2 weeks ago

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.

Join Our Newsletter
Here's what you get: A once a week newsletter that contains original content, aggregated posts, WordPress deals, and anything else we think you'd like. We don't spam or sell your email address. Unsub at any time.
Ezoicreport this ad
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
IsoGroup- Web Dev/Design, WordPress and More

Affiliate Disclosure: Some links on this website are affiliate links. We make commissions for purchases made through those links.

We only recommend items/tools that we've personally used and like.

Full Disclosure | FTC Statement

Join Our Newsletter
Over 4,000 Design Lovers and Problem Solvers.

Author

Ezoicreport this ad
A relationship driven website creation company.

Connect

© ISOTROPIC, LLC 2016-2021
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram