이 Codelab에서는 애니메이션 GIF를 동영상으로 바꿔 성능을 개선합니다.
먼저 측정
먼저 웹사이트의 실적을 측정합니다.
- 사이트를 미리 보려면 View App을 누른 다음 Fullscreen
을 누릅니다. - `Control+Shift+J` (Mac의 경우 `Command+Option+J`)를 눌러 DevTools를 엽니다.
- Lighthouse 탭을 클릭합니다.
- 카테고리 목록에서 실적 체크박스가 선택되어 있는지 확인합니다.
- 보고서 생성 버튼을 클릭합니다.
완료되면 Lighthouse가 '애니메이션 콘텐츠에 동영상 형식 사용' 감사에서 GIF를 문제로 신고한 것을 확인할 수 있습니다.
FFmpeg 가져오기
GIF를 동영상으로 변환하는 방법에는 여러 가지가 있습니다. 이 가이드에서는 FFmpeg를 사용합니다. 이 도구는 이미 Glitch VM에 설치되어 있으며 원하는 경우 다음 안내에 따라 로컬 머신에도 설치할 수 있습니다.
콘솔 열기
FFmpeg가 설치되어 있고 작동하는지 다시 확인합니다.
- 리믹스하여 수정을 클릭하여 프로젝트를 수정할 수 있도록 합니다.
- 터미널을 클릭합니다 (참고: 터미널 버튼이 표시되지 않으면 전체 화면 옵션을 사용해야 할 수 있음).
- 콘솔에서 다음을 실행합니다.
which ffmpeg
다음과 같이 파일 경로가 반환됩니다.
/usr/bin/ffmpeg
GIF를 동영상으로 변경
- 콘솔에서
cd images를 실행하여 이미지 디렉터리를 입력합니다. ls를 실행하여 콘텐츠를 확인합니다.
다음과 같이 표시됩니다.
$ ls
cat-herd.gif
- 콘솔에서 다음을 실행합니다.
ffmpeg -i cat-herd.gif -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p cat-herd.mp4
이 코드는 -i 플래그로 표시된 cat-herd.gif 입력을 가져와 cat-herd.mp4라는 동영상으로 변환하도록 FFmpeg에 지시합니다. 실행하는 데 1초 정도 걸립니다. 명령어가 완료되면 다시 ls를 입력할 수 있으며 다음 두 파일이 표시됩니다.
$ ls
cat-herd.gif cat-herd.mp4
WebM 동영상 만들기
MP4는 1999년부터 사용되어 왔지만 WebM은 2010년에 처음으로 출시된 비교적 새로운 기능입니다. WebM 동영상은 MP4 동영상보다 훨씬 작을 수 있으므로 두 동영상을 모두 생성하는 것이 합리적입니다. 다행히 <video> 요소를 사용하면 여러 소스를 추가할 수 있으므로 브라우저에서 WebM을 지원하지 않는 경우 MP4로 대체할 수 있습니다.
- 콘솔에서 다음을 실행합니다.
ffmpeg -i cat-herd.gif -c vp9 -b:v 0 -crf 41 cat-herd.webm
- 파일 크기를 확인하려면 다음을 실행합니다.
ls -lh
GIF 1개와 동영상 2개가 있어야 합니다.
$ ls -lh
total 4.5M
-rw-r--r-- 1 app app 3.7M May 26 00:02 cat-herd.gif
-rw-r--r-- 1 app app 551K May 31 17:45 cat-herd.mp4
-rw-r--r-- 1 app app 341K May 31 17:44 cat-herd.webm
원본 GIF는 3.7M이지만 MP4 버전은 551K이고 WebM 버전은 341K에 불과합니다. 엄청나게 절약되네요!
HTML을 업데이트하여 GIF 효과 다시 만들기
애니메이션 GIF에는 동영상에서 모방해야 하는 세 가지 주요 특성이 있습니다.
- 자동으로 재생됩니다.
- 연속적으로 반복됩니다 (일반적으로 반복이 발생하지만 반복을 방지할 수 있음).
- 그들은 조용합니다.
다행히 <video> 요소를 사용하여 이러한 동작을 다시 만들 수 있습니다.
index.html파일에서<img>줄을 다음으로 바꿉니다.
<img src="/images/cat-herd.gif" alt="Cowboys herding cats.">
<video autoplay loop muted playsinline></video>
이러한 속성을 사용하는 <video> 요소는 애니메이션 GIF에 예상되는 모든 동작이 자동으로 재생되고, 끝없이 반복되며, 오디오가 재생되지 않으며, 인라인으로 재생됩니다 (전체 화면 아님). 🎉
소스 지정
이제 동영상 소스를 지정하기만 하면 됩니다. <video> 요소에는 형식 지원에 따라 브라우저에서 선택할 수 있는 서로 다른 동영상 파일을 가리키는 하나 이상의 <source> 하위 요소가 필요합니다.
cat-herd 동영상에 연결되는 <source> 요소로 <video>를 업데이트합니다.
<video autoplay loop muted playsinline>
<source src="/images/cat-herd.webm" type="video/webm">
<source src="/images/cat-herd.mp4" type="video/mp4">
</video>
미리보기
- 사이트를 미리 보려면 View App을 누른 다음 Fullscreen
을 누릅니다.
환경은 동일하게 표시됩니다. 지금까지 잘 하고 계십니다.
Lighthouse로 인증
라이브 사이트가 열린 상태에서:
- `Control+Shift+J` (Mac의 경우 `Command+Option+J`)를 눌러 DevTools를 엽니다.
- Lighthouse 탭을 클릭합니다.
- 카테고리 목록에서 실적 체크박스가 선택되어 있는지 확인합니다.
- 보고서 생성 버튼을 클릭합니다.
이제 '애니메이션 콘텐츠에 동영상 형식 사용' 감사가 통과되는 것을 확인할 수 있습니다. 축하합니다. 💪