Lighthouse 보고서의 '기회' 섹션에는 모든 애니메이션 GIF와 이러한 GIF를 동영상으로 변환하여 얻은 예상 시간 절약(초)이 표시됩니다.
<ph type="x-smartling-placeholder">애니메이션 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 사용량을 최소화하세요.