Placeholder Images For Your Website using Picsum

When we are developing or designing our website, we may need to find some placeholder images to put on our website until the actual image is ready.

There are several ways to get placeholder images, like downloading the image from any website or creating our own placeholder image.

But there is a website or call it API which you can use to get placeholder images of any size, aspect ratio, color, category, and many more options.

It is called Lorem Picsum and its website URL is https://picsum.photos/

#Lorem Picsum

Lorem Picsum or Picsum Photos is a simple-to-use, royalty-free, and free-of-cost images API service which you can use to fetch and use random or placeholder images on your websites.

Following are the features of Lorem Picsum

#1. Random Images

You can fetch a random image of a specific size by just writing the API URL postfixed with size of the image like the following code


<img src="https://picsum.photos/300/200" alt="Random Image">

The above code fetches a random image of size 300 width X 200 height in pixels every time we refresh the page.

If you want to fetch a square image of 300X300 pass only the first value like this https://picsum.photos/300

#2. Fetch Specific Image

Earlier we were fetching random images and it would change every time we refresh our webpage, so there’s a way to fetch the same image every time by using ID in the API call.

Each image on this platform has an ID you can find the id’s of images and see all the images available on this URL https://picsum.photos/images

<img src="https://picsum.photos/id/55/300/200" alt="Random Image">

The above image will not change no matter how many times you refresh this page because 55 is the id of the image shown above.

#3. Static Random Image

If you want a random image to be consistent on your page you can use the seed in API call.

The seed value ensures that the same image is returned every time the page is loaded, maintaining consistency while still appearing random.

You can type any string as a seed for example.

To display a static random image with dimensions of 300×200 pixels and a seed value of ‘myseed’, use the following HTML code:


<img src="https://picsum.photos/seed/myseed/300/200" alt="Static Random Image">

You can replace myseed with any string you like.

You can use multiple random static images by passing different seed values like this

<img src="https://picsum.photos/seed/seed1/300/200" alt="Static Random Image 1">
<img src="https://picsum.photos/seed/seed2/300/200" alt="Static Random Image 2">
<img src="https://picsum.photos/seed/seed3/300/200" alt="Static Random Image 3">

You can notice if I pass the same seed value in 1 and 2 the same image will be displayed.

#3. Grayscale Image

You can request grayscale images using ?grayscale in URL

<img src="https://picsum.photos/300/200?grayscale" alt="Grayscale Image">

#4. Blurred Image

You can request blurred images by passing the blur effect value in a URL like blur=5, this will return the image with a blur effect.

<img src="https://picsum.photos/300/200?blur=5" alt="Blurred Image">

#5. Grayscale and blurred

If you want both blurred and grayscale effects in the same image, that is also possible with &, you can join both grayscale and blur parameters in the same URL

<img src="https://picsum.photos/300/200?grayscale&blur=5" alt="Grayscale and Blurred Image">

#6. Fetching a list of Image

If you want a list or array of images to iteratively show images on your website, you can utilize the fetch method in JavaScript to fetch a list of images and it will return a JSON response with an array of images.

Now you can do whatever you want to do with the response.

Below is the example code showing how to fetch a list of images from Lorem Picsum or Picsum Photos.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Picsum Image List</title>
</head>
<body>
    <div id="image-container"></div>

    <script>
        async function fetchImages() {
            const response = await fetch('https://picsum.photos/v2/list?page=1&limit=2');
            const images = await response.json();
            
            const imageContainer = document.getElementById('image-container');
            
            images.forEach(image => {
                const imgElement = document.createElement('img');
                imgElement.src = `https://picsum.photos/id/${image.id}/300/200`;
                imgElement.alt = image.author;
                imgElement.style.margin = '10px';
                
                imageContainer.appendChild(imgElement);
            });
        }

        fetchImages();
    </script>
</body>
</html>

You can set the limit in the request and this will return only two images, but if you want 10 images then pass 10 as below.

fetch('https://picsum.photos/v2/list?page=1&limit=10');

#7. Getting Image details

You can request all the details of a specific image with an id or seed value.

https://picsum.photos/id/0/info
https://picsum.photos/seed/picsum/info

and this will return a response in the following format

{
        "id": "0",
        "author": "Alejandro Escamilla",
        "width": 5616,
        "height": 3744,
        "url": "https://unsplash.com/...",
        "download_url": "https://picsum.photos/..."
}

I hope you learn something from this tutorial, Happy Coding😊