Loreum Picsum

Lorem Ipsum for Images

https://picsum.photos/

The website picsum.photos provides random images to be inserted into the html using the img src property.
img src="https://picsum.photos/200/300"

Options

Add your desired image size (width & height) after our URL, and you'll get a random image.

https://picsum.photos/200/300

Get a square image, just add the size.

https://picsum.photos/200

Get a specific image by adding /id/{image} to the start of the url.

https://picsum.photos/id/237/200/300

Get a list of all the images

https://picsum.photos/images

Get the same random image every time based on a seed, by adding /seed/{seed} to the start of the url.

https://picsum.photos/seed/picsum/200/300

Grayscale

https://picsum.photos/200/300?grayscale

Blur

https://picsum.photos/200/300/?blur

Specify file type

https://picsum.photos/200/300.jpg

Combine options

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"

Note:

There is an inconsistency with use of the / between the arguments. E.g. '/200/300?grayscale' vs '/200/300/?blur'

Opacity

Control opacity using css

Get Images

Sized Images

Add an image size in pixels (/width/height) after the URL, and you'll get a random image in that size.
img src="https://picsum.photos/200/300"

Square Images

Get a square image, just add one dimension.
img src="https://picsum.photos/200"

Non-Random Images

Get a specific image by adding /id/{image id #} to the start of the url.
It is easiest to just try a number, if you don't like it, try another.
img src="https://picsum.photos/id/247/200/300"

Repeated Images

Get the same random image every time based on a seed, by adding /seed/ to the start of the url.
img src="https://picsum.photos/seed/picsum/200/300">

File Type

Specify the file type by adding it to the end (.jpg, .png, etc).
img src="https://picsum.photos/200/300.jpg"

Modify Images

Grayscale

Grayscale is on or off. There is no in between.
img src="https://picsum.photos/200/300?grayscale"

Blur

The amount of blur can be set from 1 to 10.
img src="https://picsum.photos/200/300/?blur=1"

Blur

Blur set to 10.
img src="https://picsum.photos/200/300/?blur=10"

Combine option

Any combination of filters can be applied.
img src="https://picsum.photos/id/870/200/300?grayscale&blur=2"

Opacity

Opacity is controlled in the css

This text is behind the image
img { opacity: 0.5; }