È il 2019 ed è giunto il momento di decidere sulle GIF ( - qui stiamo parlando della pronuncia in inglese, per noi questo non è rilevante - ca. traduzione). Le GIF occupano un'enorme quantità di spazio (di solito diversi megabyte!), il che, se sei uno sviluppatore web, è completamente contrario ai tuoi desideri! Come sviluppatore web, desideri ridurre al minimo le cose che gli utenti devono scaricare in modo che il sito si carichi rapidamente. Per lo stesso motivo, minimizzi JavaScript, ottimizzi PNG, JPEG e talvolta converti . Ma cosa fare con la vecchia GIF?
Non avremo bisogno di GIF dove stiamo andando!
Se il tuo obiettivo è migliorare la velocità di caricamento del sito, allora devi sbarazzarti delle GIF! Ma allora come si realizzano immagini animate? La risposta è il 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 hanno i loro pro e i loro contro. Quando sostituisci GIF con video, molto spesso non sarai in grado di trovare alcun svantaggio.
Abbasso tutte le GIF!
Fortunatamente, negli ultimi anni la sostituzione delle GIF con i video è diventata una cosa comune, quindi tutti gli strumenti necessari sono già in uso. In questo post non reinventerò la ruota, ma migliorerò solo leggermente le soluzioni esistenti. Quindi ecco il succo:
- Prendi una GIF e convertila in un video
- Codifica il video utilizzando H.264 o VP9, ad es. comprimerlo e comprimerlo nel contenitore MP4 o WebM
- Sostituire
<img>con GIF animata attiva<video>con rullo - Attiva la riproduzione automatica senza audio e riproduci in loop un effetto GIF
È il 2019
È il 2019 adesso. Il progresso va avanti e dobbiamo stargli dietro. Finora abbiamo avuto due opzioni di codec ampiamente supportate da tutti i browser e strumenti di codifica video:
- H.264 - introdotto nel 2003 e oggi più utilizzato
- VP9 - è apparso nel 2013 e ha ottenuto miglioramenti di compressione di quasi il 50% rispetto a H.264 non tutto è sempre così roseo
Nota: Anche se H.265 è la versione successiva di H.264 ed è in grado di competere con VP9, non lo considero a causa dello scarso supporto del browser, come mostrato nella pagina . I costi di licenza sono la ragione principale per cui H.265 non è diventato così diffuso come H.264 e perché il consorzio Alliance of Open Media sta lavorando con un codec esente da royalty, AV1.
Ricorda, il nostro obiettivo è ridurre le GIF enormi alla dimensione più piccola possibile per accelerare i tempi di caricamento. Sarebbe uno strano 2019 se non avessimo nel nostro arsenale un nuovo standard per la compressione video. Ma esiste e si chiama AV1. Con AV1 puoi . Lepota! 🙂
AV1 è al tuo servizio dal 2019!
Sui desktop
Recentemente è stato aggiunto il supporto per la decodifica video AV1 alle versioni desktop и . Al momento il supporto di Firefox è difettoso e può causare arresti anomali, ma le cose dovrebbero migliorare con l'aggiunta di già in Firefox 67 ( - ca. trad.). Per i dettagli sulla nuova versione leggi -
Su smartphone
Attualmente non esiste un supporto hardware per gli smartphone a causa della mancanza di decoder adeguati. È possibile eseguire la decodifica software, anche se ciò comporterà un aumento del consumo della batteria. I primi SOC mobili che supportano la decodifica hardware AV1 appariranno nel 2020.
E poi i lettori dell’articolo dicono: “quindi se i telefoni cellulari non lo supportano ancora correttamente, perché usare AV1?”
AV1 è un codec abbastanza nuovo e siamo all'inizio del suo adattamento. Pensa a questo articolo come alla fase “mentre cucini, la folla ti seguirà”. Il supporto desktop di per sé accelererà i siti per una parte del pubblico. E i vecchi codec possono essere utilizzati come scenario di fallback quando AV1 non è supportato sul dispositivo di destinazione. Ma quando gli utenti passeranno ai dispositivi con supporto AV1, tutto sarà pronto. Per raggiungere questo obiettivo, dobbiamo creare un tag video come mostrato di seguito, che consentirà al browser di selezionare il formato preferito − AV1 - >> VP9 - >> H.264. È buono se l'utente ha un dispositivo o un navigatore molto vecchio che non supporta affatto il video (cosa estremamente improbabile con H264), poi vedrà solo la 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 dell'AV1
Creare video in AV1 è facile. e utilizzare i comandi seguenti. Usiamo 2 passaggi per raggiungere il bitrate target. Per fare ciò eseguiremo ffmpeg due volte. La prima volta scriviamo il risultato su un file inesistente. Ciò 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 una ripartizione dei parametri:
-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 - Включаем быстрый старт видео, перемещая часть данных в начало файла. Это позволит начать воспроизведение ещё до полной загрузка файла.
Crea una GIF
Per creare la GIF ho usato il comando seguente. Per ridurre le dimensioni, ho ridimensionato la GIF a 720 px di larghezza e 12 fps invece del video originale a 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 del test
È meglio vedere una volta che leggere cento volte, giusto? Assicuriamoci che l'AV1 sia la scelta giusta per i nostri scopi. Ho preso il video gratuito di Tears Of Steel disponibile qui e lo ha convertito utilizzando approssimativamente lo stesso bitrate per i codec AV1, VP9 e H.264. I risultati sono qui sotto così puoi confrontarli tu stesso.
Nota 1: Se il file seguente non viene caricato, potrebbe essere il momento di aggiornare il browser. Consiglierei un browser basato su Chromium come Chrome, Vivaldi, Brave o Opera. Ecco le informazioni più recenti sul supporto AV1
Nota 2: Per Firefox 66 su Linux sarà necessario impostare il flag media.av1.enabled nel significato true в about:config
Nota 3: Ho deciso di non includere le GIF regolari di seguito a causa delle loro grandi dimensioni e della quantità di dati che richiederebbe per caricare questa pagina! (Il che sarebbe ironico, dal momento che questa pagina riguarda la riduzione della quantità di dati su una pagina :)). Ma puoi vedere le GIF finali qui
Nota del traduttore: Habr non ti consente di abilitare la riproduzione automatica e il loop del file, quindi puoi solo valutare la qualità. Puoi vedere come appariranno le "immagini animate" dal vivo .
Scena 1 a 200 Kbps
C'è molto movimento qui, che è particolarmente sensibile a bitrate bassi. Puoi immediatamente vedere quanto sia scadente H.264 con questo bitrate; i quadrati sono immediatamente visibili. VP9 migliora un po' la situazione, ma i quadrati sono ancora visibili. AV1 vince chiaramente, producendo un'immagine ovviamente migliore.
H.264
VP9
AV1
Scena 2 a 200 Kbps
Ci sono molti contenuti CGI traslucidi qui. I risultati non sono così diversi dall'ultima volta, ma nel complesso l'AV1 sembra migliore.
H.264
VP9
AV1
Scena 3 a 100 Kbps
In questa scena abbassiamo il bitrate a 100 Kbps e i risultati sono coerenti. AV1 mantiene la sua leadership anche a bitrate bassi!
H.264
VP9
AV1
Ciliegina sulla torta
Per concludere questo articolo valutando la quantità di larghezza di banda risparmiata rispetto alla GIF: la dimensione totale di tutti i video è maggiore... 1.62MB!! Giusto. Circa 1,708,032 byte! Per confronto, ecco le dimensioni video GIF e AV1 per ciascuna 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
Semplicemente sensazionale! Non è questo?
Nota: Le dimensioni dei file di VP9 e H264 non sono indicate, poiché praticamente non differiscono da AV1 a causa dell'utilizzo dello stesso bitrate. Sarebbe ridondante aggiungere altre due colonne con le stesse dimensioni, solo per evidenziare che questi codec producono una qualità molto migliore rispetto al GIF con file di dimensioni molto più piccole.
Fonte: habr.com