Acum este anul 2019, și este momentul să luăm o decizie cu privire la GIF ( — aici se discută despre pronunția în engleză, ceea ce nu ne interesează — n.r.). GIF-urile ocupă o cantitate enormă de spațiu (de obicei câțiva megabytes!) ceea ce, dacă ești dezvoltator web, contrazice pe deplin dorințele tale! Ca dezvoltator web, vrei să minimizezi lucrurile pe care utilizatorii trebuie să le descarce pentru a permite încărcarea rapidă a site-ului. Din același motiv, îți minimizezi JavaScript-ul, optimizezi PNG, JPEG, iar uneori convertești . Dar ce să facem cu bătrânul GIF?
În locul în care ne îndreptăm, nu vom avea nevoie de GIF-uri!
Dacă scopul tău este să îmbunătățești viteza de încărcare a site-ului, atunci trebuie să scapi de GIF-uri! Dar cum facem apoi imagini animate? Răspunsul este video. Și, în cele mai multe cazuri, vei obține o calitate mai bună și o economie de spațiu de 50-90%! În viață, majoritatea lucrurilor au avantajele și dezavantajele lor. Când înlocuiești GIF-ul cu video, de obicei nu vei găsi dezavantaje.
Să dispară toate GIF-urile!
Din fericire, înlocuirea GIF-urilor cu video a devenit o practică obișnuită în ultimii ani, așa că toate instrumentele necesare sunt deja disponibile. În această postare, nu voi reinventa roata, ci voi îmbunătăți doar soluțiile existente. Așadar, iată esența:
- Ia un GIF și convertește-l în video
- Código video folosind H.264 sau VP9, adică comprimă-l și împachetează-l într-un container MP4 sau WebM
- Înlocuiește
<img>GIF-ul animat cucu clipul - Activează redarea automată fără sunet și repetă, pentru a obține efectul GIF
Acum este anul 2019
Acum este anul 2019. Progresul avansează, și trebuie să ținem pasul. Până acum, avem două opțiuni de codecuri care sunt larg acceptate în toate browserele și instrumentele de codare video:
- H.264 — apărut în 2003 și cel mai utilizat astăzi
- VP9 — apărut în 2013 și care a atins o îmbunătățire a compresiei de aproape 50% comparativ cu H.264, deși nu totul este așa de roz
Notă: deși standardul H.265 — următoarea versiune a H.264, este capabil să concureze cu VP9, nu îl iau în considerare din cauza suportului slab din partea browserelor, ceea ce este evidențiat pe pagină. . Cheltuielile de licențiere reprezintă principala cauză pentru care H.265 nu a devenit la fel de răspândit ca H.264 și pentru care consorțiul Alliance of Open Media lucrează cu un codec fără taxe — AV1.
Țineți minte că scopul nostru este de a reduce dimensiunea uriașelor GIF-uri la cea mai mică mărime posibilă pentru a îmbunătăți timpul de încărcare. Ar fi fost un an 2019 ciudat dacă nu am fi avut un nou standard pentru comprimarea video. Dar acesta există și se numește AV1. Cu AV1, putem . Super! 🙂
AV1 este la dispoziția dumneavoastră din 2019!
Pe desktopuri
Recent, suportul pentru decodarea video AV1 a fost adăugat în versiunile desktop și . În prezent, suportul în Firefox are unele probleme și poate cauza erori, dar lucrurile ar trebui să se îmbunătățească cu adăugarea în Firefox 67 ( — nota trad.). Pentru detalii despre noua versiune, citiți —
Pe smartphone-uri
Pentru smartphone-uri, suportul hardware este în prezent inexistent din cauza lipsei decodoarelor corespunzătoare. Se poate realiza decodare software, dar acest lucru va duce la un consum crescut de baterie. Primele SOC-uri mobile cu suport pentru decodare hardware AV1 vor apărea în 2020.
Și aici cititorii articolului s-ar întreba «dacă smartphone-urile nu susțin încă bine, de ce să folosim AV1?»
AV1 este un codec relativ nou și ne aflăm la începutul adaptării sale. Luați în considerare acest articol ca o etapă „în timp ce pregătiți, lumea se alătură”. Suportul pe desktopuri va accelera deja site-urile pentru o parte a audienței. Iar vechile codecuri pot fi utilizate ca scenarii fallback, atunci când AV1 nu este acceptat pe dispozitivul țintă. Cu toate acestea, pe măsură ce utilizatorii trec la dispozitive cu suport AV1, totul va fi pregătit. Pentru a realiza acest lucru, trebuie să creăm un tag video, așa cum este arătat mai jos, care va permite browserului să aleagă formatul preferat — AV1 ->> VP9 ->> H.264. Ei bine, dacă utilizatorul are un dispozitiv foarte vechi sau un navigator care nu suportă deloc video (ceea ce este foarte puțin probabil cu H264), atunci el va vedea doar 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>Crearea AV1
Crearea unui video în AV1 nu este greu. și folosiți comenzile de mai jos. Folosim 2 treceri pentru a atinge bit rate-ul țintă. Pentru aceasta, vom rula ffmpeg de două ori. Prima dată, vom salva rezultatul într-un fișier inexistent. Acest lucru va crea un jurnal, care va fi necesar pentru a doua rulare a 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.mp4Iată descompunerea parametrilor:
-i - Fișier de intrare.
-pix_fmt - Formatul 4:2:0 este utilizat pentru a selecta informațiile despre culoare în video. Există multe alte formate posibile, dar 4:2:0 este cel mai compatibil.
-c:v - Ce codec să folosim, în cazul nostru - AV1.<br />
-b:v – Bitrate mediu pe care dorim să îl obținem.
-filter:v scale - Filtrul de scalare ffmpeg este utilizat pentru a reduce rezoluția video. Stabilim X:-1, ceea ce indică ffmpeg să reducă lățimea la X, păstrând raportul de aspect.
-strict experimental - Trebuie specificat, deoarece AV1 este un codec destul de nou.
-cpu-used - Parametru prost numit, care este de fapt utilizat pentru a selecta nivelul de calitate al video-ului. Valorile posibile sunt 0-4. Cu cât valoarea este mai mică, cu atât calitatea este mai bună și, în consecință, mai mult timp va dura codificarea.
-tile-columns - Pentru a utiliza mai multe fire de execuție. Indică AV1 să împartă video-ul în coloane separate, care pot fi recodificate independent pentru o mai bună utilizare a CPU-ului.
-row-mt – La fel ca parametru anterior, dar împarte și pe linii în interiorul coloanelor.
-threads - Numărul de fire de execuție.
-pass - Ce trecere se desfășoară acum.
-f - Utilizat doar la prima trecere. Indică formatul fișierului de ieșire, adică MP4 în cazul nostru.
-movflags faststart - Activăm startul rapid al video-ului, mutând o parte din date la începutul fișierului. Acest lucru va permite începerea redării chiar înainte de finalizarea încărcării fișierului.
Crearea GIF-urilor
Pentru a crea un GIF, am folosit comanda prezentată mai jos. Pentru a reduce dimensiunea, am scalat GIF-ul la 720px lățime și 12 fps în loc de 24 fps din video original.
./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.gifRezultatele testelor
Mai bine să vezi o dată decât să citești de o sută de ori, nu-i așa? Să ne asigurăm că AV1 este alegerea corectă pentru scopurile noastre. Am luat un video gratuit Tears Of Steel, disponibil aici , și l-am convertit, folosind un bit rate similar pentru codec-urile AV1, VP9, H.264. Rezultatele sunt mai jos, așa că puteți să le comparați singuri.
Notă 1: Dacă fișierul de mai jos nu se încarcă, poate ar trebui să-ți actualizezi browserul. Aș recomanda un browser bazat pe Chromium, de exemplu, Chrome, Vivaldi, Brave sau Opera. Iată cele mai recente informații despre suportul AV1
Notă 2: Pentru Firefox 66 pe Linux va trebui să setezi flag-ul media.av1.enabled to the value true în about:config
Notă 3: Am decis să nu includ GIF-urile obișnuite de mai jos din cauza dimensiunii lor mari și a volumului de date care ar putea fi necesar pentru a încărca această pagină! (Ceea ce ar fi ironic, deoarece această pagină vorbește despre reducerea volumului de date!). Dar poți viziona GIF-urile finale aici
Nota translatorului: Habr nu permite activarea redării automate și looping pentru fișier, așa că va trebui să evaluați doar calitatea. Poți să vezi cum vor arăta „imaginile animate” în direct în .
Scena 1 @ 200 Kbps
Aici este multă mișcare, ceea ce este deosebit de sensibil la bit rate-uri scăzute. Se vede imediat cât de rău este H.264 la acest bit rate, pătrățelele sunt vizibile. VP9 îmbunătățește puțin situația, dar pătrățelele sunt tot acolo. AV1 câștigă clar, oferind o imagine evident mai bună.
H.264
VP9
AV1
Scena 2 @ 200 Kbps
Aici există mult conținut CGI semi-transparent. Rezultatele nu mai diferă atât de mult precum data trecută, dar în general AV1 arată mai bine.
H.264
VP9
AV1
Scena 3 @ 100 Kbps
În această scenă, scădem bit rate-ul la 100 Kbps și rezultatele reflectă acest lucru. AV1 își păstrează avantajul și la bit rate-uri scăzute!
H.264
VP9
AV1
Cireașa de pe tort
Pentru a încheia articolul, simțind cantitatea de trafic economisit comparativ cu GIF-urile – dimensiunea totală a tuturor video-urilor de mai sus… 1.62 MB!! Corect. Câtiva 1,708,032 de octeți! Spre comparație, iată dimensiunea video GIF și AV1 pentru fiecare dintre scene
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
Pur și simplu uimitor! Nu-i așa?
Notă: Dimensiunile fișierelor VP9 și H264 nu sunt prezentate, deoarece practic nu se deosebesc de AV1 din cauza utilizării aceleași rate de biți. Ar fi redundant să adăugăm încă două coloane cu dimensiuni identice, doar pentru a sublinia că aceste codec-uri oferă o calitate mult mai bună decât GIF la dimensiuni mult mai mici.
Sursa: habr.com
