Optimiser une vidéo pour le web

Depuis quelques temps déjà, il est fondamental d'optimiser toutes les parties d'un site Internet. Systèmes de cache, réduction des images, CDN, il existe beaucoup de librairies et de méthodes automatisées pour accélérer le chargement de vos pages.

Mais qu'en est-il des vidéos ? Elles sont bien plus lourdes, mais sont pourtant utilisées dans des landing pages ou des home pages pour animer et dynamiser les sites. Facebook se permet même de lancer automatiquement les vidéos sur leur application mobile, sans que l'on se soucie spécialement des performances et de la donnée consommée.

Quel est donc le secret minceur de ces vidéos ?

Quelques bases d'abord, car si on consomme facilement de la vidéo, la technique pour sa mise en place est plus complexe. Donc voici un mini-lexique, histoire de rappeler de quoi on parle !

Résolution / Définition

Largeur x Hauteur d'une vidéo en pixels. La vidéo a la particularité d'avoir des "alias" de résolution, tels que listés ci-dessous :

• 4320p ou 8K : 7 680 x 4 320
• 2160p ou 4K : 3 840 x 2 160
• 1440p : 2 560 x 1 440
• 1080p : 1 920 x 1 080
• 720p : 1 280 x 720
• 480p : 854 x 480
• 360p : 640 x 360
• 240p : 426 x 240

Vous remarquerez que les médias et publicités utilisent le terme de 4K, en comparaison à du 1080p, car si 1920x1080 donnent un total de 2.073.000 pixels affichés, le 4K en affiche 8.294.400 soit environ 4 fois plus.

Ratio

Cela correspond au rapport "nombre de pixels en largeur sur le nombre de pixels en hauteur". C'est une simplification de fraction en gros. Les formats les plus connus sont le 4/3 et le 16/9

Ex : 1920/1080 -> ÷2 -> 960/540 -> ÷2 ->  480/270 -> ÷2 -> 240/135 -> ÷5 -> 48/27 -> ÷3 -> 16/9

Profondeur

Il s'agit du nombre de bits alloués à un pixel (ou bpp pour bits per pixel). Pour faire très simple, plus on alloue de bits par pixels, plus la palette de couleurs s'élargit.

Ex : 1bpp se transforme en 2¹ couleurs possibles donc 2 couleurs (monochrome ou noir/blanc), alors que 32bpp va se transformer en 2³² couleurs, soit 4M de couleurs environ. On a tellement de choix d'ailleurs que le 32bits est affublé du label "true colour" ou vraie couleur.

Fréquence

On rentre dans les choses spécifiques à la vidéo car la fréquence - exprimée en Hertz (Hz) - correspond au nombre d'images qui vont s'afficher par seconde. Les films sont tournés en 24 images par seconde, mais récemment, les caméras "60FPS" se démocratisent et donnent une sensation de fluidité impressionnante. C'est parce qu'on dispose de beaucoup plus d'images et donc d'informations.

FPS signifie "Frames per Seconds", traduit par IPS (Images par seconde) dans la langue de Voltaire.

Débit / Bitrate

Il s'agit du nombre de kilobits de données par seconde. La qualité et le poids de la vidéo seront proportionnels au débit programmé lors de l'export.

Par exemple, une vidéo de 10 minutes, 1920x1080, avec un bitrate de 12Mo/s fera 900Mo. Si on réduit le bitrate à 1Mo/s, elle fera 75Mo.

Extension

Comme pour les images, il existe plusieurs extensions pour les vidéos. On ne va pas s'étendre sur ce sujet fastidieux car on a la chance, aujourd'hui, d'avoir un format standard pour le web, le MP4.
Vous pouvez en savoir plus sur les différentes extensions et leurs différences sur le site de Mozilla.

Voilà pour les quelques termes communs. Maintenant, on va voir quel est leur impact sur le poids de la vidéo !

Bon, déjà, il n'existe pas de méthode universelle pour que tout marche bien parfaitement. On fait de l'informatique, et pas de la magie. C'est pour cela qu'il faut bien comprendre que tous les termes listés ci-dessus vont avoir un rôle dans le poids et la qualité de la vidéo.

Voici quelques façons de diminuer significativement le poids d'une vidéo :

• Réduire sa résolution
• Réduire la profondeur
• Réduire la fréquence
• Réduire le débit

Bon, c'est assez évident au final : tout va se jouer dans la nuance. Il vaut mieux réduire tous ces aspects de 25% que de forcer sur un seul point.

Tout va dépendre de l'objectif d'affichage. On pourra retirer le son sur une vidéo en background, réduire le débit et la fréquence d'une vidéo qui tourne en boucle, réduire la profondeur d'une vidéo si on sait qu'elle sera en noir et blanc...

Le support final va également entrer en compte, car si vous êtes sûr une appli mobile, aucun intérêt de faire une vidéo avec une grosse résolution, même si les téléphones sont de plus en plus qualitatifs. Vous pouvez alors vous contenter d'un 720p bien optimisé.

Petit cas concret, car tout ceci est bien abstrait n'est-ce pas ? Prenons l'exemple de la vidéo que l'on a utilisé pour notre page d'accueil (je vous la remets ci-dessous).

Pour optimiser la vidéo ci-dessus, on a utiliser Adobe Première Pro, c'est un peu la référence dans ce domaine. Pour les autres logiciels de montage vidéo, vous avez Magix Video Deluxe, Blender, iMovie... Il en existe pas mal, gratuits ou non, le site de Creads en propose 10, de même que le site de 01.net qui en propose 6.

Pour des utilitaires, j'utilise MediaInfo, qui permet de voir les détails d'un fichier vidéo. Il permet également d'exporter les infos sous différents formats. C'est gadget mais ça sert toujours.

Il existe aussi quelques sites bien pratiques :

• Convertir en MP4 (et autres formats) : https://video.online-convert.com/fr/convertir-en-mp4
• Compresseur de vidéo : https://clipchamp.com/fr/video-compressor
• Compresseur de vidéo : http://www.videosmaller.com/fr/

EDIT 27/07/2019 : Le motion designer Tom de Tesla Doom nous a recommandé d'utiliser le logiciel HandBrake, ce dernier vous permet de manipuler et compresser des vidéos gratuitement (c'est rare dans ce secteur !). Allez faire un tour sur leurs sites :D