Imgur 또는 Gfycat과 같은 서비스에서 검사를 통해 애니메이션 GIF를 본 적이 있으신가요? GIF가 진짜 동영상이라는 사실을 알게 되었나요? 이 그렇게 해야 할 이유가 있습니다. 애니메이션 GIF는 거대할 수 있습니다.
다행히 이 부분은 로드 성능 개선 작업을 수행할 수 있는 영역 중 하나입니다. 큰 성과를 얻기 위해 상대적으로 적은 노력이 필요합니다! 대형 GIF 파일을 사용자의 동영상 시청 비용을 크게 절약할 수 있고 대역폭
먼저 측정
Lighthouse를 사용하여 사이트에 동영상으로 변환할 수 있는 GIF가 있는지 확인하세요. 포함 DevTools에서 감사 탭을 클릭하고 성능 체크박스를 선택합니다. 그런 다음 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에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 이미지를 동영상으로 대체
애니메이션 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를 에뮬레이션하는 경우 해결 방법은 poster
속성을 <video>
요소에 추가하지 않는 것입니다. 이미지가 사용되지 않기 때문입니다.
웹사이트에 어떤 영향을 주나요? 애니메이션 GIF 대신 <video>
를 사용하는 것이 좋지만 이러한 미디어는 LCP에 적합하지 않으며 다음으로 큰 후보가 대신 사용된다는 점을 염두에 두시기 바랍니다. GIF 및 <video>
는 일반적으로 더 크고 다운로드 속도가 느리기 때문에 다른 LCP 후보로 이동하면 사이트의 LCP도 개선될 가능성이 높습니다.