Nous sommes en 2019 et il est temps que nous options pour les GIF ( - nous parlons ici de prononciation en anglais, pour nous ce n'est pas pertinent - env. traduction). Les GIF occupent énormément d’espace (généralement plusieurs mégaoctets !), ce qui, si vous êtes développeur web, est totalement contraire à vos envies ! En tant que développeur Web, vous souhaitez minimiser les éléments que les utilisateurs doivent télécharger afin que le site se charge rapidement. Pour la même raison, vous réduisez JavaScript, optimisez PNG, JPEG et parfois convertissez . Mais que faire de l’ancien GIF ?
Nous n'aurons pas besoin de GIF là où nous allons !
Si votre objectif est d’améliorer la vitesse de chargement du site, alors vous devez vous débarrasser des GIF ! Mais alors, comment réaliser des images animées ? La réponse est la vidéo. Et dans la plupart des cas, vous obtiendrez une meilleure qualité et un gain de place de 50 à 90 % ! Dans la vie, la plupart des choses ont leurs avantages et leurs inconvénients. Lorsque vous remplacez le GIF par une vidéo, vous ne trouverez le plus souvent aucun inconvénient.
A bas tous les GIF !
Heureusement, remplacer les GIF par des vidéos est devenu monnaie courante ces dernières années, tous les outils nécessaires sont donc déjà utilisés. Dans cet article, je ne réinventerai pas la roue, mais n'améliorerai que légèrement les solutions existantes. Voici donc l'essentiel :
- Prenez un GIF et convertissez-le en vidéo
- Encodez la vidéo en utilisant H.264 ou VP9, c'est-à-dire compressez-le et emballez-le dans un conteneur MP4 ou WebM
- Remplacer
<img>avec GIF animé activé<video>avec rouleau - Activez la lecture automatique sans son ni boucle pour un effet GIF
Nous sommes en 2019
Nous sommes en 2019 maintenant. Les progrès avancent et nous devons les suivre. Jusqu'à présent, nous disposions de deux options de codec largement prises en charge par tous les navigateurs et outils d'encodage vidéo :
- H.264 - introduit en 2003 et le plus largement utilisé aujourd'hui
- VP9 - est apparu en 2013 et a obtenu des améliorations de compression de près de 50 % par rapport au H.264, bien que tout n'est pas toujours aussi rose
Note: Bien que H.265 soit la prochaine version de H.264 et soit capable de rivaliser avec VP9, je ne le considère pas en raison d'une mauvaise prise en charge du navigateur, comme indiqué sur la page. . Les coûts de licence sont la principale raison pour laquelle le H.265 n'est pas devenu aussi répandu que le H.264 et la raison pour laquelle le consortium Alliance of Open Media travaille avec un codec libre de droits, AV1.
N'oubliez pas que notre objectif est de réduire les énormes GIF à la taille la plus petite possible pour accélérer les temps de chargement. Ce serait une année 2019 étrange si nous n'avions pas une nouvelle norme de compression vidéo dans notre arsenal. Mais il existe et s'appelle AV1. Avec AV1, vous pouvez . Lépota ! 🙂
AV1 est à votre service depuis 2019 !
Sur les ordinateurs de bureau
Récemment, la prise en charge du décodage vidéo AV1 a été ajoutée aux versions de bureau и . À l'heure actuelle, le support de Firefox est bogué et peut provoquer des plantages, mais les choses devraient s'améliorer avec l'ajout de déjà dans Firefox 67 ( - environ. trad.). Pour plus de détails sur la nouvelle version, lisez -
Sur smartphone
Il n'existe actuellement aucun support matériel pour les smartphones en raison du manque de décodeurs appropriés. Vous pouvez effectuer un décodage logiciel, même si cela entraînera une augmentation de la consommation de la batterie. Les premiers SOC mobiles prenant en charge le décodage matériel AV1 apparaîtront en 2020.
Et puis les lecteurs de l’article se demandent : « alors si les téléphones mobiles ne le prennent pas encore correctement en charge, pourquoi utiliser AV1 ? »
AV1 est un codec assez nouveau, et nous sommes au tout début de son adaptation. Considérez cet article comme l'étape « pendant que vous cuisinez, la foule suivra ». La prise en charge des ordinateurs de bureau en elle-même accélérera les sites pour une partie du public. Et les anciens codecs peuvent être utilisés comme scénario de secours lorsque AV1 n'est pas pris en charge sur le périphérique cible. Mais à mesure que les utilisateurs passeront aux appareils prenant en charge AV1, tout sera prêt. Pour y parvenir, nous devons créer une balise vidéo comme indiqué ci-dessous, qui permettra au navigateur de sélectionner son format préféré - AV1 - >> VP9 - >> H.264. Eh bien, si l'utilisateur possède un appareil ou un navigateur très ancien qui ne prend pas du tout en charge la vidéo (ce qui est extrêmement improbable avec H264), alors il verra juste le 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>Création d'AV1
Créer des vidéos dans AV1 est simple. et utilisez les commandes ci-dessous. Nous utilisons 2 passes pour atteindre le débit cible. Pour ce faire, nous exécuterons ffmpeg deux fois. La première fois, nous écrivons le résultat dans un fichier inexistant. Cela créera un journal qui sera nécessaire pour la deuxième exécution de 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.mp4Voici une répartition des paramètres :
-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 - Включаем быстрый старт видео, перемещая часть данных в начало файла. Это позволит начать воспроизведение ещё до полной загрузка файла.
Créer des GIF
Pour créer le GIF, j'ai utilisé la commande ci-dessous. Pour réduire la taille, j'ai redimensionné le GIF à 720 px de large et 12 ips au lieu de la vidéo originale de 24 ips.
./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.gifRésultats de test
Il vaut mieux voir une fois que lire cent fois, non ? Assurons-nous que l'AV1 est le bon choix pour nos besoins. J'ai pris la vidéo gratuite Tears Of Steel disponible ici , et l'a converti en utilisant à peu près le même débit binaire pour les codecs AV1, VP9, H.264. Les résultats sont ci-dessous afin que vous puissiez les comparer par vous-même.
Note 1: Si le fichier ci-dessous ne se charge pas pour vous, il est peut-être temps de mettre à jour votre navigateur. Je recommanderais un navigateur basé sur Chromium tel que Chrome, Vivaldi, Brave ou Opera. Voici les dernières informations sur le support AV1
Note 2: Pour Firefox 66 sous Linux, vous devrez définir le drapeau media.av1.enabled dans le sens true в about:config
Note 3: J'ai décidé de ne pas inclure les GIF classiques ci-dessous en raison de leur grande taille et de la quantité de données nécessaires pour charger cette page ! (Ce qui serait ironique, puisque cette page vise à réduire la quantité de données sur une page :)). Mais vous pouvez voir les GIF finaux ici
Note du traducteur: Habr ne vous permet pas d'activer la lecture automatique et de mettre en boucle le fichier, vous ne pouvez donc évaluer que la qualité. Vous pouvez voir à quoi ressembleront les « images animées » en direct .
Scène 1 à 200 Kbps
Il y a beaucoup de mouvement ici, ce qui est particulièrement sensible aux faibles débits. Vous pouvez immédiatement voir à quel point le H.264 est mauvais à ce débit ; les carrés sont immédiatement visibles. VP9 améliore un peu la situation, mais les carrés restent visibles. AV1 gagne clairement, produisant une image évidemment meilleure.
H.264
VP9
AV1
Scène 2 à 200 Kbps
Il y a beaucoup de contenu CGI translucide ici. Les résultats ne sont pas aussi différents que la dernière fois, mais dans l'ensemble, l'AV1 est meilleur.
H.264
VP9
AV1
Scène 3 à 100 Kbps
Dans cette scène, nous réduisons le débit à 100 Kbps et les résultats sont cohérents. AV1 maintient son leadership même à bas débit !
H.264
VP9
AV1
Cerise sur le gâteau
Pour terminer cet article en ressentant la quantité de bande passante économisée par rapport au GIF - la taille totale de toutes les vidéos est plus élevée... 1.62 Mo !! Droite. Quelques putains de 1,708,032 1 XNUMX octets ! À titre de comparaison, voici les tailles de vidéo GIF et AVXNUMX pour chaque scène
GIF
AV1
Scène 1
11.7 MB
0.33 MB
Scène 2
7.27 MB
0.18 MB
Scène 3
5.62 MB
0.088 MB
Simplement renversant! N'est-ce pas?
Note: Les tailles de fichiers VP9 et H264 ne sont pas indiquées, car elles ne diffèrent pratiquement pas de celles d'AV1 en raison de l'utilisation du même débit. Il serait redondant d'ajouter deux colonnes supplémentaires avec les mêmes tailles, juste pour souligner que ces codecs produisent une bien meilleure qualité que le GIF avec des tailles de fichiers beaucoup plus petites.
Source: habr.com