Image Credit: Picsum

Table of Contents

Using Picums to simply for placeholder image needs

Images make the website loks better in most cases. Most people say it will make the website “pop”, it will feel right; whatever that means. But if you want images to make your webdesing feel right. Picsum got you coverd. It even has those nice things like gserving pictures in different sizes, blur, grayscale and a whole lot of features.

What is Picsum?

Picsum is “The Lorem Ipsum for phots”. It offers a collection of high-quality, randomly generated images that you can use freely in your website, demos, mocks or anywhere.

Why Use Pravatar?

1. Fast Usage

Picsum saves you time and the headache of deciding which image you want, resizing it, and changing the formart. Just using a URL with some tinny parameters all of this can be achieved. And now you have more time to do other boring or exciting things.

2. Built-in Image Processing

Picsum gives you the power to manipulate the images straight through the URL. No other fancy things needed. Want it grayscale (balck and white), want it blurred? Well Picsum got you covered. You do not have to know how to edit images, just do it using Picsum’s url.

3. Different sizes (Responsiveness)

One of the challenging parts about web design is testing different sizes and aspect rations. Well that pain is now gone thanks to Picsum. Using the params in the URL, you now have the power to request for any widths and heights you want for your pictures. This will allow you to test those different aspect rations and screen sizes for your sections.

How to Use Picsum

Using Picusm in your projects is as easy a writing a url.

Step 1: Determine your dimensions

Decide your image aspect ration and how large you want your images to be. Picsum uses width/height format in their url. If you only pass one number, the image will come back as a square image.

Step 2: Choose your Advanced Parameters

Picsum has multiple params to customize your images. Here is the list:

• Specific Image: Get a specific image by adding /id/{image} to the start of the url. e.g. https://picsum.photos/id/237/200/300
• Static Random Image: Get the same random image every time based on a seed, by adding /seed/{seed} to the start of the url. e.g. https://picsum.photos/seed/picsum/200/300
• Grayscale: Get a grayscale image by appending ?grayscale to the end of the url. e.g. https://picsum.photos/200/300?grayscale
• Blur: Get a blurred image by appending ?blur to the end of the url. e.g. https://picsum.photos/200/300/?blur
  • You can adjust the amount of blur by providing a number between 1 and 10. e.g. https://picsum.photos/200/300/?blur=2
• Advanced Usage: You may combine any of the options above.

  • For example, to get a specific image that is grayscale and blurred. e.g. https://picsum.photos/id/870/200/300?grayscale&blur=2

  • To request multiple images of the same size in your browser, add the random query param to prevent the images from being cached:

    <img src="https://picsum.photos/200/300?random=1"> <img src="https://picsum.photos/200/300?random=2">

  • If you need a file ending, you can add .jpg to the end of the url. e.g. https://picsum.photos/200/300.jpg

  • To get an image in the WebP format, you can add .webp to the end of the url. e.g. https://picsum.photos/200/300.webp

Step 3: Add the URL to Your Project

In your project, insert the Pictusm URL as the source of your imgaes. I will provide HTML and Markdown examples.

![Gray Scale Blured Image"](https://picsum.photos/900/600?grayscale&blur=3)

<img src="https://picsum.photos/900/600?grayscale&blur=3" alt="Gray Scale Blured Image" />

Nothing complicated, just these simple steps and you are using Picsum for your projects

Conclusion

Do we really need a complutions. We all now know Picsum is a good tool for your projects during the building and desinging phase. It assist us by giving us access to a library of high-resolution images and instat image customization using the URL.

No more using gray boxes or search for photos manually. We will just use Picsum and thats it.