Ir pienācis 2019. gads, un ir pienācis laiks pieņemt lēmumu par GIF attēliem ( - šeit mēs runājam par izrunu angļu valodā, mums tas nav aktuāli - apm. tulkojums). GIF aizņem milzīgu vietu (parasti vairākus megabaitus!), kas, ja esat tīmekļa izstrādātājs, ir pilnīgā pretrunā ar jūsu vēlmēm! Kā tīmekļa izstrādātājs jūs vēlaties samazināt saturu, kas lietotājiem ir jālejupielādē, lai vietne tiktu ielādēta ātri. Tā paša iemesla dēļ jūs samazinat JavaScript, optimizējat PNG, JPEG un dažreiz konvertējat . Bet ko darīt ar veco GIF?
Mums nebūs vajadzīgi GIF faili, kur mēs dosimies!
Ja jūsu mērķis ir uzlabot vietnes ielādes ātrumu, jums ir jāatbrīvojas no GIF! Bet kā tad taisa animētas bildes? Atbilde ir video. Un vairumā gadījumu jūs iegūsit labāku kvalitāti un ietaupīsiet vietu par 50-90%! Dzīvē lielākajai daļai lietu ir savi plusi un mīnusi. Aizstājot GIF ar video, visbiežāk jūs nevarēsit atrast nekādus mīnusus.
Nost ar visiem GIF!
Par laimi, pēdējos gados GIF aizvietošana ar video ir ierasta parādība, tāpēc visi nepieciešamie rīki jau tiek izmantoti. Šajā ierakstā es neizgudrošu riteni no jauna, bet tikai nedaudz uzlabošu esošos risinājumus. Tātad, šeit ir būtība:
- Paņemiet GIF un pārveidojiet to par video
- Kodēt video, izmantojot H.264 vai VP9, t.i. saspiediet to un iesaiņojiet to MP4 vai WebM konteinerā
- Aizvietot
<img>ar ieslēgtu animētu GIF<video>ar rullīti - Ieslēdziet automātisko atskaņošanu bez skaņas un veiciet cilpu, lai iegūtu GIF efektu
Ir 2019. gads
Tagad ir 2019. gads. Progress virzās uz priekšu, un mums ir jāseko tam līdzi. Līdz šim mums ir bijušas divas kodeku opcijas, kas tiek plaši atbalstītas visās pārlūkprogrammās un video kodēšanas rīkos:
- H.264 — ieviests 2003. gadā un visplašāk izmantots mūsdienās
- VP9 - parādījās 2013. gadā un sasniedza saspiešanas uzlabojumus gandrīz par 50%, salīdzinot ar H.264, lai gan ne vienmēr viss ir tik rožaini
Piezīme: Lai gan H.265 ir nākamā H.264 versija un spēj konkurēt ar VP9, es to neuzskatu slikta pārlūkprogrammas atbalsta dēļ, kā parādīts lapā . Licencēšanas izmaksas ir galvenais iemesls, kāpēc H.265 nav kļuvis tik plaši izplatīts kā H.264 un kāpēc Alliance of Open Media konsorcijs strādā ar bezatlīdzības kodeku AV1.
Atcerieties, ka mūsu mērķis ir samazināt milzīgos GIF failus līdz mazākajam iespējamajam izmēram, lai paātrinātu ielādes laiku. 2019. gads būtu dīvains, ja mūsu arsenālā nebūtu jauna video saspiešanas standarta. Bet tas pastāv, un to sauc par AV1. Ar AV1 jūs varat . Pļāpāt! 🙂
AV1 ir jūsu rīcībā kopš 2019. gada!
Uz galddatoriem
Nesen galddatoru versijām tika pievienots atbalsts AV1 video dekodēšanai и . Pašlaik Firefox atbalsts ir kļūdains un var izraisīt avārijas, taču situācijai vajadzētu uzlaboties, pievienojot jau pārlūkprogrammā Firefox 67 ( — apm. tulk.). Lai iegūtu sīkāku informāciju par jauno versiju, lasiet -
Viedtālruņos
Pašlaik viedtālruņiem nav aparatūras atbalsta, jo trūkst atbilstošu dekoderu. Varat veikt programmatūras dekodēšanu, lai gan tas palielinās akumulatora patēriņu. Pirmie mobilie SOC, kas atbalsta AV1 aparatūras dekodēšanu, parādīsies 2020. gadā.
Un tad raksta lasītāji saka: "Ja mobilie tālruņi to vēl neatbalsta, kāpēc izmantot AV1?"
AV1 ir diezgan jauns kodeks, un mēs esam tā adaptācijas pašā sākumā. Uztveriet šo rakstu kā posmu “kamēr jūs gatavojat, pūlis sekos”. Darbvirsmas atbalsts pats par sevi paātrinās vietņu darbību daļai auditorijas. Un vecos kodekus var izmantot kā rezerves scenāriju, ja mērķa ierīcē netiek atbalstīts AV1. Bet, lietotājiem pārejot uz ierīcēm ar AV1 atbalstu, viss būs gatavs. Lai to panāktu, mums ir jāizveido video tags, kā parādīts zemāk, kas ļaus pārlūkprogrammai izvēlēties vēlamo formātu − AV1 - >> VP9 - >> H.264. Nu, ja lietotājam ir ļoti veca ierīce vai navigators, kas vispār neatbalsta video (kas ir ļoti maz ticams ar H264), tad viņš tikai redzēs 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 izveide
Videoklipu izveide AV1 ir vienkārša. un izmantojiet tālāk norādītās komandas. Mēs izmantojam 2 pārejas, lai sasniegtu mērķa bitu pārraides ātrumu. Lai to izdarītu, mēs divreiz izpildīsim ffmpeg. Pirmo reizi ierakstām rezultātu neesošā failā. Tādējādi tiks izveidots žurnāls, kas būs nepieciešams otrajai ffmpeg palaišanai.
# 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Šeit ir parametru sadalījums:
-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 veidošana
Lai izveidotu GIF, es izmantoju tālāk norādīto komandu. Lai samazinātu izmēru, es palielināju GIF līdz 720 pikseļu platumam un 12 kadri/s, nevis sākotnējais 24 kadri/s video.
./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.gifPārbaudes rezultāti
Labāk vienreiz redzēt, nekā simts reizes lasīt, vai ne? Pārliecināsimies, vai AV1 ir mūsu vajadzībām pareizā izvēle. Es uzņēmu šeit pieejamo bezmaksas video Tears Of Steel , un pārveidoja to, izmantojot aptuveni tādu pašu bitu pārraides ātrumu AV1, VP9, H.264 kodekiem. Rezultāti ir zemāk, lai jūs varētu tos salīdzināt pats.
1. piezīme: Ja tālāk esošais fails netiek ielādēts, iespējams, ir pienācis laiks atjaunināt pārlūkprogrammu. Es ieteiktu pārlūkprogrammu, kuras pamatā ir Chromium, piemēram, Chrome, Vivaldi, Brave vai Opera. Šeit ir jaunākā informācija par AV1 atbalstu
2. piezīme: Firefox 66 operētājsistēmā Linux jums būs jāiestata karodziņš media.av1.enabled nozīmē true в about:config
3. piezīme: Esmu nolēmis tālāk neiekļaut parastos GIF attēlus to lielā izmēra un datu apjoma dēļ, kas būtu nepieciešams šīs lapas ielādei! (Kas būtu ironiski, jo šī lapa ir par datu apjoma samazināšanu lapā :)). Bet jūs varat redzēt pēdējos GIF šeit
Tulkotāja piezīme: Habr neļauj iespējot automātisko atskaņošanu un faila cilpu, tāpēc varat novērtēt tikai kvalitāti. Jūs varat redzēt, kā "animētie attēli" izskatīsies tiešraidē .
1. aina @ 200 Kb/s
Šeit ir liela kustība, kas ir īpaši jutīga pie zema bitu pārraides ātruma. Jūs varat uzreiz redzēt, cik slikts H.264 ir ar šo bitu pārraides ātrumu; kvadrāti ir uzreiz redzami. VP9 nedaudz uzlabo situāciju, bet kvadrāti joprojām ir redzami. AV1 nepārprotami uzvar, radot acīmredzami labāku attēlu.
H.264
VP9
AV1
2. aina @ 200 Kb/s
Šeit ir daudz caurspīdīga CGI satura. Rezultāti nav tik atšķirīgi kā pagājušajā reizē, taču kopumā AV1 izskatās labāk.
H.264
VP9
AV1
3. aina @ 100 Kb/s
Šajā ainā mēs samazinām bitu pārraides ātrumu līdz 100 Kb/s, un rezultāti ir konsekventi. AV1 saglabā savu vadošo lomu pat ar zemu bitu pārraides ātrumu!
H.264
VP9
AV1
Ķirsis uz kūkas
Lai pabeigtu šo rakstu, izjūtot saglabāto joslas platumu salīdzinājumā ar GIF — visu videoklipu kopējais izmērs ir lielāks... 1.62 MB!! Pa labi. Daži sasodīti 1,708,032 1 XNUMX baiti! Salīdzinājumam šeit ir norādīti GIF un AVXNUMX video izmēri katrai ainai
GIF
AV1
1. aina
11.7 MB
0.33 MB
2. aina
7.27 MB
0.18 MB
3. aina
5.62 MB
0.088 MB
Vienkārši satriecoši! Vai ne?
Piezīme: VP9 un H264 failu izmēri nav norādīti, jo tie praktiski neatšķiras no AV1, jo tiek izmantots tāds pats bitu pārraides ātrums. Būtu lieki pievienot vēl divas kolonnas ar vienādiem izmēriem, lai tikai uzsvērtu, ka šie kodeki rada daudz labāku kvalitāti nekā GIF ar daudz mazāku failu izmēru.
Avots: www.habr.com