Ora è il 2019 e dobbiamo prendere una decisione riguardo ai GIF ( — qui si parla della pronuncia in inglese, per noi non è rilevante — nota del traduttore.). I GIF occupano enormi quantità di spazio (solitamente diversi megabyte!) che, se sei uno sviluppatore web, va completamente contro i tuoi desideri! Come sviluppatore web, vuoi minimizzare le cose che gli utenti devono scaricare affinché il sito si carichi rapidamente. Per la stessa ragione, riduci al minimo JavaScript, ottimizzi PNG, JPEG e a volte converti . Ma cosa fare con il vecchio GIF?
Dove stiamo andando, non avremo bisogno dei GIF!
Se il tuo obiettivo è migliorare la velocità di caricamento del sito, devi eliminare i GIF! Ma come si fanno allora le immagini animate? La risposta è: video. E nella maggior parte dei casi, otterrai una qualità migliore e un risparmio di spazio del 50-90%! Nella vita, la maggior parte delle cose ha i suoi pro e i suoi contro. Quando sostituisci un GIF con un video, di solito è difficile trovare degli svantaggi.
Via tutti i GIF!
Fortunatamente, la sostituzione dei GIF con i video è stata una pratica comune negli ultimi anni, quindi tutti gli strumenti necessari sono già in circolazione. In questo post, non inventerò la ruota, ma migliorerò leggermente le soluzioni esistenti. Ecco il punto:
- Prendi un GIF e riconvertilo in video
- Codifica il video usando H.264 o VP9, cioè comprimilo e imballalo in un contenitore MP4 o WebM
- Sostituisci
<img>un GIF animato conun video - Abilita la riproduzione automatica senza audio e metti in loop, per ottenere l'effetto GIF
Ora è il 2019
Ora è il 2019. Il progresso va avanti e dobbiamo rimanere al passo. Fino ad ora abbiamo avuto due varianti di codec ampiamente supportati in tutti i browser e negli strumenti di codifica video:
- H.264 — apparso nel 2003 e il più utilizzato oggi
- VP9 — apparso nel 2013 e ha migliorato la compressione quasi del 50% rispetto a H.264, anche se non è sempre così roseo
Nota: anche se lo standard H.265 — la versione successiva di H.264 e in grado di competere con VP9, non lo considero a causa della scarsa supporto da parte dei browser, come indicato nella pagina . Le spese di licenza sono la principale ragione per cui H.265 non è diventato così diffuso come H.264 e per cui il consorzio Alliance of Open Media sta lavorando a un codec senza royalty: AV1.
Ricordate che il nostro obiettivo è ridurre i enormi GIF al più piccolo formato possibile per accelerare il caricamento. Sarebbe stato strano nel 2019 se non avessimo avuto un nuovo standard per la compressione video. Ma ce l'abbiamo e si chiama AV1. Con AV1 si può . Meraviglioso! 🙂
AV1 è a vostra disposizione dal 2019!
Sui desktop
Recentemente, il supporto per la decodifica video AV1 è stato aggiunto nelle versioni desktop di e . Proprio ora, il supporto in Firefox ha dei problemi e può causare dei crash, ma le cose dovrebbero migliorare con l'aggiunta di già in Firefox 67 ( — nota del traduttore.). Per i dettagli sulla nuova versione leggete —
Sugli smartphone
Per gli smartphone, il supporto hardware attualmente non è disponibile a causa dell'assenza di decodificatori compatibili. È possibile effettuare la decodifica software, ma questo comporterà un aumento del consumo della batteria. I primi SOC mobili con supporto per la decodifica hardware AV1 saranno disponibili nel 2020.
E qui i lettori dell'articolo diranno: «Se gli smartphone non supportano bene, perché usare AV1?»
AV1 è un codec piuttosto nuovo e siamo all'inizio della sua adozione. Pensate a questo articolo come a una fase «mentre cucinate, le persone si stanno avvicinando». Il supporto sui desktop da solo accelererà i siti per una parte del pubblico. I vecchi codec possono essere utilizzati come scenario di fallback quando il dispositivo in uso non supporta AV1. Ma con il passaggio degli utenti a dispositivi che supportano AV1, tutto sarà già pronto. Per fare ciò, dobbiamo creare un tag video, come mostrato di seguito, che consenta al browser di scegliere il formato preferito — AV1 ->> VP9 ->> H.264. E se l'utente ha un dispositivo o un browser davvero vecchio che non supporta affatto il video (cosa piuttosto improbabile con H.264), vedrà semplicemente un 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
Creare un video in AV1 non è difficile. e usa i comandi qui sotto. Utilizziamo 2 passaggi per raggiungere il bitrate target. Per questo, eseguiremo ffmpeg due volte. La prima volta registreremo il risultato in un file inesistente. Questo creerà un registro che sarà necessario per la seconda esecuzione 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.mp4Ecco la spiegazione dei parametri:
-i - File di input.
-pix_fmt - Formato 4:2:0 utilizzato per selezionare le informazioni sul colore nel video. Ci sono molti altri formati possibili, ma 4:2:0 è il più compatibile.
-c:v - Quale codec utilizzare, nel nostro caso - AV1.<br />
-b:v – Bitrate medio che desideriamo raggiungere.
-filter:v scale - Il filtro di scaling di ffmpeg viene utilizzato per ridurre la risoluzione video. Impostiamo X:-1, il che indica a ffmpeg di ridurre la larghezza a X, mantenendo il rapporto di aspetto.
-strict experimental - Deve essere specificato, poiché AV1 è un codec piuttosto nuovo.
-cpu-used - Un parametro male nominato, che in realtà viene utilizzato per selezionare il livello di qualità video. I valori possibili sono 0-4. Minore è il valore, migliore è la qualità e, di conseguenza, maggiore sarà il tempo necessario per la codifica.
-tile-columns - Per utilizzare più thread. Indica ad AV1 di suddividere il video in colonne separate, che possono essere codificate indipendentemente per un migliore utilizzo della CPU.
-row-mt – Stesso di quanto sopra, ma suddivide anche in righe all'interno delle colonne.
-threads - Numero di thread.
-pass - Quale passaggio viene attualmente eseguito.
-f - Utilizzato solo nel primo passaggio. Specifica il formato del file di output, ovvero MP4 nel nostro caso.
-movflags faststart - Abilitiamo l'avvio rapido del video spostando parte dei dati all'inizio del file. Questo consentirà di iniziare la riproduzione prima che il file sia completamente caricato.
Creazione GIF
Per creare il GIF ho utilizzato il comando qui sotto. Per ridurre le dimensioni, ho scalato il GIF a 720 pixel di larghezza e 12 fps invece dei 24 fps del video originale.
./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 dei test
È meglio vedere una volta che leggere cento volte, vero? Assicuriamoci che AV1 sia la scelta giusta per i nostri obiettivi. Ho preso un video gratuito Tears Of Steel, disponibile qui , e l'ho convertito, utilizzando un bitrate abbastanza simile per i codec AV1, VP9, H.264. I risultati sono qui sotto, così potete confrontarli da soli.
Nota 1: Se il file qui sotto non si carica, potrebbe essere il momento di aggiornare il browser. Ti consiglio di usare un browser basato su Chromium, come Chrome, Vivaldi, Brave o Opera. Ecco le ultime informazioni sul supporto per AV1
Nota 2: Per Firefox 66 su Linux dovrai abilitare il flag media.av1.enabled a valore true in about:config
Nota 3: Ho deciso di non includere i normali GIF qui sotto a causa delle loro grandi dimensioni e del volume di dati che potrebbero richiedere per caricare questa pagina! (Il che sarebbe ironico, dato che questa pagina riguarda la riduzione del volume di dati sulla pagina :)). Ma puoi vedere i GIF finali qui
Nota del traduttore: Habr non consente di attivare la riproduzione automatica e il looping del file, quindi sarà possibile valutare solo la qualità. Puoi vedere come appariranno le 'immagini animate' dal vivo in .
Scena 1 @ 200 Kbps
C'è molto movimento qui, il che è particolarmente sensibile a bitrate bassi. È subito visibile quanto sia pessimo H.264 a questo bitrate; i quadrati sono evidenti. VP9 migliora leggermente la situazione, ma i quadrati sono ancora visibili. AV1 chiaramente vince, producendo un'immagine decisamente migliore.
H.264
VP9
AV1
Scena 2 @ 200 Kbps
C'è molto contenuto CGI trasparente qui. I risultati non differiscono così tanto come prima, ma in generale AV1 appare migliore.
H.264
VP9
AV1
Scena 3 @ 100 Kbps
In questa scena, abbassiamo il bitrate a 100 Kbps e i risultati ne rispecchiano. AV1 mantiene il primato anche a bitrate bassi!
H.264
VP9
AV1
La ciliegina sulla torta
Per completare l'articolo, sentendo la quantità di traffico risparmiato rispetto a GIF — la dimensione totale di tutti i video è superiore… 1,62 MB!! Giusto. Circa 1.708.032 byte! A titolo di confronto, ecco le dimensioni del video GIF e AV1 per ciascuna delle 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
È semplicemente sorprendente! Giusto?
Nota: Le dimensioni dei file VP9 e H264 non sono fornite, poiché non differiscono praticamente da AV1 a causa dell'uso dello stesso bitrate. Sarebbe ridondante aggiungere altre due colonne con dimensioni identiche, solo per sottolineare che questi codec offrono una qualità molto superiore rispetto a GIF a dimensioni di file molto inferiori.
Fonte: habr.com
