A random image API for your next project

Did you have to make a new frontend project in the past? Was it image heavy? Do you hate searching for photos to fill it up? Do you want a fast solution for that?

Use https://random.danielpetrica.com/api/random as the photo source and you're ready.

Do you want and example? Look at the photo underneath, on the website this photo will change with every page reload.

You don't believe me? Try reloading the page several times to check it yourself.

The service is hosted at https://random.danielpetrica.com and is built with the Laravel framework, and it utilizes the wonderful planetscale db for storage.

Want to make a better experience for your users? Use the advanced srcset option in html to make the photo dynamic together with these sizes as a "format" query param:

• raw: returns the raw image
• full: returns an optimized version of the full size image
• small: returns a image of max width 400px
• thumb: returns a image of max width 200px
• regular: returns a image of max size 1080px
• small_s3: returns a link from s3 if you need it

Each sizes points to a different size version of the same image, so your browser can choose the best image for the screen. Here's an example of how to use it with srcset:

<img 
  loading="lazy" 
  class="" 
  srcset="
  https://random.danielpetrica.com/api/random?format=thumb 200w,
  https://random.danielpetrica.com/api/random?format=small 400w, 
  https://random.danielpetrica.com/api/random?format=regular 600w" 
  sizes="(max-width: 300px) 200px,(max-width: 600px) 400px, 600px" alt=""
  src=" https://random.danielpetrica.com/api/random?format=full"
  style="background-color: #0c260c; object-fit: cover; border-radius: .5rem; width: 100%; heigth: 200px;"
  >

Here's the result of it:

How does it work?

To be completely honest, is not completely random. Due to database structure, I'm keeping a limited amount of photos URLs in memory and returning a random image from there each time. These results are refreshed periodically (the amount of results and the time they are kept may change).

Why I'm building it?

Just because it looks like a nice project to make. Playing with these amounts of data and optimizing code for speed is always a good playing lab for me. Also, these were something I was missing for my frontend tasks, so I'm the first user of it.

Are there any limitations?

Apart from the above-mentioned almost random experience, the browser sees the same link and loads it only once, as you can see below.

If you want multiple different images on the same page, you can add a query string to the url, so your browser doesn't cache anything like bellow.

I assume you're a developer, so I assume you can inspect the code and see how I've embedded them to make sure they're different. But it's some very simple code.

Future plans

I'm also working on a search by term and find photos for city feature.

I also want to add support for custom width parameter so you can custom personalize the experience for your users.

Please subscribe to my site if you want to stay updated.