애니메이션 콘텐츠에 동영상 형식 사용

Lighthouse 보고서의 '기회' 섹션에는 모든 애니메이션 GIF와 이러한 GIF를 동영상으로 변환하여 얻은 예상 시간 절약(초)이 표시됩니다.

<ph type="x-smartling-placeholder">
</ph> Lighthouse의 애니메이션 콘텐츠 감사에 동영상 형식 사용 스크린샷

애니메이션 GIF를 동영상으로 대체해야 하는 이유

대용량의 GIF는 애니메이션 콘텐츠를 전달하는 데 비효율적입니다. 대용량 GIF를 동영상으로 변환하면 할 수 있습니다. 애니메이션 및 PNG/WebP에 MPEG4/WebM 동영상을 사용해 보세요. 을 사용하면 네트워크 바이트를 절약할 수 있습니다.

MPEG 동영상 만들기

GIF를 동영상으로 변환하는 방법에는 여러 가지가 있습니다. FFmpeg는 이 가이드에서 사용하는 도구입니다. FFmpeg를 사용하여 GIF를 변환하려면 my-animation.gif를 MP4 동영상으로 변환하려면 콘솔에서 다음 명령어를 실행합니다.

ffmpeg -i my-animation.gif my-animation.mp4

이렇게 하면 FFmpeg에 my-animation.gif를 입력으로 취하도록 지시합니다. 이는 -i 플래그로 나타냅니다. my-animation.mp4라는 동영상으로 변환할 수 있습니다.

WebM 동영상 만들기

WebM 동영상은 MP4 동영상보다 훨씬 작지만 모든 브라우저에서 WebM을 지원하는 것은 아니므로 둘 다 생성하는 것이 좋습니다.

FFmpeg를 사용하여 my-animation.gif을(를) WebM 동영상으로 변환하려면 다음 단계를 따르세요. 콘솔에서 다음 명령어를 실행합니다.

ffmpeg -i my-animation.gif -c vp9 -b:v 0 -crf 41 my-animation.webm

GIF 이미지를 동영상으로 바꾸기

애니메이션 GIF에는 동영상에서 재현해야 하는 세 가지 주요 특성이 있습니다.

  • 자동으로 재생됩니다.
  • 일반적으로 루프가 계속 반복되지만 루프를 방지할 수도 있습니다.
  • 소리가 없습니다.

다행히 <video> 요소를 사용하여 이러한 동작을 다시 만들 수 있습니다.

<video autoplay loop muted playsinline>
  <source src="my-animation.webm" type="video/webm" />
  <source src="my-animation.mp4" type="video/mp4" />
</video>

GIF를 HTML5 동영상으로 변환하는 서비스 사용

많은 이미지 CDN에서 GIF-HTML5 동영상 변환을 지원합니다. 사용자는 GIF를 이미지 CDN으로 전송하면 이미지 CDN이 HTML5 동영상을 반환합니다.

스택별 안내

AMP

애니메이션 콘텐츠의 경우 amp-anim을 사용하여 콘텐츠가 화면에 표시되지 않을 때 CPU 사용량을 최소화하세요.

리소스