Imgur 또는 Gfycat과 같은 서비스에서 애니메이션 GIF를 보고 개발 도구에서 이를 조사한 후에 GIF가 실제로 동영상임을 알게 된 적이 있나요? 그럴만한 이유가 있습니다. 애니메이션 GIF는 매우 커질 수 있습니다.
고맙게도, 이는 로드 성능 영역 중 하나로, 비교적 적은 작업을 하여 큰 이득을 실현할 수 있습니다. 대용량 GIF를 동영상으로 변환하면 사용자의 대역폭을 크게 절약할 수 있습니다.
먼저 측정
Lighthouse를 사용하여 사이트에 동영상으로 변환할 수 있는 GIF가 있는지 확인합니다. DevTools에서 Audits 탭을 클릭하고 Performance 체크박스를 선택하세요. 그런 다음 Lighthouse를 실행하고 보고서를 확인합니다. 변환할 수 있는 GIF가 있는 경우 '애니메이션 콘텐츠에 동영상 형식 사용'하라는 제안이 표시됩니다.
MPEG 동영상 만들기
GIF를 동영상으로 변환하는 방법에는 여러 가지가 있으며 이 가이드에서는 FFmpeg 도구를 사용합니다.
FFmpeg를 사용하여 GIF, my-animation.gif을 MP4 동영상으로 변환하려면 콘솔에서 다음 명령어를 실행하세요.
ffmpeg -i my-animation.gif -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p my-animation.mp4
이는 FFmpeg에 -i 플래그로 표시된 입력으로 my-animation.gif를 취하여 my-animation.mp4라는 동영상으로 변환하도록 지시합니다.
libx264 인코더는 320x240픽셀과 같이 크기가 짝수인 파일에서만 작동합니다. 입력 GIF의 크기가 홀수인 경우 FFmpeg가 '2로 나눌 수 없는 높이/너비' 오류를 방지하기 위해 자르기 필터를 포함할 수 있습니다.
ffmpeg -i my-animation.gif -vf "crop=trunc(iw/2)*2:trunc(ih/2)*2" -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p my-animation.mp4
WebM 동영상 만들기
MP4는 1999년부터 사용되었지만 WebM은 2010년에 처음 출시된 비교적 새로운 파일 형식입니다. 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는 MP4 버전(551KB)과 WebM 버전(341KB)에 비해 3.7MB입니다.
GIF 이미지를 동영상으로 대체
애니메이션 GIF에는 동영상에서 복제해야 할 세 가지 주요 특성이 있습니다.
- 자동으로 재생됩니다.
- 연속적으로 반복됩니다 (일반적으로 반복이 발생하지만 반복을 방지할 수 있음).
- 그들은 조용합니다.
다행히 <video> 요소를 사용하여 이러한 동작을 다시 만들 수 있습니다.
<video autoplay loop muted playsinline></video>
이러한 속성이 있는 <video> 요소는 애니메이션 GIF에 예상되는 모든 특징 동작이 자동으로 재생되고, 끝없이 반복되며, 오디오를 재생하지 않고, 인라인 (전체 화면이 아님)으로 재생됩니다. 🎉
마지막으로 <video> 요소에는 브라우저의 형식 지원에 따라 ���라우저가 선택할 수 있는 여러 동영상 파일을 가리키는 하나 이상의 <source> 하위 요소가 필요합니다. 브라우저가 WebM을 지원하지 않는 경우 MP4로 대체할 수 있도록 WebM과 MP4를 모두 제공합니다.
<video autoplay loop muted playsinline>
<source src="my-animation.webm" type="video/webm">
<source src="my-animation.mp4" type="video/mp4">
</video>
최대 콘텐츠 렌더링 시간 (LCP)에 미치는 영향
<img> 요소는 LCP 후보이지만 poster 이미지가 없는 <video> 요소는 LCP 후보가 아닙니다. 애니메이션 GIF를 에뮬레이션하는 경우 해결책은 <video> 요소에 poster 속성을 추가하는 것이 아닙니다. 이미지가 사용되지 않기 때문입니다.
웹사이트에 미치는 영향 애니메이션 GIF 대신 <video>를 계속 사용하는 것이 좋지만, 이러한 미디어는 LCP를 사용하기에 적합하지 않으며, 그다음으로 큰 이미지가 대신 사용된다는 점을 감안해야 합니다. GIF와 <video>는 일반적으로 용량이 크고 다운로드 속도가 느립니다. 따라서 다른 LCP 후보로 이동하면 사이트의 LCP도 개선될 가능성이 높습니다.