페이지 로드 속도를 높이기 위해 애니메이션 GIF를 동영상으로 대체합니다.

Houssein Djirdeh
Jeremy Wagner

Imgur 또는 Gfycat과 같은 서비스에서 애니메이션 GIF를 본 적이 있나요? 개발자 도구에서 검사했는데 GIF가 실제로 동영상인 것으로 밝혀졌나요? 그럴 만한 이유가 있습니다. 애니메이션 GIF는 정말로 크기 가 클 수 있습니다.

13.7MB GIF를 보여주는 DevTools 네트워크 패널

다행히도 로드 성능의 영역 중 하나로, 비교적 적은 작업으로 큰 이점을 얻을 수 있습니다. 대용량 GIF를 동영상으로 변환하면 사용자의 대역폭을 크게 절약할 수 있습니다.

먼저 측정

Lighthouse를 사용하여 동영상으로 변환할 수 있는 GIF가 있는지 사이트를 확인합니다. DevTools에서 감사 탭을 클릭하고 성능 체크박스를 선택합니다. 그런 다음 Lighthouse를 실행하고 보고서를 확인합니다. 변환할 수 있는 GIF가 있는 경우 '애니메이션 콘텐츠에 동영상 형식 사용'이라는 제안이 표시됩니다.

Lighthouse 감사가 실패합니다. 애니메이션 콘텐츠에 동영상 형식을 사용하세요.

MPEG 동영상 만들기

GIF를 동영상으로 변환하는 방법에는 여러 가지가 있으며, FFmpegFFmpeg 도구를 사용합니다. 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가 my-animation.gif를 입력으로 가져와 -i 플래그로 표시된 my-animation.mp4라는 동영상으로 변환합니다.

libx264 인코더는 320x240px과 같이 크기가 짝수인 파일에서만 작동합니다. 입력 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는 3.7MB, MP4는 551KB, WebM은 341KB임을 보여주는 파일 크기 비교

이 예에서 초기 GIF는 3.7MB인 반면 MP4 버전은 551KB이고 WebM 버전은 341KB에 불과합니다.

GIF img를 동영상으로 바꾸기

애니메이션 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 후보이지만 <video> 요소는 poster 이미지가 없으면 LCP 후보가 아닙니다. 애니메이션 GIF를 에뮬레이션하는 경우 아닙니다. poster 속성을 <video> 요소에 추가하는 것은 해결책이 이 이미지는 사용되지 않기 때문입니다.

웹사이트에 어떤 의미가 있나요? 애니메이션 GIF 대신 <video>를 사용하는 것이 좋지만 이러한 미디어는 LCP 후보가 아니며 대신 다음으로 큰 후보가 사용된다는 점을 이해해야 합니다. GIF와 <video>는 일반적으로 크기가 크고 다운로드 속도가 느리므로 다른 LCP 후보로 이동하면 사이트의 LCP가 개선될 수 있습니다.