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

Houssein Djirdeh
Jeremy Wagner

Imgur 또는 Gfycat과 같은 서비스에서 검사를 통해 애니메이션 GIF를 본 적이 있으신가요? GIF가 진짜 동영상이라는 사실을 알게 되었나요? 이 그렇게 해야 할 이유가 있습니다. 애니메이션 GIF는 거대할 수 있습니다.

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

다행히 이 부분은 로드 성능 개선 작업을 수행할 수 있는 영역 중 하나입니다. 큰 성과를 얻기 위해 상대적으로 적은 노력이 필요합니다! 대형 GIF 파일을 사용자의 동영상 시청 비용을 크게 절약할 수 있고 대역폭

먼저 측정

Lighthouse를 사용하여 사이트에 동영상으로 변환할 수 있는 GIF가 있는지 확인하세요. 포함 DevTools에서 감사 탭을 클릭하고 성능 체크박스를 선택합니다. 그런 다음 Lighthouse에서 보고서를 확인해 보세요. 변환할 수 있는 GIF가 있는 경우 동영상 형식':

Lighthouse 감사에 실패한 경우 애니메이션 콘텐츠에 동영상 형식을 사용합니다.

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에my-animation.gif -i 플래그를 설정하고 my-animation.mp4라는 동영상으로 변환합니다.

libx264 인코더는 크기가 균일한 파일(예: 320픽셀)에서만 작동합니다. 240px로 설정해야 합니다. 입력 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 이미지를 동영상으로 대체

애니메이션 GIF에는 동영상에 따라 해야 할 3가지 주요 특성이 있습니다.

  • 자동으로 재생됩니다.
  • 연속 반복됩니다 (일반적으로 반복을 방지할 수 있음).
  • 조용하네요.

다행히 <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도 개선될 가능성이 높습니다.