css html html image lorem picsum

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">
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

image not found

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">
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">
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">
Static Random Image 1 Static Random Image 2 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">
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">
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">
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.

image not found

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😊

Related Posts

Set-up Shadcn UI in Next JS

There are 100s of UI Libraries like Material UI, Chakra UI, Bootstrap, etc. while using these libraries we have to Install whole library and only then we can…

Sticky Navbar on Scroll with HTML CSS JS

You must have seen a secondary Navbar on websites that stick to the top when you scroll. These Navabars are getting popular nowadays if you also want to…

How To Use Tailwind CSS in Simple HTML projects

Tailwind is Utility First CSS Library used for rapidly developing web applications, it eliminates the need of writing pure CSS and has a utility class for almost every…

React Headroom Tutorend

Sticky/ Dynamic Navbar by Using react-headroom

You must have seen Navbars on some websites that hide and show when you scroll a little bit, that’s called Sticky or Dynamic Navbar. You can implement this…

10 Games To Learn CSS

Learning CSS can be very challenging because the journey to master CSS is very long and time-consuming, there are no shortcuts but still, we can make this journey…

Leave a Reply

Your email address will not be published. Required fields are marked *