이제 GIF를 AV1 비디오로 교체할 시간입니다

2019년이고 이제 GIF를 결정해야 할 때입니다(아니요, 우리는 이 결정에 대해 이야기하고 있는 것이 아닙니다! 우리는 여기에 결코 동의하지 않을 것입니다! - 여기서 우리는 영어 발음에 대해 이야기하고 있습니다. 우리에게는 이것은 관련이 없습니다. 번역). GIF는 엄청난 양의 공간(보통 수 메가바이트!)을 차지하는데, 이는 웹 개발자라면 원하는 것과 완전히 반대되는 것입니다! 웹 개발자는 사이트가 빠르게 로드되도록 사용자가 다운로드해야 하는 항목을 최소화하려고 합니다. 같은 이유로 JavaScript를 축소하고 PNG, JPEG를 최적화하고 때로는 변환합니다. JPEG에서 WebP로. 하지만 오래된 GIF는 어떻게 해야 할까요?

우리가 가는 곳에는 GIF가 필요하지 않습니다!

귀하의 목표가 사이트 로딩 속도를 향상시키는 것이라면 GIF를 제거해야 합니다! 그러면 어떻게 애니메이션 사진을 만들 수 있나요? 정답은 영상입니다. 그리고 대부분의 경우 품질이 향상되고 공간도 50-90% 절약됩니다! 인생에서 대부분의 것에는 장점과 단점이 있습니다. GIF를 비디오로 대체하면 대부분 단점을 찾을 수 없습니다.

모든 GIF를 다운하세요!

다행스럽게도 최근 몇 년 동안 GIF를 비디오로 대체하는 것이 보편화되어 필요한 모든 도구가 이미 사용되고 있습니다. 이 게시물에서는 바퀴를 재발명하지 않고 기존 솔루션을 약간만 개선할 것입니다. 요점은 다음과 같습니다.

1. GIF를 찍어서 비디오로 변환하세요
2. H.264 또는 VP9를 사용하여 비디오를 인코딩합니다. 압축하여 MP4 또는 WebM 컨테이너에 넣습니다.
3. 바꾸다 <img> 애니메이션 GIF를 켠 상태 <video> 롤러로
4. GIF 효과를 위해 사운드 및 반복 없이 자동 재생을 켜십시오.

Google에는 프로세스를 설명하는 유용한 문서가 있습니다.

2019년 세이카스

지금은 2019년입니다. 진보는 앞으로 나아가고 있으며 우리는 이를 따라잡아야 합니다. 지금까지 모든 브라우저와 비디오 인코딩 도구에서 널리 지원되는 두 가지 코덱 옵션이 있었습니다.

1. H.264 - 2003년에 도입되어 오늘날 가장 널리 사용됨
2. VP9 - 2013년에 등장하여 H.50에 비해 거의 264%의 압축 개선을 달성했습니다. 그들이 여기에 쓰는 대로 모든 것이 항상 장미빛인 것은 아니다

참고 : H.265는 H.264의 다음 버전이고 VP9과 경쟁할 수 있지만 페이지에 표시된 것처럼 브라우저 지원이 좋지 않아 고려하지 않습니다. https://caniuse.com/#feat=hevc. 라이센스 비용은 H.265가 H.264만큼 널리 보급되지 않은 주된 이유이며 Alliance of Open Media 컨소시엄이 로열티 없는 코덱인 AV1과 협력하고 있는 이유입니다.

우리의 목표는 로딩 시간을 단축하기 위해 거대한 GIF를 가능한 가장 작은 크기로 줄이는 것입니다. 우리 무기고에 비디오 압축에 대한 새로운 표준이 없다면 2019년은 이상한 해가 될 것입니다. 그러나 그것은 존재하며 AV1이라고 불립니다. AV1을 사용하면 다음을 수행할 수 있습니다. VP30에 비해 압축률이 약 9% 향상되었습니다.. 레포타! 🙂

AV1은 2019년부터 서비스를 제공하고 있습니다!

데스크탑에서

최근 AV1 비디오 디코딩 지원이 데스크톱 버전에 추가되었습니다. 구글 크롬 70 и 모질라 파이어 폭스 65. 현재 Firefox 지원에는 버그가 있어 충돌이 발생할 수 있지만 다음 기능을 추가하면 상황이 개선될 것입니다. dav1d 디코더 이미 Firefox 67에 있습니다. (이미 출시되었지만 지원이 나타났습니다. - 대략. 번역). 새 버전에 대한 자세한 내용은 다음을 참조하세요. dav1d 0.3.0 릴리스: 더욱 빨라졌습니다!

스마트폰에서

적절한 디코더가 없기 때문에 현재 스마트폰에 대한 하드웨어 지원은 없습니다. 소프트웨어 디코딩을 수행할 수 있지만 이로 인해 배터리 소모가 증가합니다. AV1 하드웨어 디코딩을 지원하는 최초의 모바일 SOC는 2020년에 출시될 예정입니다.

그러면 기사를 읽은 독자들은 "아직 휴대폰이 제대로 지원하지 않는다면 왜 AV1을 사용하는가?"라고 합니다.

AV1은 상당히 새로운 코덱이며, 현재는 적응 초기 단계에 있습니다. 이 기사를 "당신이 요리하는 동안 군중이 따라올 것입니다" 단계로 생각하십시오. 데스크톱 지원 자체가 일부 사용자의 사이트 속도를 높여줄 것입니다. 또한 대상 장치에서 AV1이 지원되지 않는 경우 이전 코덱을 대체 시나리오로 사용할 수 있습니다. 그러나 사용자가 AV1을 지원하는 장치로 전환하면 모든 것이 준비됩니다. 이를 달성하려면 브라우저가 선호하는 형식을 선택할 수 있도록 아래와 같이 비디오 태그를 생성해야 합니다. AV1 ->> VP9 ->> H.264. 글쎄, 사용자가 비디오를 전혀 지원하지 않는 아주 오래된 장치나 네비게이터를 가지고 있다면 (H264에서는 거의 발생하지 않음), 그러면 그는 GIF만 보게 될 것입니다

<video style="display:block; margin: 0 auto;" autoplay loop muted playsinline poster="RollingCredits.jpg">
  <source src="media/RollingCredits.av1.mp4" type="video/mp4">
  <source src="media/RollingCredits.vp9.webm" type="video/webm">
  <source src="media/RollingCredits.x264.mp4" type="video/mp4">
  <img src="media/RollingCredits.gif">
</video>

AV1 생성

AV1에서 비디오를 만드는 것은 쉽습니다. 여기에서 시스템에 맞는 최신 ffmpeg 빌드를 다운로드하세요. 아래 명령을 사용하십시오. 목표 비트 전송률을 달성하기 위해 2개의 패스를 사용합니다. 이를 위해 ffmpeg를 두 번 실행합니다. 처음으로 존재하지 않는 파일에 결과를 씁니다. 그러면 ffmpeg의 두 번째 실행에 필요한 로그가 생성됩니다.

# Linux or Mac
## Проход 1
ffmpeg -i input.mp4 -c:v libaom-av1 -b:v 200k -filter:v scale=720:-1 -strict experimental -cpu-used 1 -tile-columns 2 -row-mt 1 -threads 8 -pass 1 -f mp4 /dev/null && 
## Проход 2
ffmpeg -i input.mp4 -pix_fmt yuv420p -movflags faststart -c:v libaom-av1 -b:v 200k -filter:v scale=720:-1 -strict experimental -cpu-used 1 -tile-columns 2 -row-mt 1 -threads 8 -pass 2 output.mp4

# Windows
## Проход 1
ffmpeg.exe -i input.mp4 -c:v libaom-av1 -b:v 200k -filter:v scale=720:-1 -strict experimental -cpu-used 1 -tile-columns 2 -row-mt 1 -threads 8 -pass 1 -f mp4 NUL && ^
## Проход 2
ffmpeg.exe -i input.mp4 -pix_fmt yuv420p -movflags faststart -c:v libaom-av1 -b:v 200k -filter:v scale=720:-1 -strict experimental -cpu-used 1 -tile-columns 2 -row-mt 1 -threads 8 -pass 2 output.mp4

매개변수에 대한 분석은 다음과 같습니다.

-i - Входной файл.

-pix_fmt - Используем формат 4:2:0 для выбора информации о цветности в видео. Существует много других возможных форматов, но 4:2:0 наиболее совместимый.

-c:v - Какой кодек использовать, в нашем случае - AV1.<br />
-b:v – Средний битрейт, которого мы хотим добиться.

-filter:v scale - Фильтр масштаба ffmpeg используется для уменьшения разрешения видео. Мы устанавливаем X:-1 что говорит ffmpeg уменьшить ширину до X, сохранив соотношение сторон.

-strict experimental - Надо указать, т.к. AV1 достаточно новый кодек.

-cpu-used - Ужасно названный параметр, который на самом деле используется для выбора уровня качества видео. Возможные значения 0-4. Чем меньше значение, тем лучше качество и, соответственно, больше время, которое займёт кодировка.

-tile-columns - Для использования нескольких тредов. Говорит AV1 разбить видео на отдельные колонки, которые могут быть перекодированы независимо для лучшей утилизации ЦПУ.

-row-mt – Тоже, что и предыдущий параметр, но разбивает так же на строки внутри колонок.

-threads - Количество тредов.

-pass - Какой проход сейчас выполняется.

-f - Используется только при первом проходе. Указывает формат выходного файла, т.е. MP4 в нашем случае.

-movflags faststart - Включаем быстрый старт видео, перемещая часть данных в начало файла. Это позволит начать воспроизведение ещё до полной загрузка файла.

GIF 만들기

GIF를 만들려면 아래 명령을 사용했습니다. 크기를 줄이기 위해 원본 720fps 비디오 대신 GIF를 너비 12px, 24fps로 조정했습니다.

./ffmpeg -i /mnt/c/Users/kasing/Desktop/ToS.mov -ss 00:08:08 -t 12
-filter_complex "[0:v] fps=12,scale=720:-1" -y scene2.gif

시험 결과

백 번 읽는 것보다 한 번 보는 것이 낫겠죠? AV1이 우리 목적에 맞는 선택인지 확인해 봅시다. 여기에서 무료로 제공되는 Tears Of Steel 비디오를 가져왔습니다. https://mango.blender.org/, AV1, VP9, ​​​​H.264 코덱에 대해 거의 동일한 비트 전송률을 사용하여 변환했습니다. 결과는 아래에 있으니 직접 비교해 보세요.

참고 1: 아래 파일이 로드되지 않으면 브라우저를 업데이트해야 할 때일 수 있습니다. Chrome, Vivaldi, Brave 또는 Opera와 같은 Chromium 기반 브라우저를 권장합니다. AV1 지원에 대한 최신 정보는 다음과 같습니다. https://caniuse.com/#feat=av1

참고 2: Linux의 Firefox 66의 경우 플래그를 설정해야 합니다. media.av1.enabled 의미상 true в about:config

참고 3: 크기가 크고 이 페이지를 로드하는 데 필요한 데이터 양 때문에 아래에 일반 GIF를 포함하지 않기로 결정했습니다! (이 페이지는 페이지의 데이터 양을 줄이는 것에 관한 것이기 때문에 아이러니합니다 :)). 하지만 여기서 최종 GIF를 볼 수 있습니다 https://github.com/singhkays/its-time-replace-gifs-with-av1-video/blob/master/GIFs

번역가의 주 : Habr에서는 자동 재생을 활성화하고 파일을 반복하는 것을 허용하지 않으므로 품질만 평가할 수 있습니다. "애니메이션 사진"이 어떤 모습일지 실시간으로 확인할 수 있습니다. 원본 기사.

장면 1 @ 200Kbps

여기에는 움직임이 많으며 특히 낮은 비트 전송률에서 민감합니다. 이 비트 전송률에서 H.264가 얼마나 나쁜지 즉시 확인할 수 있으며 사각형이 즉시 표시됩니다. VP9는 상황을 약간 개선하지만 사각형은 여전히 ​​표시됩니다. AV1이 분명히 승리하여 분명히 더 나은 사진을 생성합니다.

H.264

VP9

AV1

장면 2 @ 200Kbps

여기에는 반투명 CGI 콘텐츠가 많이 있습니다. 결과는 지난번과 다르지 않지만 전체적으로 AV1이 더 좋아 보입니다.

H.264

VP9

AV1

장면 3 @ 100Kbps

이 장면에서는 비트 전송률을 100Kbps로 낮추었고 결과는 일관됩니다. AV1은 낮은 비트 전송률에서도 선두를 유지합니다!

H.264

VP9

AV1

케이크에 체리

GIF에 비해 대역폭이 절약되는 느낌으로 글을 마무리하자면, 전체 영상의 전체 크기가 더 크다는 점... 1.62MB!! 오른쪽. 1,708,032바이트 정도! 비교를 위해 각 장면의 GIF 및 AV1 비디오 크기는 다음과 같습니다.

GIF
AV1

장면 1
11.7 MB
0.33 MB

장면 2
7.27 MB
0.18 MB

장면 3
5.62 MB
0.088 MB

정말 놀랍습니다! 안 그래?

참고 : VP9 및 H264의 파일 크기는 제공되지 않습니다. 동일한 비트 전송률을 사용하기 때문에 AV1과 실질적으로 다르지 않기 때문입니다. 이러한 코덱이 훨씬 작은 파일 크기에서 GIF보다 훨씬 더 나은 품질을 생성한다는 점을 강조하기 위해 동일한 크기의 열을 두 개 더 추가하는 것은 중복됩니다.

출처 : habr.com