GIF를 동영상으로 바꾸기

이 Codelab에서는 애니메이션 GIF를 있습니다.

먼저 측정

먼저 웹사이트 실적을 측정하세요.

  1. 사이트를 미리 보려면 앱 보기를 누릅니다. 그런 다음 전체 화면 전체 화면입니다.
  2. `Control+Shift+J` (또는 Mac의 경우 `Command+Option+J`)를 눌러 DevTools를 엽니다.
  3. Lighthouse 탭을 클릭합니다.
  4. 카테고리 목록에서 실적 체크박스가 선택되어 있는지 확인합니다.
  5. 보고서 생성 버튼을 클릭합니다.

완료되면 Lighthouse에서 GIF를 '애니메이션 콘텐츠에 동영상 형식 사용' 있습니다.

FFmpeg 다운로드

GIF를 동영상으로 변환하는 방법에는 여러 가지가 있습니다. 이 가이드에서는 FFmpeg를 사용합니다. Glitch VM에 이미 설치되어 있으므로 그리고 원하는 경우 이 안내에 따라 지역 머신 확인할 수 있습니다

콘솔 열기

FFmpeg가 설치되어 작동하는지 다시 확인합니다.

  1. 수정할 리믹스를 클릭하여 프로젝트를 수정할 수 있도록 합니다.
  2. 터미널을 클릭합니다 (참고: 터미널 버튼이 표시되지 않으면 전체 화면 옵션을 사용해야 할 수도 있음).
  3. 콘솔에서 다음을 실행합니다.
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로 인증

라이브 사이트를 연 상태에서 다음을 수행합니다.

  1. `Control+Shift+J` (또는 Mac의 경우 `Command+Option+J`)를 눌러 DevTools를 엽니다.
  2. Lighthouse 탭을 클릭합니다.
  3. 카테고리 목록에서 실적 체크박스가 선택되어 있는지 확인합니다.
  4. 보고서 생성 버튼을 클릭합니다.

'애니메이션 콘텐츠에 동영상 형식 사용' 감사가 이제 통과! 축하합니다. 💪