Siamo nel 2019 e dobbiamo prendere una decisione riguardo ai GIF ( — qui si parla di pronuncia in inglese, per noi non è rilevante — nota del traduttore.). I GIF occupano moltissimo spazio (di solito diversi megabyte!) il che, se sei uno sviluppatore web, va completamente contro le tue intenzioni! Come sviluppatore web, vuoi minimizzare ciò che gli utenti devono scaricare affinché il sito si carichi rapidamente. Per lo stesso motivo, riduci al minimo il JavaScript, ottimizzi PNG, JPEG e talvolta converti . Ma cosa fare con il vecchio GIF?
Laddove stiamo andando, non avremo bisogno dei GIF!
Se il tuo obiettivo è migliorare la velocità di caricamento del sito, allora devi eliminare i GIF! Ma come fare animazioni? La risposta è video. E nella maggior parte dei casi, otterrai una qualità migliore e un risparmio di spazio del 50-90%! Nella vita, molte cose hanno i loro pro e contro. Quando sostituisci un GIF con un video, di solito è difficile trovare dei contro.
Via tutti i GIF!
Fortunatamente, sostituire il GIF con un video è diventato usuale negli ultimi anni, quindi tutti gli strumenti necessari sono già a disposizione. In questo post, non reinventerò la ruota, ma migliorerò leggermente le soluzioni esistenti. Quindi, ecco la sostanza:
- Prendi un GIF e riconvertilo in un video
- Codifica il video usando H.264 o VP9, ossia comprimilo e confezionalo in un contenitore MP4 o WebM
- Sostituisci
<img> - Attiva la riproduzione automatica senza audio e metti in loop per ottenere l'effetto GIF
Siamo nel 2019
Siamo nel 2019. Il progresso avanza, e noi dobbiamo stare al passo. Finora abbiamo avuto due opzioni di codec, che sono ampiamente supportate in tutti i browser e negli strumenti di codifica video:
- H.264 — emerso nel 2003 e attualmente il più utilizzato
- VP9 — emerso nel 2013 e ha ottenuto un miglioramento della compressione di quasi il 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 può competere con VP9, non lo considero a causa della scarsa supporto nei browser, come dimostrato nella pagina . I costi di licensing 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 su un codec senza royalties: AV1.
Ricorda che il nostro obiettivo è ridurre le enormi dimensioni dei GIF al minimo possibile per velocizzare il caricamento. Sarebbe stato strano il 2019 se non avessimo avuto un nuovo standard per la compressione video. Ed è qui, si chiama AV1. Con AV1 puoi . Che bellezza! 🙂
AV1 è a tua disposizione dal 2019!
Su desktop
Di recente è stata aggiunta la supporto per la decodifica video AV1 nelle versioni desktop di e . In questo momento il supporto in Firefox è instabile e potrebbe causare crash, ma le cose dovrebbero migliorare con l'aggiunta del già in Firefox 67 ( — nota di traduzione). Per dettagli sulla nuova versione leggi —
Su smartphone
Attualmente non è disponibile supporto hardware per smartphone a causa della mancanza di decoder appropriati. È 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 arriveranno nel 2020.
E qui i lettori dell'articolo sono tipo: «se i dispositivi mobili non supportano ancora correttamente, perché dovremmo usare AV1?»
AV1 è un codec piuttosto nuovo e siamo solo all'inizio della sua adozione. Pensate a questo articolo come a un periodo di preparazione: «mentre voi vi preparate, il pubblico si adegua». 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 AV1 non è supportato dal dispositivo target. Ma mentre gli utenti passeranno a dispositivi che supportano AV1, tutto sarà già pronto. Per ottenere ciò, dobbiamo creare un tag video, come mostrato di seguito, che consenta al browser di scegliere il formato preferito — AV1 -> VP9 -> H.264. Ma se l'utente possiede un dispositivo o un browser davvero obsoleto che non supporta affatto il video (il che è estremamente improbabile con H264), quindi 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 è semplice. e utilizza i comandi qui sotto. Utilizziamo 2 passaggi per raggiungere il bitrate target. Per questo, eseguiremo ffmpeg due volte. La prima volta scriveremo 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 - Usa il formato 4:2:0 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 vogliamo raggiungere.
-filter:v scale - Il filtro di scaling ffmpeg viene utilizzato per ridurre la risoluzione del video. Impostiamo X:-1 che dice a ffmpeg di ridurre la larghezza a X, mantenendo il rapporto d'aspetto.
-strict experimental - Deve essere specificato, poiché AV1 è un codec piuttosto nuovo.
-cpu-used - Un parametro mal nominato, utilizzato in realtà per scegliere il livello di qualità video. I valori possibili sono 0-4. Più basso è il valore, migliore è la qualità e, di conseguenza, più tempo richiederà la codifica.
-tile-columns - Per usare più thread. Dice ad AV1 di suddividere il video in colonne separate, che possono essere ricodificate indipendentemente per una migliore utilizzazione della CPU.
-row-mt – Simile al parametro precedente, ma suddivide anche in righe all'interno delle colonne.
-threads - Numero di thread.
-pass - Quale passaggio viene attualmente eseguito.
-f - Utilizzato solo al primo passaggio. Indica il formato del file di output, cioè MP4 nel nostro caso.
-movflags faststart - Abilitiamo l'avvio rapido del video, spostando parte dei dati all'inizio del file. Ciò consente di iniziare la riproduzione prima del completamento del download del file.
Creazione di GIF
Per creare un GIF ho utilizzato il comando riportato qui sotto. Per ridurre la dimensione, ho scalato il GIF a 720px 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 simile per i codec AV1, VP9, H.264. I risultati sono qui sotto, così puoi confrontarli da solo.
Nota 1: Se il file qui sotto non si carica, potrebbe essere il momento di aggiornare il tuo browser. Ti consiglierei un browser basato su Chromium, come Chrome, Vivaldi, Brave o Opera. Ecco le ultime informazioni sul supporto di AV1
Nota 2: Per Firefox 66 su Linux, è necessario impostare il flag media.av1.enabled su 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 sarebbe necessario per caricare questa pagina! (Ironico, considerando che questa pagina riguarda la riduzione del volume di dati!). Tuttavia, puoi visualizzare i GIF finali qui
Nota del traduttore: Habr non consente di abilitare la riproduzione automatica e di ciclare il file, quindi sarà possibile valutare solo la qualità. Puoi vedere come appariranno le "immagini animate" dal vivo in .
Scena 1 @ 200 Kbps
Qui c'è molto movimento, il che è particolarmente evidente a bitrate bassi. È subito chiaro quanto sia scadente H.264 a questo bitrate quando sembra a quadrettoni. VP9 migliora un po' la situazione, ma i quadrettoni sono ancora visibili. AV1 vince chiaramente, offrendo un'immagine decisamente migliore.
H.264
VP9
AV1
Scena 2 @ 200 Kbps
Qui ci sono molti contenuti CGI traslucidi. I risultati non differiscono così tanto come l'ultima volta, 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 corrispondono. AV1 mantiene la leadership anche a bitrate bassi!
H.264
VP9
AV1
La ciliegina sulla torta
Per concludere l'articolo, considera la quantità di traffico risparmiato rispetto ai GIF: la dimensione totale di tutti i video è superiore a... 1.62 MB!! Esatto. Circa 1.708.032 byte! A titolo di confronto, ecco la dimensione 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 straordinario! Non è vero?
Nota: Le dimensioni dei file VP9 e H264 non sono state fornite, poiché praticamene non differiscono da AV1 a causa dell'uso dello stesso bitrate. Sarebbe superfluo aggiungere altre due colonne con dimensioni identiche, solo per enfatizzare che questi codec forniscono una qualità molto migliore rispetto ai GIF a dimensioni dei file notevolmente inferiori.
Fonte: habr.com
