Сега е 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 на стойността истинно в about:config
Забележка 3: Реших да не включвам обикновените GIF-ове по-долу поради голямото им размер и обема на данни, който би могъл да е нужен за зареждането на тази страница! (Какво би било иронично, защото тази страница е за намаляване на обема на данни на страницата :)). Но можете да видите завършените GIF-ове тук
Забележка на преводача: Хабр не позволява автоматично възпроизвеждане и циклично възпроизвеждане на файла, така че ще можем да оценим само качеството. Можете да видите как ще изглеждат "анимираните картинки" на живо в .
Сцена 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 MB
0.33 MB
Сцена 2
7.27 MB
0.18 MB
Сцена 3
5.62 MB
0.088 MB
Просто невероятно! Нали?
Бележка: Размерите на файловете VP9 и H264 не са посочени, тъй като практически не се различават от AV1 заради използването на същия битрейт. Би било излишно да се добавят още два стълбца с идентични размери, само за да подчертаем, че тези кодеци предоставят много по-добро качество от GIF при значително по-малки размери на файловете.
Източник: habr.com
