Optimiser une vidéo pour le web

par

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 ?

Notions élémentaires

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 21 couleurs possibles donc 2 couleurs (monochrome ou noir/blanc), alors que 32bpp va se transformer en 232 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 !

L'optimisation - Théorie

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é.

L'optimisation - Pratique

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).

Information Vidéo originale Vidéo compressée Différence / Raison
Durée de la vidéo 19s 10s 50% - C'est une vidéo répétitive, on a pas besoin d'autant de temps de vidéo.
Bitrate 148Mb/s 0.559Mb/s 99% - Vidéo utilisée en background, donc on a pas besoin d'un débit de données élevé
Résolution 1920x1080 1280x720 33% - Même raison, on aurait pu toutefois conserver le 1080p puisque c'est la moyenne des résolution en 2017.
Ratio 16/9 16/9 Conservé
Fréquence (FPS ou IPS) 30 15 50% - Même raison que ci-dessus
Profondeur 8 8 Conservé
Détails additionnels Fichier Fichier  
Visualiser la vidéo
Clic droit - Enregistrer la cible du lien sous si votre navigateur ne lit pas la vidéo.
Vidéo - Attention 350Mo... Vidéo  
Poids final 355Mo 0.68Mo 99.81%

 

Quelques outils ?

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 :

Optimiser une vidéo se fait surtout en fonction de son affichage final.

Si vous souhaitez toutefois afficher plusieurs vidéos sur une seule page, il est recommandé de les héberger sur Youtube ou sur Vimeo. Vous gagnerez beaucoup de temps en confiant l'optimisation et la polyvalence de lecture à des services dédiés plutôt que de tout gérer vous-même.

Il ne faut pas oublier qu'une vidéo, même optimisée, consomme théoriquement plus de bande-passante qu'un simple média. Si en France, on est plutôt bien lotis avec nos abonnements illimités, ce n'est pas le cas des abonnements mobiles et autres abonnements internationaux qui sont majoritairement limités.

Donc avant d'utiliser une vidéo sur vos sites web, soyez précautionneux et vérifiez bien que vous avez fait tout ce que vous pouviez pour réduire son poids.