C'est maintenant l'année 2019, et il est temps pour nous de prendre une décision concernant le GIF ( non, il ne s'agit pas de cette décision! Ici, nous ne serons jamais d'accord! - Ici, nous parlons de prononciation en anglais, pour nous ce n'est pas pertinent - environ Transl. ). Les GIF prennent énormément d'espace (généralement quelques mégaoctets!) Que si vous êtes développeur web, cela contredit complètement vos envies! En tant que développeur Web, vous souhaitez minimiser les éléments que les utilisateurs doivent télécharger pour que le site se charge rapidement. Pour la même raison, vous réduisez JavaScript, optimisez PNG, JPEG et convertissez parfois JPEG en WebP . Mais que faire de l'ancien GIF?
OĂą nous allons, nous n'avons pas besoin de GIF!
Si votre objectif est d'améliorer la vitesse de chargement du site, vous devez vous débarrasser de GIF! Mais comment alors faire des images animées? La réponse est la vidéo. Et dans la plupart des cas, vous obtiendrez la meilleure qualité et un gain d'espace de 50 à 90%! Dans la vie, la plupart des choses ont leurs avantages et leurs inconvénients. Lorsque vous remplacez des GIF par de la vidéo, les inconvénients les plus courants sont introuvables.
A bas tous les gifs!
Heureusement, le remplacement des GIF par de la vidéo est devenu monnaie courante ces dernières années, donc tous les outils nécessaires sont 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 le presser et l'emballer dans un conteneur MP4 ou WebM
- Remplacez
<img> par un GIF animé par <video> par un film - Activez la lecture automatique et la boucle silencieuses pour obtenir un effet GIF
Google a une bonne documentation décrivant le processus.
C'est maintenant 2019
C'est maintenant l'année 2019. Les progrès progressent et nous devons les suivre. Jusqu'à présent, nous avons eu deux versions de codecs qui sont largement prises en charge dans 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 amélioré la compression de près de 50% par rapport au H.264, bien que , comme on dit ici, tout ne soit pas et ne soit pas toujours aussi rose
Remarque: bien que la norme H.265 soit la prochaine version de H.264 et soit en mesure de rivaliser avec VP9, ​​je ne la considère pas en raison d'une mauvaise prise en charge du navigateur, comme indiqué sur la page https://caniuse.com/#feat=hevc . Les dépenses de licence sont la principale raison pour laquelle le H.265 n'est pas devenu aussi répandu que le H.264 et pourquoi le consortium Alliance of Open Media travaille avec un codec libre de redevances - avec AV1.
N'oubliez pas que notre objectif est de réduire les énormes GIF à la plus petite taille possible pour accélérer le chargement. Ce serait une année 2019 étrange si nous n'avions pas de nouveau standard de compression vidéo dans notre arsenal. Mais il s'appelle et s'appelle AV1. Avec AV1, vous pouvez obtenir une amélioration de la compression d'environ 30% par rapport à VP9 . Lepota! :)
AV1 Ă 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 sur les versions de bureau de Google Chrome 70 et Mozilla Firefox 65 . À l'heure actuelle, la prise en charge dans Firefox est boguée et peut provoquer des plantages, mais les choses devraient changer avec l'ajout du décodeur dav1d dans Firefox 67 ( déjà sorti, et la prise en charge est apparue - environ Transl.) . Pour plus de détails sur la nouvelle version lue - version dav1d 0.3.0: encore plus rapide!
Sur les smartphones
Pour les smartphones, le support matériel fait actuellement défaut en raison du manque de décodeurs appropriés. Vous pouvez effectuer un décodage logiciel, mais cela entraînera une augmentation de la consommation de la batterie. Le premier SOC mobile prenant en charge le décodage matériel AV1 apparaîtra en 2020.
Et ici, les lecteurs de l'article sont "donc si le mobile ne prend pas encore en charge normalement, alors 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, les gens se soulèvent». La prise en charge des ordinateurs de bureau à elle seule accélérera les sites pour une partie de l'audience. Et les anciens codecs peuvent être utilisés comme script de secours, lorsque AV1 n'est pas pris en charge sur le périphérique cible. Mais lorsque les utilisateurs passeront à des appareils prenant en charge AV1, tout sera prêt. Pour y parvenir, nous devons créer un tag vidéo, comme indiqué ci-dessous, qui permet au navigateur de sélectionner le format préféré - AV1 - >> VP9 - >> H.264 . Eh bien, si l'utilisateur a un appareil ou un navigateur complètement ancien que la vidéo ne prend pas du tout en charge (qui ne risque pas d'être volé avec H264) , il voit juste 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
La création d'une vidéo dans AV1 est facile. Téléchargez la dernière version de ffmpeg pour votre système à partir d'ici et utilisez les commandes ci-dessous. Nous utilisons 2 passes pour atteindre le débit binaire cible. Pour ce faire, nous exécuterons ffmpeg deux fois. La première fois que nous écrivons le résultat dans un fichier inexistant. Cela créera le 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.mp4
Voici une description 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éation de GIF
Pour créer le GIF, j'ai utilisé la commande ci-dessous. Pour réduire la taille, j'ai mis à l'échelle le GIF à 720px de large et 12 ips au lieu de la vidéo d'origine à 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.gif
RĂ©sultats des tests
Mieux vaut voir une fois que de lire cent fois, non? Assurons-nous que AV1 est le bon choix pour nos besoins. J'ai pris la vidéo gratuite Tears Of Steel, disponible ici https://mango.blender.org/ , et l'ai convertie en utilisant approximativement le même débit binaire pour les codecs AV1, VP9, ​​H.264. Les résultats sont ci-dessous, vous pouvez donc les comparer vous-même.
Remarque 1: Si le fichier ci-dessous ne se télécharge pas de votre part, vous devrez peut-être mettre à jour votre navigateur. Je recommanderais un navigateur basé sur Chromium comme Chrome, Vivaldi, Brave ou Opera. Voici les dernières informations de support pour AV1 https://caniuse.com/#feat=av1
Remarque 2: pour Firefox 66 sous Linux, vous devrez définir l'indicateur media.av1.enabled sur true dans about:config
Remarque 3: J'ai décidé de ne pas inclure les GIF réguliers ci-dessous en raison de leur grande taille et de la quantité de données qui pourraient être nécessaires pour charger cette page! (Ce qui serait ironique, car cette page vise à réduire la quantité de données sur la page :)). Mais vous pouvez voir les GIF finaux ici https://github.com/singhkays/its-time-replace-gifs-with-av1-video/blob/master/GIFs
Note du traducteur: Habr ne vous permet pas d'activer la lecture automatique et de boucler le fichier, donc seule la qualité sera évaluée. Vous pouvez voir à quoi ressemblent les «images animées» en direct dans l' article original .
Scène 1 @ 200 Kbps
Il y a beaucoup de mouvement, ce qui est particulièrement sensible à bas débit. Vous pouvez immédiatement voir à quel point le H.264 est mauvais sur ce débit binaire, les carrés sont immédiatement visibles. VP9 améliore un peu la situation, mais les carrés sont toujours visibles. AV1 gagne clairement, donnant évidemment la meilleure image.
H.264
VP9
AV1
Scène 2 @ 200 Kbps
Il y a beaucoup de contenu CGI translucide. Les résultats ne diffèrent plus autant que la dernière fois, mais dans l'ensemble, l'AV1 semble mieux.
H.264
VP9
AV1
Scène 3 à 100 Kbps
Dans cette scène, nous tournons le débit à 100 Kbps et les résultats sont cohérents. AV1 conserve son leadership à faible débit binaire!
H.264
VP9
AV1
Cerise sur le gâteau
Pour terminer l'article, ressentez la quantité de trafic enregistré par rapport au GIF - la taille totale de toutes les vidéos est plus élevée ... 1,62 Mo !! Oui. Des putains de 1 708 032 octets! À titre de comparaison, voici la taille des vidéos GIF et AV1 pour chacune des scènes
Tout simplement magnifique! Non?
Remarque: Les tailles de fichier VP9 et H264 ne sont pas affichées, car elles ne diffèrent pratiquement pas d'AV1 en raison de l'utilisation du même débit binaire. Il serait redondant d'ajouter deux colonnes supplémentaires avec les mêmes dimensions, pour souligner que ces codecs produisent une bien meilleure qualité que les GIF avec des fichiers de taille beaucoup plus petite.