Snapkit Logo

사용 사례#

실제 시나리오를 탐색하고 이미지 변환을 효과적으로 적용하는 방법을 배워보세요.

웹사이트 히어로 이미지#

요구사항#

  • 데스크탑 디스플레이용 고해상도
  • 반응형 크기 조정
  • 빠른 로딩과 최신 포맷

해결방법#

?transform=w:1920,h:1080,dpr:2.0,format:auto,fit:cover

결과:

  • 실제 크기: 3840x2160 (DPR 2.0 적용)
  • 포맷: AVIF/WebP (브라우저별)
  • 레티나 화면에서 선명한 표시

썸네일 생성#

요구사항#

  • 정사각형 비율 (1:1)
  • 빠른 로딩을 위한 작은 파일 크기
  • 그리드 전체에서 일관된 크기

해결방법#

?transform=w:200,h:200,fit:cover,dpr:2.0,format:webp

결과:

  • 그리드 레이아웃용 완벽한 정사각형
  • 실제 크기: 400x400 (DPR 2.0 적용)
  • 크기 최적화를 위한 WebP 포맷

제품 이미지#

요구사항#

  • 비율 유지
  • 전체 제품 표시
  • 일관된 배경

해결방법#

?transform=w:600,h:600,fit:contain,format:auto

사용 사례:

  • 이커머스 제품 목록
  • 카탈로그 전체에서 일관된 크기
  • 제품 자르기 없음

블로그 포스트 대표 이미지#

요구사항#

  • 특정 비율 (16:9)
  • 웹 최적화
  • 반응형

해결방법#

데스크탑: ?transform=w:1200,h:675,fit:cover,format:webp,quality:85

모바일: ?transform=w:600,h:338,fit:cover,format:webp,quality:85

프로필 사진#

요구사항#

  • 원형 표시 (1:1)
  • 다양한 크기에서 고품질
  • 플랫폼 전체에서 일관성

해결방법#

표준: ?transform=w:128,h:128,fit:cover,dpr:2.0

큰 크기: ?transform=w:256,h:256,fit:cover,dpr:2.0

소셜 미디어 공유#

요구사항#

  • OG 이미지 크기 (1200x630)
  • 최적화된 파일 크기
  • 빠른 전송

해결방법#

?transform=w:1200,h:630,fit:cover,format:jpeg,quality:85

플랫폼:

  • Facebook, Twitter, LinkedIn
  • WhatsApp, Slack 미리보기

갤러리 / 포트폴리오#

요구사항#

  • 예술적 효과
  • 일관된 스타일링
  • 다양한 크기

해결방법#

흑백 예술 효과: ?transform=w:800,grayscale,format:webp

배경 블러: ?transform=w:400,h:300,blur:5,format:webp

회전 예술 효과: ?transform=w:600,rotation:15,format:webp

모바일 앱 에셋#

요구사항#

  • 여러 해상도 (1x, 2x, 3x)
  • 대역폭 최적화
  • 빠른 로딩

해결방법#

1x (표준): ?transform=w:375,dpr:1.0,format:webp

2x (레티나): ?transform=w:375,dpr:2.0,format:webp

3x (고급): ?transform=w:375,dpr:3.0,format:webp

배경 이미지#

요구사항#

  • 텍스트 오버레이를 위한 블러
  • 큰 크기
  • 최적화된 품질

해결방법#

?transform=w:1920,h:1080,blur:10,format:webp,quality:80

사용 사례:

  • 텍스트가 있는 히어로 섹션
  • 카드 배경
  • 랜딩 페이지

이메일 뉴스레터 이미지#

요구사항#

  • 이메일 클라이언트용 특정 크기
  • 작은 크기에서도 좋은 품질
  • 안정적인 포맷 지원

해결방법#

?transform=w:600,h:400,fit:cover,format:jpeg,quality:85

JPEG를 사용하는 이유:

  • 모든 이메일 클라이언트 지원
  • 예측 가능한 렌더링
  • PNG보다 작은 파일 크기

GIF 애니메이션 최적화#

요구사항#

  • 파일 크기 축소
  • 품질 유지
  • 빠른 로딩

해결방법#

?transform=format:animated-webp,fps:24,quality:85

장점:

  • 60% 더 작은 파일 크기
  • 더 나은 품질
  • 부드러운 재생

애니메이션에 대해 더 알아보기 →

다운로드/내보내기 기능#

요구사항#

  • 사용자 제어 파일명
  • 변환된 이미지 다운로드
  • 포맷 변환

해결방법#

?transform=w:1920,h:1080,format:jpeg,quality:95,dl:high-res-export

사용 사례:

  • 편집된 이미지 내보내기
  • 최적화된 버전 다운로드
  • 변환된 복사본 저장

다운로드 제어에 대해 더 알아보기 →

반응형 이미지 구현#

완전한 예시#

<picture>
  <!-- 데스크탑 -->
  <source
    media="(min-width: 1024px)"
    srcset="
      https://cdn.snapkit.studio/org/image.jpg?transform=w:1200,dpr:1.0,format:auto 1x,
      https://cdn.snapkit.studio/org/image.jpg?transform=w:1200,dpr:2.0,format:auto 2x
    "
  />
 
  <!-- 태블릿 -->
  <source
    media="(min-width: 768px)"
    srcset="
      https://cdn.snapkit.studio/org/image.jpg?transform=w:800,dpr:1.0,format:auto 1x,
      https://cdn.snapkit.studio/org/image.jpg?transform=w:800,dpr:2.0,format:auto 2x
    "
  />
 
  <!-- 모바일 -->
  <img
    src="https://cdn.snapkit.studio/org/image.jpg?transform=w:375,dpr:2.0,format:auto"
    srcset="
      https://cdn.snapkit.studio/org/image.jpg?transform=w:375,dpr:2.0,format:auto 2x,
      https://cdn.snapkit.studio/org/image.jpg?transform=w:375,dpr:3.0,format:auto 3x
    "
    alt="반응형 이미지"
  />
</picture>

영역 추출 사용 사례#

중앙 50% 추출#

?transform=extract:25-25-50-50,w:400

사용 사례: 주요 피사체에 초점

왼쪽 절반 추출#

?transform=extract:0-0-50-100,w:400

사용 사례: 좌우 비교

커스텀 영역 추출#

?transform=extract:100-100-400-300,w:400

사용 사례: 관심 있는 특정 영역

다음 단계#