Comment compresser une vidéo pour le web

Pourquoi compresser une vidéo pour le web ?

La vidéo brute tout droit sortie d'une caméra, d'un téléphone ou d'un enregistreur d'écran est faite pour le montage, pas pour le web. Un seul clip peut peser des dizaines ou des centaines de mégaoctets — bien plus qu'une page ne devrait jamais transférer. Chacun de ces octets doit parvenir au visiteur avant que la vidéo puisse se lire, et en données mobiles, c'est à la fois lent et coûteux.

La vidéo lourde est l'un des plus gros freins aux Core Web Vitals. Un fichier surdimensionné au-dessus de la ligne de flottaison repousse le Largest Contentful Paint, et un lecteur qui se redimensionne en chargeant nuit au Cumulative Layout Shift — deux signaux de classement que Google mesure sur de vrais visiteurs. Compresser le fichier, fixer des dimensions explicites et différer la vidéo hors écran garde ces scores au vert.

La compression consiste simplement à ré-encoder la vidéo avec un codec moderne à une qualité et une résolution raisonnables pour une lecture à l'écran. Bien menée, elle réduit le fichier de 70 à 95 % tout en paraissant quasi identique à la taille où il s'affiche réellement sur la page — la différence entre une vidéo qui apparaît instantanément et une autre qui reste bloquée à charger.

Choisissez le bon codec

Le codec est l'algorithme qui compacte les pixels, et il compte plus que tout autre réglage. Les trois codecs web modernes produisent tous des fichiers bien plus petits qu'un enregistrement brut ; ils arbitrent entre compatibilité et efficacité. Le conteneur — MP4 ou WebM — n'est que l'emballage autour du codec.

Le choix sûr par défaut est H.264 dans un MP4 : il se lit sur tous les navigateurs, téléphones et Smart TV fabriqués ces quinze dernières années. Pour un site moderne, vous pouvez servir un fichier VP9 ou AV1 plus petit et indiquer le MP4 H.264 en repli, pour que les navigateurs capables téléchargent le petit fichier et que tout le reste se lise quand même.

H.264 (MP4)

La base universelle. Le plus gros des trois à qualité égale, mais il se lit absolument partout — le format à conserver comme source de repli.

VP9 (WebM)

Le codec ouvert de Google, environ 30 à 50 % plus petit que H.264 à qualité similaire. Il se lit sur Chrome, Firefox, Edge et Android ; associez-le à un repli MP4 pour les anciens Safari.

AV1 (MP4 ou WebM)

Le plus récent et le plus efficace — encore plus petit que VP9 — au prix d'un encodage plus lent et d'une prise en charge limitée aux navigateurs récents. À associer de préférence à un repli H.264.

Débit, résolution et fréquence d'images

Après le codec, trois réglages déterminent la taille finale. La résolution est le plus grand levier : si un clip s'affiche sur 800 pixels de large, l'encoder en 4K gaspille énormément de bande passante pour des détails que personne ne voit. Limitez la résolution à la façon dont la vidéo est réellement affichée — 1080p ou 720p couvre presque tous les usages web, et les boucles d'arrière-plan peuvent descendre encore plus bas.

Le débit — combien de bits par seconde le codec peut dépenser — est ce que fixe pour vous l'encodage basé sur la qualité. Plutôt que de deviner un chiffre, choisissez une cible de qualité et laissez l'encodeur répartir les bits là où l'image en a besoin ; cela conserve les détails dans les scènes complexes sans alourdir les simples. Baissez la qualité d'un cran pour les arrière-plans, montez-la pour les images détaillées que vous voulez nettes.

La fréquence d'images est le dernier levier. La plupart des vidéos web paraissent parfaitement fluides à 30 i/s, et les clips cinématographiques à 24 i/s ; diviser par deux un enregistrement à 60 i/s réduit à peu près de moitié les données de mouvement. Supprimer la piste audio — indispensable pour les arrière-plans en lecture automatique, qui doivent être muets — fait gagner encore plus. Les préréglages de TinyVid regroupent ces choix : Lecteur standard pour une qualité équilibrée, Compression maximale pour le plus petit fichier, Arrière-plan hero pour un clip muet en boucle.

Intégrez la vidéo compressée

Un fichier compressé n'a d'intérêt que si vous l'intégrez bien. Placez-le dans une simple balise video avec une width et une height explicites pour que le navigateur réserve l'espace et que la page ne saute pas en chargeant, et ajoutez une image poster afin qu'il y ait quelque chose à l'écran avant l'arrivée de la première image.

Réglez preload sur metadata pour que le navigateur récupère les dimensions mais pas le clip entier tant que personne n'appuie sur lecture, et indiquez plusieurs sources — le petit WebM ou AV1 d'abord, le MP4 H.264 en dernier — pour que chaque navigateur télécharge le meilleur fichier qu'il sait décoder. Pour un arrière-plan décoratif, coupez le son du clip et ajoutez autoplay, loop et playsinline, puisque les navigateurs bloquent la lecture automatique de tout ce qui a du son.

Pour le balisage complet de chaque modèle — un lecteur standard, une boucle d'arrière-plan muette et un clip en chargement différé — consultez le guide d'intégration vidéo HTML.