애니메이션 GIF를 비디오로 대체하여 페이지를 더 빠르게 로드
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에 my-animation.gif를 입력으로 받아서(-i 플래그로 지정됨) 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.mp4WebM 비디오 만들기 #
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에는 비디오가 그대로 재현해야 하는 세 가지 주요 특성이 있습니다.
- 자동으로 재생됩니다.
- 계속해서 반복됩니다(보통은 그렇지만 반복되지 않게 할 수 있음).
- 소리가 나지 않습니다.
다행스럽게도 <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>