Snapkit Logo

Best Practices#

이미지 변환 API를 효과적으로 사용하여 최적의 성능과 사용자 경험을 제공하는 방법을 배워보세요.

성능 최적화#

포맷 자동 선택 사용#

브라우저 기능에 따라 시스템이 최적 포맷을 선택하도록 하세요:

?transform=format:auto

장점:

  • AVIF 지원 브라우저: AVIF (최고 압축)
  • 대부분의 최신 브라우저: WebP
  • 레거시 브라우저: JPEG/PNG

고해상도 디스플레이용 DPR 활용#

Retina 및 고DPI 화면에서 선명한 이미지를 위해 항상 적절한 DPR을 설정하세요:

?transform=w:800,dpr:2.0

권장 값:

  • 데스크탑: dpr:2.0
  • 모바일 일반: dpr:2.0
  • 모바일 고급: dpr:3.0

품질 설정 최적화#

품질과 파일 크기의 균형을 맞추세요:

사용 사례권장 품질예시
썸네일, 미리보기60-70quality:65
웹 표준 (권장)75-85quality:85
고품질 이미지90-95quality:90

CDN 및 캐싱#

URL 일관성 유지#

변환된 이미지는 URL로 캐시됩니다. 최대 캐시 효율성을 위해 URL을 일관되게 유지하세요:

❌ 나쁜 방법:

?transform=w:800,h:600,quality:85
?transform=quality:85,w:800,h:600  // 다른 URL, 동일한 결과

✅ 좋은 방법:

?transform=w:800,h:600,quality:85  // 항상 동일한 파라미터 순서 사용

CDN 캐싱 활용#

  • 첫 요청: 변환 및 캐시 (느림)
  • 이후 요청: 캐시에서 즉시 전송
  • 캐시 기간: 1년

반응형 이미지#

모바일 최적화#

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

고려사항:

  • 모바일용 작은 크기 사용
  • 최신 스마트폰용 높은 DPR (3.0)
  • 대역폭 절약을 위한 자동 포맷 선택

데스크탑 최적화#

?transform=w:1200,dpr:2,format:webp

고려사항:

  • 데스크탑 디스플레이용 큰 크기
  • 대부분의 화면용 표준 DPR (2.0)
  • 최신 브라우저용 WebP

이미지 크기 가이드라인#

원본보다 큰 크기로 요청하지 않기#

원본보다 큰 이미지로 확대하지 마세요:

❌ 나쁜 방법:

원본: 800x600
요청: ?transform=w:2000  // 확대는 품질 저하

✅ 좋은 방법:

원본: 800x600
요청: ?transform=w:800   // 원본 크기 이하로

적절한 크기 사용#

요소 유형권장 크기예시
썸네일150-300pxw:200,h:200
제품 이미지600-800pxw:800,fit:contain
히어로 이미지1200-1920pxw:1920,h:1080
프로필 사진128-256pxw:128,h:128

피해야 할 일반적인 실수#

1. 과도한 DPR#

❌ 하지 마세요:

?transform=w:200,dpr:4.0  // 작은 썸네일에 800px 실제 크기

✅ 이렇게 하세요:

?transform=w:200,dpr:2.0  // 썸네일에는 400px로 충분

2. 너무 많은 변환#

❌ 피하세요:

?transform=w:800,h:600,rotation:45,blur:10,grayscale,flip,flop
// 복잡한 변환은 처리 시간 증가

**✅ 단순하게: **

?transform=w:800,h:600,fit:cover
// 필요한 변환만

3. 자동 포맷 미사용#

❌ 정적 포맷:

?transform=w:800,format:jpeg
// 최신 포맷의 이점을 놓침

✅ 자동 포맷:

?transform=w:800,format:auto
// 브라우저별 최적 포맷

성능 체크리스트#

  • ✅ 최적 포맷 선택을 위해 format:auto 사용
  • ✅ 적절한 DPR 설정 (2.0-3.0)
  • ✅ 품질 최적화 (웹용 75-85)
  • ✅ 적절한 크기 요청
  • ✅ 이미지 확대하지 않기
  • ✅ 캐싱을 위한 URL 일관성 유지
  • ✅ 사용자 입력 검증
  • ✅ alt 텍스트 제공
  • ✅ 반응형 이미지용 srcset 사용

다음 단계#