Hè u 2019 è hè ora di decidemu nantu à i GIF ( - quì parlemu di a pronuncia in inglese, per noi ùn hè micca pertinente - approx. traduzzione). I GIF occupanu una grande quantità di spaziu (di solitu parechji megabyte!), chì, sè vo site un sviluppatore web, hè cumplettamente contru à i vostri desideri! Cum'è sviluppatore web, vulete minimizzà e cose chì l'utilizatori anu bisognu di scaricà in modu chì u situ carica rapidamente. Per u listessu mutivu, minify JavaScript, ottimisate PNG, JPEG, è qualchì volta cunvertisce . Ma chì fà cù u vechju GIF?
Ùn avemu micca bisognu di GIF induve andemu!
Se u vostru scopu hè di migliurà a velocità di carica di u situ, allora avete bisognu di sguassà i GIF! Ma cumu fà allora i ritratti animati ? A risposta hè video. È in a maiò parte di i casi, uttene una qualità megliu è un risparmiu di spaziu di 50-90%! In a vita, a maiò parte di e cose anu i so pros è cuns. Quandu si rimpiazzà GIF cù video, a maiò parte di spessu ùn puderete micca truvà alcunu cunsunzione.
Basta cù tutti i GIF!
Per furtuna, rimpiazzà i GIF cù video hè statu cumunu in l'ultimi anni, cusì tutti l'arnesi necessarii sò digià in usu. In questu post, ùn aghju micca reinventà a rota, ma solu migliurà ligeramente e soluzioni esistenti. Allora eccu l'essenza:
- Pigliate un GIF è cunvertisce in un video
- Codificate u video cù H.264 o VP9, i.e. cumpressate è imballate in un containeru MP4 o WebM
- Sustituisce
<img>cù GIF animatu<video>cù rullu - Attiva a riproduzione automatica senza sonu è loop per un effettu GIF
Hè 2019
Avà hè 2019. U prugressu avanza, è ci vole à seguità. Finu a ora avemu avutu duie opzioni di codec chì sò largamente supportati in tutti i navigatori è strumenti di codificazione video:
- H.264 - introduttu in u 2003 è u più utilizatu oghje
- VP9 - hè apparsu in u 2013 è hà ottinutu megliurenze di compressione di quasi 50% cumparatu à H.264, anche se micca tuttu ùn hè micca sempre cusì rosa
Nutate bè: Ancu s'ellu H.265 hè a prossima versione di H.264 è hè capaci di cumpetizione cù VP9, Ùn l'aghju micca cunsideratu per via di un supportu di navigatore poviru, cum'è mostra in a pagina. . I costi di licenza sò u mutivu principale perchè H.265 ùn hè micca diventatu cum'è H.264 è perchè u cunsorziu Alliance of Open Media hè travagliatu cù un codec senza royalty, AV1.
Ricurdativi, u nostru scopu hè di riduce GIF enormi à u più chjucu pussibule per accelerà i tempi di carica. Saria un stranu 2019 se ùn avemu micca avutu un novu standard per a cumpressione video in u nostru arsenale. Ma esiste è hè chjamatu AV1. Cù AV1 pudete . Lepota ! 🙂
AV1 hè à u vostru serviziu dapoi u 2019!
Nantu à i desktop
Recentemente u supportu per a decodificazione di video AV1 hè statu aghjuntu à e versioni di desktop и . Avà u supportu di Firefox hè buggy è pò causà crashes, ma e cose anu da migliurà cù l'aghjunzione di digià in Firefox 67 ( - ca. trad.). Per i dettagli nantu à a nova versione leghjite -
Nantu à i smartphones
Attualmente ùn ci hè micca supportu hardware per i telefoni intelligenti per a mancanza di decodificatori adatti. Pudete fà a decodificazione di u software, ancu s'ellu hà da purtà à un aumentu di u cunsumu di bateria. I primi SOC mobili chì supportanu a decodificazione di hardware AV1 appariranu in 2020.
E allora i lettori di l'articulu sò cum'è, "quindi se i telefuni mobili ùn sustene micca bè, perchè aduprà AV1?"
AV1 hè un codec abbastanza novu, è simu à u principiu di a so adattazione. Pensate à questu articulu cum'è a tappa "mentre cucini, a folla seguitarà". U supportu di desktop stessu accelerà i siti per alcuni di l'audienza. È i vechji codecs ponu esse usatu cum'è un scenariu di fallback quandu AV1 ùn hè micca supportatu in u dispusitivu di destinazione. Ma cum'è l'utilizatori cambianu à i dispositi cù supportu AV1, tuttu serà prontu. Per ottene questu, avemu bisognu di creà una tag video cum'è mostra quì sottu, chì permetterà à u navigatore di selezziunà u so formatu preferitu - AV1 - >> VP9 - >> H.264. Ebbè, se l'utilizatore hà un vechju dispositivu o navigatore chì ùn sustene micca u video (chì hè assai improbabile cù H264), allura vi appena vede u 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>Creazione di AV1
A creazione di video in AV1 hè faciule. è aduprà i cumandamenti sottu. Utilizemu 2 passaghji per ottene u bitrate di destinazione. Per fà questu, correremu ffmpeg duie volte. A prima volta scrivemu u risultatu in un schedariu inesistente. Questu hà da creà un logu chì serà necessariu per a seconda run di 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.mp4Eccu un spartimentu di i paràmetri:
-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 - Включаем быстрый старт видео, перемещая часть данных в начало файла. Это позволит начать воспроизведение ещё до полной загрузка файла.
Fà GIF
Per creà u GIF aghju utilizatu u cumandimu sottu. Per riduce a dimensione, aghju scalatu u GIF à 720px di larghezza è 12 fps invece di u video originale di 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.gifRisultati di test
Hè megliu à vede una volta chè à leghje centu volte, nò ? Fighjemu chì l'AV1 hè a scelta bona per i nostri scopi. Aghju pigliatu u video gratuitu di Tears Of Steel dispunibule quì , è u cunvertisce utilizendu circa u listessu bitrate per i codecs AV1, VP9, H.264. I risultati sò quì sottu per pudè paragunà per voi stessu.
Nota 1: Se u schedariu sottu ùn carica per voi, pò esse u tempu di aghjurnà u vostru navigatore. Avissi cunsigliatu un navigatore basatu Chromium cum'è Chrome, Vivaldi, Brave o Opera. Eccu l'ultime informazioni nantu à u supportu AV1
Nota 2: Per Firefox 66 in Linux avete bisognu di stabilisce a bandiera media.av1.enabled in significatu true в about:config
Nota 3: Aghju decisu di ùn include micca GIF regulare quì sottu per via di a so grande dimensione è di a quantità di dati chì avissi bisognu di carricà sta pagina! (Chì seria ironicu, postu chì sta pagina hè di riduce a quantità di dati in una pagina :)). Ma pudete vede i GIF finali quì
Nota di u traduttore: Habr ùn vi permette micca di attivà l'autoplay è loop u schedariu, cusì pudete solu valutà a qualità. Pudete vede ciò chì i "imaghjini animati" pareranu in diretta .
Scena 1 @ 200 Kbps
Ci hè assai muvimentu quì, chì hè soprattuttu sensibile à i bitrates bassu. Pudete vede immediatamente quantu hè male H.264 à questu bitrate; i quadrati sò immediatamente visibili. VP9 migliurà a situazione un pocu, ma i quadrati sò sempre visibili. AV1 vince chjaramente, producendu una stampa ovviamente megliu.
H.264
VP9
AV1
Scena 2 @ 200 Kbps
Ci hè assai cuntenutu CGI trasluzente quì. I risultati ùn sò micca cusì diffirenti cum'è l'ultima volta, ma in generale l'AV1 pare megliu.
H.264
VP9
AV1
Scena 3 @ 100 Kbps
In questa scena, turnemu u bitrate à 100 Kbps è i risultati sò cunsistenti. AV1 mantene a so dirigenza ancu à bassi bitrate!
H.264
VP9
AV1
Ciliegia nantu à a torta
Per finisce stu articulu sentendu a quantità di larghezza di banda salvata cumparatu cù GIF - a dimensione tutale di tutti i video hè più altu... 1.62 MB !! Diritta. Qualchi cazzo di 1,708,032 byte! Per paragunà, quì sò e dimensioni di video GIF è AV1 per ogni scena
GIF
AV1
Scena 1
11.7 MB
0.33 MB
Scena 2
7.27 MB
0.18 MB
Scena 3
5.62 MB
0.088 MB
Simply stupente! Ùn hè micca?
Nutate bè: I dimensioni di u schedariu di VP9 è H264 ùn sò micca datu, postu chì ùn sò praticamenti micca sfarente di AV1 per via di l'usu di u listessu bitrate. Saria redundante per aghjunghje duie colonne più cù e stesse dimensioni, solu per mette in risaltu chì questi codec producenu una qualità assai megliu cà GIF à dimensioni di fugliale assai più chjuche.
Source: www.habr.com