Using Lorem Picsum in your projects
First of all, if you don’t understand the title, you might not be very techie because “Lorem Ipsum” is basically used in design projects to fill out the information that you don’t have yet but will eventually get; when developing in frontend and you need to complete information about someone or for testing, use “Lorem Ipsum” text to fill out.
The first thing you need to do is to find a lorem ipsum generator, here is an example from https://www.lipsum.com/.
Now with images
The same happens with images when it is necessary to insert an image as a “placeholder”, meaning to leave that space with any random picture, which is where the page https://picsum.photos/ comes in.
Basically, all you need to do is to find an image for your project or presentation or whatever you are doing. You can find lots of pictures from this link https://picsum.photos/images that you can customize a little bit.
Let’s say you’ve already found the photo, which is the one below:
https://picsum.photos/id/2/500/350
I’ll explain the URL
To start, you should always write https://picsum.photos/, then add the parameter id/ to let the page know that you want a specific photo, followed by the parameter 2/ to indicate that you would like the photo number two or the picture with the id 2, then write the dimensions, 500 for the width and 350 for the height, if you need something different you can try the combination that you like the most, for example, in my case I want to try the following combination:
https://picsum.photos/id/2/800/250
So, you can try various resolutions to make the image fit your project with a good resolution.
Can you customize it?
That’s right, each image has a couple more parameters, so you can customize the picture to your liking.
Blur
You can blur your image to your liking so that it does not catch the attention of your project by adding the parameter ?blur=1 or ?blur=10 at the end of your URL. (You can choose the number you want from 1 to 10).
https://picsum.photos/id/2/800/250?blur=1
As you can see in this image, the blur filter is barely perceptible since it is the lowest.
But in the next photo, it does change wonderfully by applying the blur filter to 5.
https://picsum.photos/id/2/800/250?blur=5
It already looks different, don’t you think so?
Well, we can play with the blur filter from 1 to 10.
And that’s it?
No way! You can apply another filter called greyscale to your photos at the end of your URL.
https://picsum.photos/id/2/800/250?grayscale
Wow! It looks great, right?
And finally, you can also add both parameters at once to your image.
https://picsum.photos/id/2/800/250?grayscale&blur=3
And voilà! A super professional image for your projects or presentations, to which you can change the ID number at your whim and the measures you need for your projects, applying filters to give it a more professional look in a couple of instructions in the URL.
If you have any questions, you can comment here or send me a tweet at @johntzulik. If you know of any other tools, I would like you to share them with me as well.
Clapping costs nothing. :D
