Snapkit Logo

애니메이션 파라미터#

더 나은 성능과 더 작은 파일 크기를 위해 애니메이션 GIF를 최신 animated-webp 포맷으로 변환하고 최적화하세요.

Animated WebP 개요#

Animated WebP란?#

GIF 포맷의 최신 대안으로 다음을 제공합니다:

  • 60% 더 작은 파일 크기 - GIF 대비
  • 더 나은 시각적 품질 - 손실 압축 사용
  • 부드러운 재생 - 조정 가능한 프레임 레이트
  • 폭넓은 브라우저 지원 - Chrome, Firefox, Edge, Safari 14+

Animated WebP를 사용하는 이유?#

기능GIFAnimated WebP
파일 크기큼60% 더 작음 ✅
품질제한된 색상전체 색상 ✅
투명도✅✅
브라우저 지원모든 브라우저최신 브라우저 ✅
로딩 속도느림빠름 ✅

FPS (프레임 레이트)#

설명#

애니메이션 이미지의 프레임 레이트를 제어합니다.

범위#

  • 1 ~ 60
  • 기본값: 원본 프레임 레이트 유지

사용법#

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

권장 FPS 값#

FPS사용 사례파일 크기부드러움
10-15간단한 애니메이션, 로더가장 작음적절함
24표준 웹 애니메이션중간부드러움
30고품질 애니메이션큼매우 부드러움
60프리미엄 애니메이션매우 큼극도로 부드러움

예시#

낮은 FPS (작은 파일): ?transform=format:animated-webp,fps:15,quality:80

표준 FPS (균형): ?transform=format:animated-webp,fps:24,quality:85

높은 FPS (부드러움): ?transform=format:animated-webp,fps:30,quality:85

프레임 범위 (Frame Range)#

설명#

애니메이션에서 특정 프레임 범위를 추출합니다.

형식#

frameRange:start-end

제한사항#

  • start ≥ 0
  • end > start
  • 최대 1000 프레임

사용법#

처음 50 프레임: ?transform=format:animated-webp,frameRange:0-50

10번째부터 60번째 프레임: ?transform=format:animated-webp,frameRange:10-60

사용 사례#

  • 특정 애니메이션 세그먼트 추출
  • 긴 애니메이션 단축
  • 미리보기 클립 생성
  • 프레임 제한으로 파일 크기 축소

완전한 예시#

기본 GIF to WebP 변환#

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

결과: 동일한 시각적 품질로 60% 더 작은 파일

웹 최적화#

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

최적: 좋은 품질의 표준 웹 애니메이션

작은 파일 크기#

?transform=format:animated-webp,fps:15,quality:75

최적: 로딩 인디케이터, 간단한 애니메이션

고품질#

?transform=format:animated-webp,fps:30,quality:90

최적: 프리미엄 콘텐츠, 히어로 애니메이션

세그먼트 추출#

?transform=format:animated-webp,frameRange:0-30,fps:24

최적: 긴 애니메이션의 미리보기, 하이라이트

다른 파라미터와 조합#

크기 조정 + 최적화#

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

영역 추출 + 변환#

?transform=extract:10-10-80-80,format:animated-webp,fps:20

완전 최적화#

?transform=w:400,format:animated-webp,fps:20,frameRange:0-50,quality:80

사용 사례#

웹사이트 로딩 애니메이션#

요구사항:

  • 작은 파일 크기
  • 빠른 로딩
  • 충분히 부드러움

해결방법: ?transform=w:100,format:animated-webp,fps:15,quality:75

소셜 미디어 공유#

요구사항:

  • 모바일 데이터 최적화
  • 좋은 품질
  • 표준 재생 시간

해결방법: ?transform=w:600,format:animated-webp,fps:24,frameRange:0-100,quality:80

히어로 애니메이션#

요구사항:

  • 고품질
  • 부드러운 재생
  • 눈길을 끄는

해결방법: ?transform=w:800,format:animated-webp,fps:30,quality:90

중요 사항#

요구사항#

  • 원본 포맷: GIF 또는 애니메이션 포맷이어야 함
  • 포맷 파라미터: format:animated-webp 사용 필수
  • 정적 이미지: 애니메이션 포맷으로 변환 불가

작동하는 것#

✅ ?transform=format:animated-webp,fps:24
✅ ?transform=format:animated-webp,frameRange:0-50
✅ ?transform=w:600,format:animated-webp,fps:30

작동하지 않는 것#

❌ ?transform=format:jpeg,fps:24       // FPS는 animated-webp 전용
❌ ?transform=format:png,frameRange:0-50  // frameRange는 animated-webp 전용

성능 비교#

파일 크기 축소#

원본 GIFAnimated WebP축소율
5.2 MB2.1 MB60%
10.8 MB4.3 MB60%
15.0 MB6.0 MB60%

품질 비교#

  • 시각적 품질: 원본 GIF와 거의 동일
  • 색상 지원: GIF의 256색 vs 전체 RGB
  • 부드러움: fps 파라미터로 조정 가능

브라우저 지원#

지원 브라우저#

  • Chrome 32+ ✅
  • Firefox 65+ ✅
  • Edge 18+ ✅
  • Safari 14+ (macOS 11+) ✅
  • Opera 19+ ✅

폴백 전략#

<picture>
  <source srcset="animation.webp" type="image/webp" />
  <img src="animation.gif" alt="애니메이션" />
</picture>

다음 단계#