Zenn
🖼️

Dynamic Random Images for Your Frontend Projects

に公開
Laravel
API
free
image
selfhost
tech

Dynamic Random Images for Your Frontend Projects – No More Stock Photo Hunting

Tired of searching for placeholder images? Need a fast, lightweight solution for your projects? Try this:

<img src="https://random.danielpetrica.com/api/random?size=small" alt="Random image" />

Example (broken up on here see original article):

Features

  • Free API – No API keys, no rate limits.
  • Optimized sizes (thumb, small, regular, full).
  • srcset support for responsive images.

Example with srcset (responsive loading):

<img
  loading="lazy"
  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"
  src="https://random.danielpetrica.com/api/random?format=full"
  alt="Dynamic responsive image"
  style="width: 100%; height: auto; border-radius: 0.5rem;"
>

Live demo:

How It Works

  • Not truly random: Caches a subset of images for performance.
  • Built with Laravel + PlanetScale for scalability.
  • Cache-busting: Append a unique query string (e.g., &1, &2) to get multiple images on one page:
<div style="display: flex; gap: 1rem;">
  <img src="https://random.danielpetrica.com/api/random?size=small&1" width="150" alt="Random 1" />
  <img src="https://random.danielpetrica.com/api/random?size=small&2" width="150" alt="Random 2" />
  <img src="https://random.danielpetrica.com/api/random?size=small&3" width="150" alt="Random 3" />
</div>

Demo:

Roadmap

  • Search by keyword (e.g., "mountains").
  • Custom width/height parameters.

Try it now: https://random.danielpetrica.com

No spam. Unsubscribe anytime.
Subscribe for updates on Docker, self-hosting, and dev tools!

Discussion