무료 placeholder 이미지 URL (API) 사이트 정리

App이나 웹을 개발하다보면 placeholder에 더미(Dummy) 이미지가 필요한 경우가 있습니다.

이런 더미 랜덤 이미지를 제공해주는 사이트가 있어 정리해보았습니다.

---

Lorem Picsum

Lorem Picsum

 가장 유명한 사이트로 URL path에 이미지 사이즈, 흑백, 블러(Blur), 특정 이미지 등의 값을 추가함으로써 다양한 이미지를 불러올수 있습니다.

추가적으로 이미지 정보 및 목록을 JSON 형태로 받을수 있는 API도 제공하고 있어, 테스트 코드나 샘플 코드를 만들때 유용할것 같습니다.

 

1. 랜덤 이미지 URL
   /{width}/{height} 를 추가하여 이미지의 크기를 조정합니다.
   

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

    
2. 사각 이미지 URL
   /{size} 를 추가하여 가로,세로가 동일한 정사각형 이미지를 호출합니다.
   

   https://picsum.photos/200​

   
   
3. 특정 이미지 URL
   /id/{image_id} 이미지 id를 입력하여 특정 이미지를 호출합니다.
   모든 이미지의 id는 여기에서 확인하세요.
   

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

   
   
4. 캐시된 이미지 URL (Static Image)
   /seed/{seed} 임의의 키(seed)값을 추가하여 해당 이미지가 항상 표시합니다.
   

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

    
5. 흑백(Grayscale) 이미지 URL
   url query param에 ?grayscale 을 추가하여 흑백 이미지를 호출합니다.
   

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

    
6. Blur 이미지 URL
   url query param에 ?blur 을 추가하여 blur 이미지를 호출합니다.
   

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

   
    blur 효과를 1~10 사이로 설정도 가능합니다.
   

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

    
7. 특정 확장자 이미지 URL
   .jpg 와 같이 특정 확장자의 이미지를 호출할 수 있습니다.
   

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

    
8. 이미지 상세 정보 API
   /id/{image_id}/info 이미지의 상세 정보를 JSON형태로 수신하는 API
   

   https://picsum.photos/id/0/info​

   
    [Response]
   

   {
     "id": "0",
     "author": "Alejandro Escamilla",
     "width": 5616,
     "height": 3744,
     "url": "https://unsplash.com/...",
     "download_url": "https://picsum.photos/..."
   }​

    
9. 이미지 리스트 API
   /v2/list 이미지 목록을 JSON 형태로 수신하는 API
   param 으로 page와 limit를 설정하여 페이지와 개수를 설정할 수 있다.
   (limit를 추가하지 않는 경우, default는 개수는 30입니다.)
   

   https://picsum.photos/v2/list?page=2&limit=100​

   
   [Response]
   

   [
       {
           "id": "0",
           "author": "Alejandro Escamilla",
           "width": 5616,
           "height": 3744,
           "url": "https://unsplash.com/...",
           "download_url": "https://picsum.photos/..."
       }
   ]​

---

Pravatar

Pravatar - CC0 Avatar Placeholder

 사람 얼굴 이미지 URL을 제공을 해주는 사이트입니다.

사용자 프로필 사진의 더미 이미지로 사용하게 좋습니다.

 

1. 랜덤 이미지 URL
   /{size} 를 URL path에 추가하여 이미지 사이즈를 조절할 수 있습니다. (최대 사이즈는 1000입니다.)
   

   https://i.pravatar.cc/300​

    
2. 특정 이미지 URL
   URL query param에 ?img={image_id} 를 추가하여 특정 이미지를 호출할 수 있습니다.
   image_id 는 여기를 확인해주세요.
   

   https://i.pravatar.cc/150?img=3​

    
3. 캐시된 이미지 URL
   임의의 키(Unique ID)를 param에 ?u={Unique_Id} 를 추가하여 캐시된 이미지를 호출할 수 있습니다.
   

   https://i.pravatar.cc/150?u=me​

---

PlaceIMG

PlaceIMG | Easy FPO and Dummy Images for Any Project

 

사이즈, 카테고리, 필터를 설정하여 랜덤 이미지 URL을 제공합니다.

 

1. 랜덤 이미지 URL
   /{width}/{height} url path에 가로, 세로 값을 추가하여 이미지 사이즈 조절을 합니다.
   

   http://placeimg.com/640/480​

    
2. 카테고리(동물, 건축, 자연, 사람, 기술)별 이미지 URL
   /{category} 를 추가하여 해당 카테고리의 이미지를 호출합니다.
   동물 : animals / 건축 : arch / 자연 : nature / 사람 : people / 기술 : tech
   

   http://placeimg.com/640/480/animals​

    
3. 색감 적용 이미지 URL
   흑백, 세피아 필터가 적용된 이미지를 호출합니다.
   흑백 : grayscale / 세피아 : sepia
   

   http://placeimg.com/640/480/animals/grayscale​

---

LoremFlickr

LoremFlickr.com

임의의 주제와 사이즈를 추가하여 원하는 이미지 URL을 제공합니다.

 

1. 랜덤 이미지 URL
   /{width}/{height} 를 URL path에 추가하여 호출합니다.
   

   https://loremflickr.com/320/240​

    
2. 주제별 이미지 URL
   /{keyword} 임의의 키워드를 URL path에 추가하여 호출합니다.
   

   https://loremflickr.com/320/240/dog​

    
    여러개의 키워드도 입력 가능합니다.
   한국 또는 서울의 이미지를 호출할수 있습니다.
   

   https://loremflickr.com/320/240/korea,seoul

   
    한국과 서울의 이미지는 /all 붙여서 합니다.
   

   https://loremflickr.com/320/240/korea,seoul/all​

    
3.  색감 적용 이미지 URL
   /{filter} 를 추가하여 호출합니다.
   흑백 : g / 모자이크 : p / 빨강 : red / 파랑 : blue / 녹색 : green
   

   https://loremflickr.com/g/320/240/paris​

    
4. 이미지 상세 정보 API
   /json 으로 이미지의 상세 정보를 JSON 형태로 수신할수 있습니다.
   

   https://loremflickr.com/json/g/320/240/paris,girl/all​

   
   [Response]
   

   {
     "file": "https://loremflickr.com/cache/resized/65535_48626989026_354d6f708e_n_320_240_g.jpg",
     "license": "cc-nc-nd",
     "owner": "Cheese - @cheesecontact",
     "width": 320,
     "height": 240,
     "filter": "g",
     "tags": "paris,girl",
     "tagMode": "all"
   }​

---

 

 

이상, 정리를 마칩니다.

개발하시는데 도움이 되었으면 좋겠습니다.😄