이 Codelab에서는 애니메이션 GIF를 있습니다.
먼저 측정
먼저 웹사이트 실적을 측정하세요.
- 사이트를 미리 보려면 앱 보기를 누릅니다. 그런 다음
전체 화면
입니다. - `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
이렇게 하면 FFmpeg에 -i 플래그로 표시된 input을 취하도록 지시합니다.
cat-herd.gif를 cat-herd.mp4라는 동영상으로 변환하세요. 이 작업은
실행할 수 있습니다 명령어가 완료되면 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와 두 개의 동영상이 있어야 합니다.
$ 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는 370만이지만 MP4 버전은 551K입니다. WebM 버전은 341K입니다. 엄청난 절감 효과를 볼 수 있습니다.
GIF 효과를 다시 만들려면 HTML을 업데이트하세요.
애니메이션 GIF에는 동영상에 따라야 할 3가지 주요 특성이 있습니다.
- 자동으로 재생됩니다.
- 연속 반복됩니다 (일반적으로 반복을 방지할 수 있음).
- 조용하네요.
다행히 <video> 요소를 사용하여 이러한 동작을 다시 만들 수 있습니다.
index.html파일에서 줄을<img>로 바꿉니다.
<img src="/images/cat-herd.gif" alt="Cowboys herding cats.">
<video autoplay loop muted playsinline></video>
이러한 속성을 사용하는 <video> 요소는 자동으로 재생되고 연속 재생됩니다.
오디오를 재생하지 않고 인라인으로 재생 (전체 화면 아님)할 수 있으며,
애니메이션 GIF에 예상되는 동작을 구현했습니다. 🎉
소스 지정
이제 동영상 소스를 지정하기만 하면 됩니다. <video> 요소에는 다음이 필요합니다.
하나 이상의 <source> 하위 요소가 다른 동영상 파일을 가리키는
형식 지원에 따라 브라우저에서
선택할 수 있습니다.
고양이 무리 동영상으로 연결되는 <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>
미리보기
- 사이트를 미리 보려면 앱 보기를 누릅니다. 그런 다음
전체 화면
입니다.
환경이 동일하게 표시됩니다. 지금까지는 잘 하고 계셔요.
Lighthouse로 인증
라이브 사이트를 연 상태에서 다음을 수행합니다.
- `Control+Shift+J` (또는 Mac의 경우 `Command+Option+J`)를 눌러 DevTools를 엽니다.
- Lighthouse 탭을 클릭합니다.
- 카테고리 목록에서 실적 체크박스가 선택되어 있는지 확인합니다.
- 보고서 생성 버튼을 클릭합니다.
'애니메이션 콘텐츠에 동영상 형식 사용' 감사가 이제 통과! 축하합니다. 💪