Snapkit Logo

이미지 변환 API#

Snapkit의 이미지 변환 API를 사용하여 URL 파라미터로 실시간 이미지 변환을 수행하세요. Sharp↗ 라이브러리 기반의 고성능 처리와 CloudFront CDN을 통해 전세계 어디서나 빠른 이미지 전송을 제공합니다.

빠른 시작#

기본 사용법#

업로드된 이미지 URL에 쿼리 파라미터를 추가하여 실시간으로 변환할 수 있습니다:

GET https://{organization}-cdn.snapkit.studio
  /{project}
  /{path}
  /{filename}
  ?transform=w:800,h:600,fit:cover,flip,grayscale,dpr:2

URL 구성 요소:

  • {organization}: 조직명 (예: acme-corp)
  • {project}: 프로젝트 이름
  • {path}: 폴더 경로
  • {filename}: 이미지 파일명
  • 쿼리 파라미터: 변환 옵션 (w, h, fit 등)

주요 특징#

  • 실시간 변환: URL 파라미터로 즉시 이미지 변환 실행
  • CDN 캐싱: 첫 변환 후 CloudFront에서 빠른 이미지 전송
  • 자동 최적화: 브라우저에 맞는 최적 포맷 자동 선택
  • 고해상도 지원: DPR(Device Pixel Ratio) 기반 반응형 이미지 생성

변환 파라미터#

크기 및 레이아웃#

이미지 크기와 레이아웃을 제어하는 파라미터:

파라미터타입설명
wnumber너비 (픽셀, 1-16384)
hnumber높이 (픽셀, 1-16384)
fitstring

맞춤 방식: contain, cover, fill, inside, outside

dprnumberDevice Pixel Ratio (1.0-4.0)

크기 및 레이아웃 자세히 보기 →

시각 효과#

이미지에 시각 효과 적용:

파라미터타입설명
rotationnumber회전 각도 (-360 ~ 360도)
blurnumber블러 강도 (0-20)
grayscaleboolean흑백 변환
flipboolean상하 뒤집기
flopboolean좌우 뒤집기

시각 효과 자세히 보기 →

영역 및 출력#

특정 영역 추출 및 출력 형식 제어:

파라미터타입설명
extractstring

영역 추출: x-y-width-height 형식

formatstring

출력 포맷: jpeg, png, webp, avif, auto 등

qualitynumber이미지 품질 (1-100)

영역 및 출력 자세히 보기 →

애니메이션#

애니메이션 이미지 최적화:

파라미터타입설명
fpsnumber프레임 레이트 (1-60, animated-webp 전용)
frameRangestring

프레임 범위: start-end (animated-webp 전용)

애니메이션 자세히 보기 →

다운로드 제어#

이미지 다운로드 방식 제어:

파라미터타입설명
dlstring

다운로드 제어: dl 또는 dl:custom-name

다운로드 제어 자세히 보기 →

간단한 예시#

기본 크기 조정#

?transform=w:800,h:600,fit:cover

레티나 디스플레이용 고해상도#

?transform=w:800,dpr:2.0,format:auto

효과가 적용된 썸네일#

?transform=w:200,h:200,fit:cover,grayscale,blur:2

모바일 최적화#

?transform=w:375,dpr:3,format:auto,fit:cover

변환 처리 순서#

변환은 다음 순서로 처리됩니다:

  1. Extract - 영역 추출
  2. Resize - 크기 조정 (DPR 적용)
  3. Rotation - 이미지 회전
  4. Flip/Flop - 뒤집기 변환
  5. Blur - 블러 효과
  6. Grayscale - 흑백 변환
  7. Format - 포맷 변환

성능 및 캐싱#

CloudFront CDN#

  • 첫 번째 요청: 변환 및 캐싱
  • 이후 요청: 캐시에서 즉시 전송
  • 캐시 기간: 1년

포맷 자동 선택#

format:auto 사용 시, 브라우저 기능에 따라 최적 포맷이 자동 선택됩니다:

  • AVIF 지원 브라우저: AVIF 포맷
  • WebP 지원 브라우저: WebP 포맷
  • 일반 브라우저: JPEG/PNG 포맷

다음 단계#