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를 업로드해 보세요.