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가 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로 동영상 변환을 지원합니다. 이미지 CDN에 GIF를 업로드하면 이미지 CDN에서 HTML5 동영상을 반환합니다.
스택별 안내
AMP
애니메이션 콘텐츠의 경우 amp-anim를 사용하여 콘텐츠가 화면 밖에 있을 때 CPU 사용량을 최소화합니다.
Drupal
GIF를 동영상으로 삽입할 수 있는 서비스에 GIF를 업로드해 보세요.