Nous sommes en 2019 et il est temps de prendre une décision concernant les GIF ( — il s'agit de la prononciation en anglais, ce n'est pas pertinent pour nous — note du traducteur.). Les GIF occupent une énorme quantité d'espace (souvent plusieurs mégaoctets !), ce qui, si vous êtes développeur web, est complètement à l'opposé de vos souhaits ! En tant que développeur web, vous voulez minimiser les éléments que les utilisateurs doivent télécharger pour que le site se charge rapidement. Pour la même raison, vous minimisez le JavaScript, optimisez les PNG, JPEG, et parfois convertissez . Mais que faire avec le vieux GIF ?
Là où nous allons, nous n'aurons pas besoin de GIF !
Si votre objectif est d'améliorer la vitesse de chargement du site, alors il faut se débarrasser des GIF ! Mais comment faire des images animées alors ? La réponse est la vidéo. Dans la plupart des cas, vous obtiendrez une meilleure qualité et une économie d'espace de 50 à 90 % ! Dans la vie, la plupart des choses ont leurs avantages et leurs inconvénients. Lorsque vous remplacez un GIF par une vidéo, il est souvent difficile de trouver des inconvénients.
À bas tous les GIF !
Heureusement, remplacer les GIF par des vidéos est une pratique courante ces dernières années, donc tous les outils nécessaires sont déjà en place. Dans ce post, je ne vais pas réinventer la roue, mais simplement améliorer les solutions existantes. Voici donc l'essentiel :
- Prenez le GIF et reconvertissez-le en vidéo
- Encodez la vidéo avec H.264 ou VP9, c'est-à-dire compressez-la et emballez-la dans un conteneur MP4 ou WebM
- Remplacez
<img>avec le GIF animé suravec une vidéo - Activez la lecture automatique sans son et bouclez pour obtenir l'effet GIF
Nous sommes en 2019
Nous sommes en 2019. Le progrès avance et nous devons le suivre. Jusqu'à présent, nous avons eu deux options de codecs qui sont largement pris en charge par tous les navigateurs et outils d'encodage vidéo :
- H.264 — apparu en 2003 et le plus largement utilisé aujourd'hui
- C'est un nouveau codec vidéo gratuit et open-source développé par — apparu en 2013 et ayant obtenu une amélioration de compression d'environ 50 % par rapport à H.264, bien que tout n'est pas toujours aussi rose
Remarque : même si le standard H.265 est la prochaine version du H.264 et peut rivaliser avec le VP9, je ne le considère pas en raison de son faible soutien par les navigateurs, comme le montre la page. Les coûts de licence sont la principale raison pour laquelle H.265 n'a pas été aussi largement adopté que H.264 et pour laquelle le consortium Alliance of Open Media travaille avec un codec sans redevances — avec AV1.
N'oubliez pas que notre objectif est de réduire les énormes fichiers GIF à leur taille la plus petite possible afin d'accélérer le chargement. Ce serait une année 2019 étrange si nous n'avions pas un nouveau standard pour la compression vidéo dans notre arsenal. Mais ce standard existe et s'appelle AV1. Avec AV1, vous pouvez . Magnifique! 🙂
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 dans les versions de bureau et . Actuellement, la prise en charge dans Firefox est instable et peut causer des erreurs, mais les choses devraient changer avec l'ajout déjà dans Firefox 67 ( — n.d.t.). Pour des détails sur la nouvelle version, lisez —
Sur les smartphones
Pour les smartphones, la prise en charge matérielle fait actuellement défaut en raison de l'absence de décodeurs adaptés. Un décodage logiciel peut être réalisé, mais cela entraînera une consommation accrue de la batterie. Les premiers SOC mobiles avec prise en charge du décodage matériel AV1 apparaîtront en 2020.
Et ici, les lecteurs de l'article se demandent « donc si les mobiles ne sont pas encore bien supportés, pourquoi utiliser AV1 ? »
AV1 est un codec assez nouveau, et nous sommes au début de son adoption. Considérez cet article comme une étape « pendant que vous préparez, le public s'organise ». La prise en charge sur les ordinateurs de bureau accélérera déjà les sites pour une partie du public. Les anciens codecs peuvent être utilisés comme scénario de secours lorsque le dispositif cible ne prend pas en charge AV1. Ainsi, au fur et à mesure que les utilisateurs passeront à des appareils compatibles AV1, tout sera déjà prêt. Pour cela, nous devons créer une balise vidéo, comme indiqué ci-dessous, qui permettra au navigateur de choisir le format préféré — AV1 ->> C'est un nouveau codec vidéo gratuit et open-source développé par ->> H.264. Eh bien, si l'utilisateur a un appareil ou un navigateur très ancien qui ne prend pas du tout en charge la vidéo (ce qui est très peu probable avec H264), il verra simplement 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>Création d'AV1
Créer une vidéo en AV1 n'est pas compliqué. et utilisez les commandes ci-dessous. Nous utilisons 2 passes pour atteindre le débit binaire cible. Pour cela, nous allons exécuter ffmpeg deux fois. La première fois, nous enregistrerons 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 explication des paramètres :
-i - Fichier d'entrée.
-pix_fmt - Utilise le format 4:2:0 pour sélectionner les informations sur la chrominance dans la vidéo. Il existe de nombreux autres formats possibles, mais 4:2:0 est le plus compatible.
-c:v - Quel codec utiliser, dans notre cas - AV1.<br />
-b:v – Le débit binaire moyen que nous souhaitons atteindre.
-filter:v scale - Le filtre de mise à l'échelle ffmpeg est utilisé pour réduire la résolution de la vidéo. Nous fixons X:-1, ce qui indique à ffmpeg de réduire la largeur à X tout en préservant le rapport d'aspect.
-strict experimental - Doit être spécifié, car AV1 est un codec relativement nouveau.
-cpu-used - Un paramètre mal nommé, utilisé en fait pour sélectionner le niveau de qualité vidéo. Valeurs possibles de 0 à 4. Plus la valeur est basse, meilleure est la qualité et, par conséquent, plus le temps nécessaire à l'encodage est long.
-tile-columns - Pour utiliser plusieurs threads. Indique à AV1 de subdiviser la vidéo en colonnes distinctes qui peuvent être réencodées indépendamment pour une meilleure utilisation du CPU.
-row-mt - Semblable au paramètre précédent, mais divise également en lignes à l'intérieur des colonnes.
-threads - Nombre de threads.
-pass - Quel passage est en cours.
-f - Utilisé uniquement lors du premier passage. Indique le format du fichier de sortie, à savoir MP4 dans notre cas.
-movflags faststart - Active le démarrage rapide de la vidéo en déplaçant une partie des données au début du fichier. Cela permettra de commencer la lecture avant le chargement complet du fichier.
Création de GIF
Pour créer un GIF, j'ai utilisé la commande ci-dessous. Pour réduire la taille, j'ai mis le GIF à 720 px de large et 12 fps au lieu des 24 fps de la vidéo 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.gifRésultats des tests
Il vaut mieux voir une fois que lire cent fois, n'est-ce pas ? Assurons-nous qu'AV1 est le bon choix pour nos objectifs. J'ai pris la vidéo gratuite Tears Of Steel, disponible ici , et je l'ai convertie en utilisant un débit binaire à peu près identique pour les codecs AV1, VP9, H.264. Les résultats ci-dessous, pour que vous puissiez les comparer vous-même.
Remarque 1 : Si le fichier ci-dessous ne se charge pas, il est peut-être temps de mettre à jour votre navigateur. Je recommanderais un navigateur basé sur Chromium, comme Chrome, Vivaldi, Brave ou Opera. Voici les dernières informations sur la prise en charge d'AV1
Remarque 2 : Pour Firefox 66 sous Linux, vous devrez activer le drapeau media.av1.enabled à la valeur true dans about:config
Remarque 3 : J'ai décidé de ne pas inclure les GIF habituels ci-dessous en raison de leur grande taille et de la bande passante qui pourrait être nécessaire pour charger cette page ! (Ce qui serait ironique, puisque cette page porte sur la réduction de la quantité de données.) Mais vous pouvez voir les GIF finaux ici
Note du traducteur : Habr ne permet pas d'activer la lecture automatique et la boucle du fichier, donc on ne peut évaluer que la qualité. Vous pouvez voir à quoi ressembleront les « images animées » en direct dans .
Scène 1 @ 200 Kbps
Il y a beaucoup de mouvement ici, ce qui est particulièrement sensible aux débits binaires bas. On voit immédiatement comme H.264 est mauvais à ce débit binaire, les blocs sont immédiatement visibles. VP9 améliore un peu la situation, mais les blocs sont encore visibles. AV1 a clairement l'avantage, offrant une image nettement meilleure.
H.264
C'est un nouveau codec vidéo gratuit et open-source développé par
AV1
Scène 2 @ 200 Kbps
Il y a beaucoup de contenu CGI semi-transparent ici. Les résultats ne diffèrent plus autant que la dernière fois, mais dans l'ensemble, AV1 a l'air mieux.
H.264
C'est un nouveau codec vidéo gratuit et open-source développé par
AV1
Scène 3 @ 100 Kbps
Dans cette scène, nous réduisons le débit binaire à 100 Kbps et les résultats correspondent. AV1 reste en tête même à des débits binaires bas !
H.264
C'est un nouveau codec vidéo gratuit et open-source développé par
AV1
La cerise sur le gâteau
Pour conclure l'article, ressentez la quantité de trafic économisé par rapport aux GIF — la taille totale de toutes les vidéos ci-dessus… 1,62 Mo !! C'est exact. Quelque chose comme 1 708 032 octets ! Pour comparaison, voici la taille vidéo GIF et AV1 pour chacune des scènes.
GIF
AV1
Scène 1
11,7 Mo
0,33 Mo
Scène 2
7,27 Mo
0,18 Mo
Scène 3
5,62 Mo
0,088 Mo
C'est simplement stupéfiant ! N'est-ce pas ?
Remarque : Les tailles des 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 bitrate. Ce serait superflu d'ajouter encore deux colonnes avec des tailles identiques, juste pour souligner que ces codecs offrent une bien meilleure qualité que GIF pour une taille de fichier largement inférieure.
Source : habr.com
