Use https://random.danielpetrica.com/api/random as the photo source, and you're ready. https://random.danielpetrica.com/api/random Do you want an example? Look at the photo underneath. On my website, this photo will change with every page reload. You don't believe me? Try reloading the page several times to check it yourself. 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 imagefull: returns an optimized version of the full-size imagesmall: returns an image of max width 400pxthumb: returns an image of max width 200pxregular: returns an image of max size 1080pxsmall_s3: returns a link from s3 if you need it raw: returns the raw image full: returns an optimized version of the full-size image small: returns an image of max width 400px thumb: returns an image of max width 200px regular: returns an image of max size 1080px small_s3: returns a link from s3 if you need it Each size 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;" <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, it is not completely random. Due to the database structure, I'm keeping a limited amount of photo URLs in memory and returning a random image from there each time. These results are refreshed periodically (the number of results and the time they are kept may change). Why am I 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 playground 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 below. <div style="width: 100%; display: flex; justify-content: space-between">
  <img src="https://random.danielpetrica.com/api/random?size=small&1" style="width: 150px" alt="A random image different from the others" loading="lazy"/>
  <img src="https://random.danielpetrica.com/api/random?size=small&2" style="width: 150px" alt="A random image different from the others" loading="lazy"/>
  <img src="https://random.danielpetrica.com/api/random?size=small&3" style="width: 150px" alt="A random image different from the others" loading="lazy"/>
  <img src="https://random.danielpetrica.com/api/random?size=small&4" style="width: 150px" alt="A random image different from the others" loading="lazy"/>
  <img src="https://random.danielpetrica.com/api/random?size=small&5" style="width: 150px" alt="A random image different from the others" loading="lazy"/>
</div> <div style="width: 100%; display: flex; justify-content: space-between">
  <img src="https://random.danielpetrica.com/api/random?size=small&1" style="width: 150px" alt="A random image different from the others" loading="lazy"/>
  <img src="https://random.danielpetrica.com/api/random?size=small&2" style="width: 150px" alt="A random image different from the others" loading="lazy"/>
  <img src="https://random.danielpetrica.com/api/random?size=small&3" style="width: 150px" alt="A random image different from the others" loading="lazy"/>
  <img src="https://random.danielpetrica.com/api/random?size=small&4" style="width: 150px" alt="A random image different from the others" loading="lazy"/>
  <img src="https://random.danielpetrica.com/api/random?size=small&5" style="width: 150px" alt="A random image different from the others" loading="lazy"/>
</div> 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 finding photos for the city feature. I also want to add support for a custom width parameter so you can personalize the experience for your users. Please subscribe to my site if you want to stay updated. Feature photo by Hal Gatewood/Unsplash Feature photo by Hal Gatewood Hal Gatewood / Unsplash Unsplash

Unsplash

Building a Production-Ready Laravel Stack with Traefik and FrankenPHP

You Should Use This for Your Next Project: Random Image API

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

An AI-Powered Workflow Automation Guide: How You Can Self-Host n8n with Docker Compose and Traefik

100 Days of AI Day 1: From Newsletter to Podcast, Leveraging AI for Audio Transformation

10 Threats to an Open API Ecosystem

10 Indications That You Should Invest in Automation Via APIs

10 Best Practices for Securing Your API

The Noonification: Getting Your API Into Production (10/28/2022)

An AI-Powered Workflow Automation Guide: How You Can Self-Host n8n with Docker Compose and Traefik

100 Days of AI Day 1: From Newsletter to Podcast, Leveraging AI for Audio Transformation

10 Threats to an Open API Ecosystem

10 Indications That You Should Invest in Automation Via APIs

10 Best Practices for Securing Your API

The Noonification: Getting Your API Into Production (10/28/2022)

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps