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-ը մեծացրել եմ մինչև 720 պիքսել լայնությունը և 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: Linux-ի վրա Firefox 66-ի համար դուք պետք է դրոշը սահմանեք 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 Կբիթ/վրկ, և արդյունքները համահունչ են: AV1-ը պահպանում է իր առաջատարությունը նույնիսկ ցածր բիթային արագությամբ:
H.264
VP9
AV1
Վիշենկա տորթերի վրա
Այս հոդվածն ավարտելու համար զգալով GIF-ի համեմատ խնայված թողունակության քանակը՝ բոլոր տեսանյութերի ընդհանուր չափն ավելի բարձր է... 1.62 ՄԲ!! Ճիշտ. Որոշ 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-ը:
Source: www.habr.com