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-жылы пайда болгон жана H.50 менен салыштырганда дээрлик 264% кысуу жакшыртууга жетишкен, бирок баары дайыма эле кызгылтым боло бербейт
Эскертүү: H.265 H.264тин кийинки версиясы жана VP9 менен атаандашууга жөндөмдүү болсо да, мен аны бетте көрсөтүлгөндөй, браузердин начар колдоосунан улам деп эсептебейм. . Лицензиялык чыгымдар H.265тин H.264 сыяктуу кеңири жайыла электигинин жана Ачык Медиа консорциумунун Альянсы роялтисиз кодек AV1 менен иштешинин негизги себеби болуп саналат.
Эсиңизде болсун, биздин максатыбыз - жүктөө убактысын тездетүү үчүн чоң GIF сүрөттөрүн мүмкүн болушунча кичирейтүү. Биздин арсеналыбызда видеону кысуу үчүн жаңы стандарт болбосо, 2019-жыл таң калыштуу болмок. Бирок ал бар жана AV1 деп аталат. AV1 менен сиз жасай аласыз . Lepota! 🙂
AV1 2019-жылдан бери кызматта!
Иш такталарында
Жакында AV1 видео декоддоосун колдоо иш столунун версияларына кошулду и . Учурда Firefox колдоосу мүчүлүштүктөр жана каталарды жаратышы мүмкүн, бирок кошумчалоо менен баары жакшырыш керек Firefox 67де мурунтан эле ( — болжол менен. котормо.). Жаңы версия тууралуу чоо-жайын билүү үчүн - окуңуз
Смартфондордо
Тиешелүү декодерлердин жоктугунан азыркы учурда смартфондор үчүн аппараттык колдоо жок. Сиз программалык камсыздоону чечмелей аласыз, бирок бул батареянын керектелишине алып келет. AV1 аппараттык декоддоосун колдогон биринчи мобилдик SOCs 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: Төмөнкү файл сизге жүктөлбөсө, браузериңизди жаңыртууга убакыт келип калышы мүмкүн. Мен Chrome, Vivaldi, Brave же Opera сыяктуу Chromium негизиндеги браузерди сунуштайт элем. Бул жерде AV1 колдоо боюнча акыркы маалымат
Эскертүү 2: Linux боюнча Firefox 66 үчүн желекти орнотуу керек media.av1.enabled мааниге true в about:config
Эскертүү 3: Мен төмөнкү кадимки GIF сүрөттөрүн кошпоону чечтим, анткени алардын көлөмү чоң жана бул баракты жүктөө үчүн талап кылынган маалыматтардын көлөмү! (Бул ирониялуу болмок, анткени бул барак беттеги маалыматтардын көлөмүн азайтуу жөнүндө :)). Бирок акыркы GIF сүрөттөрүн бул жерден көрө аласыз
Котормочунун эскертүүсү: Habr сизге файлды автоматтык түрдө ойнотууга жана циклге өткөрүүгө жол бербейт, андыктан сапатын гана баалай аласыз. Сиз түз эфирде "анимацияланган сүрөттөр" кандай болорун көрө аласыз .
1-сцена @ 200 Кбит/сек
Бул жерде кыймыл көп, ал өзгөчө төмөн бит ылдамдыктарында сезгич. Бул ылдамдыкта H.264 канчалык начар экенин дароо көрө аласыз; квадраттар дароо көрүнүп турат. VP9 кырдаалды бир аз жакшыртат, бирок квадраттар дагы эле көрүнүп турат. AV1 ачык-айкын жеңип, жакшыраак сүрөттү жаратат.
H.264
VP9
AV1
2-сцена @ 200 Кбит/сек
Бул жерде тунук CGI мазмуну көп. Натыйжалар акыркы убактагыдай эмес, бирок жалпысынан AV1 жакшыраак көрүнөт.
H.264
VP9
AV1
3-сцена @ 100 Кбит/сек
Бул көрүнүштө биз бит ылдамдыгын 100 Кбит/сек чейин түшүрөбүз жана натыйжалар ырааттуу. 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ке караганда алда канча кичине файл өлчөмдөрүндө алда канча жакшыраак сапатты чыгарарын баса белгилөө үчүн, бирдей өлчөмдөгү дагы эки мамычаны кошуу ашыкча болмок.
Source: www.habr.com