Сега е 2019 година и е време да вземем решение относно GIF ( — тук става въпрос за произношението на английски, за нас това не е актуално — бележка на преводача.). GIF файловете заемат огромно количество място (обикновено по няколко мегабайта!), което, ако сте уеб разработчик, противоречи на вашите желания! Като уеб разработчик, искате да минимизирате нещата, които потребителите трябва да свалят, за да се зарежда сайтът бързо. По същата причина вие минимизирате JavaScript, оптимизирате PNG, JPEG и понякога дори конвертирате . Но какво да правим със стария GIF?
Най-вероятно, където отиваме, GIF файловете няма да са нужни!
Ако вашата цел е да подобрите скоростта на зареждане на сайта, трябва да се откажете от GIF! Но как тогава да правим анимирани изображения? Отговорът е видео. И в повечето случаи ще получите по-добро качество и спестяване на място от 50-90%! В живота повечето неща имат своите плюсове и минуси. Когато замените GIF с видео, недостатъци често трудно се намират.
Долу с всички GIF файлове!
За щастие, замяната на GIF с видео е станала обичайна практика през последните години, така че всички необходими инструменти вече са налични. В този пост няма да изобретявам колелото, а просто ще подобря съществуващите решения. И така, ето същината:
- Вземете GIF и го конвертирайте в видео
- Кодирайте видеото с помощта на H.264 или VP9, т.е. компресирайте и опаковайте в контейнер MP4 или WebM
- Заменете
<img>с анимиран GIF нас клип - Включете автоматично възпроизвеждане без звук и зацикляйте, за да постигнете ефекта на GIF
Сега е 2019 година
Сега е 2019 година. Прогресът напредва и ние трябва да му се противопоставим. Досега имахме два кодека, които широко се поддържат от всички браузъри и инструменти за кодиране на видео:
- H.264 — появил се през 2003 г. и най-често използван днес
- VP9 — появил се през 2013 г. и постигнал почти 50% подобрение на компресията спрямо H.264, въпреки че не всичко и не винаги е толкова розово
Забележка: макар стандартът H.265 да е следващата версия на H.264 и да може да конкурира VP9, не го разглеждам заради слабата му поддръжка от браузърите, което е показано на страницата. Разходите за лицензиране са основната причина, поради която Н.265 не стана толкова разпространен, колкото H.264, и поради която консорциумът Alliance of Open Media работи с кодека без такси — с AV1.
Помнете, че целта ни е да намалим огромните GIF файлове до най-малкия възможен размер, за да ускорим зареждането. Би било странна 2019 година, ако в арсенала ни нямаше нов стандарт за компресиране на видео. Но имаме такъв и се нарича AV1. С AV1 можем Прекрасно! 🙂
AV1 е на ваше разположение от 2019 година!
На десктопите
Наскоро поддръжката за декодиране на AV1 видео беше добавена в десктоп версиите на и . В момента поддръжката в Firefox е нестабилна и може да предизвика сривове, но ситуацията трябва да се промени с добавянето на вече в Firefox 67 ( — бел. ред.). За детайли относно новата версия, прочетете —
На смартфоните
За смартфоните в момента липсва хардуерна поддръжка поради отсъствието на съответните декодери. Може да се направи софтуерно декодиране, но това ще доведе до увеличаване на разхода на батерията. Първите мобилни SOC с поддръжка на хардуерно декодиране на AV1 ще се появят през 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 не е трудно. и използвайте командите по-долу. Използваме 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 използвах командата, посочена по-долу. За да намаля размера, мащабирах GIF до 720px ширина и 12 fps вместо оригиналното видео с 24 fps.
./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, достъпно тук , и го конвертирах, използвайки приблизително еднакъв битрейт за кодеците AV1, VP9, H.264. Резултатите са по-долу, за да можете да ги сравните сами.
Забележка 1: Ако файловете по-долу не се зареждат, може би е време да обновите браузъра си. Препоръчвам браузър на базата на Chromium, като Chrome, Vivaldi, Brave или Opera. Ето последната информация за поддръжката на AV1
Забележка 2: За Firefox 66 в Linux ще трябва да активирате флага media.av1.enabled на стойност true в about:config
Забележка 3: Реших да не включа обикновените GIF файлове по-долу заради големия им размер и обема данни, който би бил необходим за зареждане на тази страница! (Какво би било иронично, тъй като тази страница е за намаляване на обема на данните на страницата :)). Но можете да видите окончателните GIF-ове тук
Забележка на преводача: Habra не позволява автоматично възпроизвеждане и зацикляне на файла, така че ще можете да оцените само качествата. Можете да видите как ще изглеждат 'анимираните картинки' на живо в .
Сцена 1 @ 200 Kbps
Тук има много движение, което е особено чувствително при ниски битрейти. Веднага личи колко лошо представя H.264 при този битрейт, квадратите са очевидни. VP9 малко подобрява ситуацията, но квадратите все пак са видими. AV1 явно печели, показвайки очевидно по-добро изображение.
H.264
VP9
AV1
Сцена 2 @ 200 Kbps
Тук има много полупрозрачно CGI съдържание. Резултатите вече не се различават толкова много, както преди, но общо взето AV1 изглежда по-добре.
H.264
VP9
AV1
Сцена 3 @ 100 Kbps
В тази сцена намаляваме битрейта до 100 Kbps и резултатите отговарят на това. AV1 запазва лидерството и при ниски битрейти!
H.264
VP9
AV1
Черешката на тортата
За да завърша статията, усещайки количеството спестен трафик в сравнение с GIF — общият размер на всички горепосочени видеа... 1.62 MB!! Точно. Какие-то чертовы 1,708,032 байта! Для сравнения, вот размеры видео в формате GIF и AV1 для каждой сцены
GIF
AV1
Сцена 1
11.7 МБ
0.33 МБ
Сцена 2
7.27 МБ
0.18 МБ
Сцена 3
5.62 МБ
0.088 МБ
Просто невероятно! Разве нет?
Забележка: Размеры файлов VP9 и H264 не указаны, так как практически не отличаются от AV1 из-за использования того же битрейта. Было бы избыточно добавлять ещё два столбца с одинаковыми размерами, просто чтобы подчеркнуть, что эти кодеки обеспечивают значительно лучшее качество, чем GIF, при гораздо меньших размерах файлов.
Източник: habr.com
