Lorem Picsum 개발시 사용할 샘플 이미지 활용툴

개발시 임의의 텍스트 입력은 Lorem ipsum(로렘 입숨)을 많이 활용하고 있으나 이미지의 경우도 비슷하게 활용할 수 있는 사이트가 있어 소개하고자 합니다.

이미지가 필요한 경우 다양한 해상도 이미지를 만들어서 적용하는 것은 생산성이 많이 떨어집니다.

일반적으로 이미지 작업은 무료이미지 사이트에서 이미지를 가져와서 개별적으로 이미지 사이즈를 변경하여 저장하고 사용하지만
아래 사이트를 이용해보면 훨씬 쉽게 적용해 볼 수 있겠습니다.

 

1. Lorem Picsum 간편사용

필요한 높이와 폭을 URL에 지정하면  해당 사이즈의 샘플 이미지를 불러올 수 있습니다. 

예시)

https://picsum.photos/200/300

200 x 300 필셀 사이즈에 해당되는 임의의 이미지를 불러옵니다.  조회시 마다 다른 이미지가 표출됩니다.

 

정사각형 모양의 이미지는 1개  숫자만 입력하면 됩니다.

https://picsum.photos/200

 

2. 고정 이미지 사용

 

앞의 경우와 같이 매번 불러올 때마다 다른 이미지가 보여주는 것이 싫다면 아래와 같이 이미지 ID값을 사용하면 됩니다.

원하는 이미지를 찾고 해당 이미지 ID를 URL에 추가하면 됩니다.

 

입력형식 : https://picsum.photos/id/{image}/size 

 

예시)

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

이미지 갤러리 확인

Lorem Picsum

 

3. 임의의 고정 이미지 사용

 

불러올 때마다 매번 동일한 임의의 이미지를 보여줍니다.

 

입력형식 : https://picsum.photos/seed/{seed} 

 

예시)

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

 

4.  회색(Grayscale) 이미지 변환 사용

 

URL의 끝에 ?grayscale 을 추가하면 이미지가 회색으로 변경됩니다.

예시)

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

 

5.  이미지 블러(Blur) 처리

 

URL의 끝에 ?blur 를 추가하면 이미지에 블러가 적용됩니다. 블러는 수준을 1 ~ 10 까지 범위에서 조정할 수 있습니다.

예시)

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

 

6. 고급 기능

 

• 앞에서 사용한 옵션을 결합하여 사용

예시) image ID, grayscale 과 blur 같이 적용

https://picsum.photos/id/870/200/300?grayscale&blur=2

 

• 같은 크기의 여러개 임의의 이미지 적용

쿼리파라미터로 random 을 적용합니다. 

예시)

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

 

• 파일 확장자 .jpg, .webp 지정 가능

예시)

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

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