2019 г. е и е крайно време да вземем решение за GIF файлове ( - тук говорим за произношение на английски, за нас това не е актуално - ок. превод). GIF файловете заемат огромно количество пространство (обикновено няколко мегабайта!), което, ако сте уеб разработчик, е в пълно противоречие с вашите желания! Като уеб разработчик искате да сведете до минимум нещата, които потребителите трябва да изтеглят, така че сайтът да се зарежда бързо. По същата причина минимизирате JavaScript, оптимизирате PNG, JPEG и понякога конвертирате . Но какво да правя със стария GIF?
Няма да имаме нужда от GIF файлове там, където отиваме!
Ако целта ви е да подобрите скоростта на зареждане на сайта, тогава трябва да се отървете от GIF файловете! Но как тогава правите анимирани снимки? Отговорът е видео. И в повечето случаи ще получите по-добро качество и спестяване на място от 50-90%! В живота повечето неща имат своите плюсове и минуси. Когато замените GIF с видео, най-често няма да можете да намерите никакви минуси.
Долу всички GIF файлове!
За щастие замяната на GIF файлове с видеоклипове е нещо обичайно през последните години, така че всички необходими инструменти вече се използват. В тази публикация няма да преоткривам колелото, а само леко ще подобря съществуващите решения. И така, ето същността:
- Вземете GIF и го конвертирайте във видео
- Кодирайте видеото с помощта на H.264 или VP9, т.е. компресирайте го и го опаковайте в MP4 или WebM контейнер
- Сменете
<img>с включен анимиран GIF<video>с ролка - Включете автоматично пускане без звук и цикъл за GIF ефект
2019 е
Сега е 2019 г. Прогресът върви напред и ние трябва да сме в крак с него. Досега имахме две опции за кодек, които се поддържат широко във всички браузъри и инструменти за кодиране на видео:
- H.264 - въведен през 2003 г. и най-широко използван днес
- VP9 - появи се през 2013 г. и постигна подобрения на компресията от почти 50% в сравнение с H.264, въпреки че не винаги всичко е толкова розово
Забележка: Въпреки че H.265 е следващата версия на H.264 и може да се конкурира с VP9, не го разглеждам поради лоша поддръжка на браузъра, както е показано на страницата . Разходите за лицензиране са основната причина H.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 кадъра в секунда вместо оригиналното видео от 24 кадъра в секунда.
./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 файлове тук
Бележка на преводача: Habr не ви позволява да активирате автоматично възпроизвеждане и цикъл на файла, така че можете да оцените само качеството. Можете да видите как ще изглеждат „анимираните картинки“ на живо .
Сцена 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 1 XNUMX байта! За сравнение, тук са GIF и AVXNUMX видео размерите за всяка сцена
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 при много по-малки размери на файлове.
Източник: www.habr.com