Lighthouse 보고서의 기회 섹션에는 모든 애니메이션 GIF와 다음 GIF를 동영상으로 변환하여 얻을 수 있는 예상 시간(초)이 표시됩니다.
애니메이션 GIF를 동영상으로 대체해야 하는 이유
대용량 GIF는 애니메이션 콘텐츠를 전달하는 데 비효율적입니다. 대용량 GIF를 동영상으로 변환하여 사용자의 대역폭을 크게 절약할 수 있습니다. 애니메이션에는 MPEG4/WebM 동영상을, 정적 이미지에는 GIF 대신 PNG/WebP를 사용하여 네트워크 바이트를 절약하세요.
MPEG 동영상 만들기
GIF를 동영상으로 변환하는 방법에는 여러 가지가 있습니다.
FFmpeg는 이 가이드에서 사용된 도구입니다.
FFmpeg를 사용하여 GIF, my-animation.gif을 MP4 동영상으로 변환하려면 콘솔에서 다음 명령어를 실행하세요.
ffmpeg -i my-animation.gif my-animation.mp4
이는 FFmpeg에 -i 플래그로 표시된 입력으로 my-animation.gif를 취하여 my-animation.mp4라는 동영상으로 변환하도록 지시합니다.
WebM 동영상 만들기
WebM 동영상은 MP4 동영상보다 훨씬 작지만 일부 브라우저에서는 WebM을 지원하지 않으므로 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 동영상으로의 변환을 지원합니다. 이미지 CDN에 GIF를 업로드하면 이미지 CDN이 HTML5 동영상을 반환합니다.
스택별 안내
AMP
애니메이션 콘텐츠의 경우 콘텐츠가 화면에 표시되지 않을 때 amp-anim를 사용하여 CPU 사용량을 최소화하세요.