Mettre une vidéo 4K sur un site sans le plomber

Deux fichiers de 137 et 142 Mo, que la moitié des navigateurs ne savent même pas lire. Comment on les ramène à 12 Mo sans que la différence se voie à l'écran.

Un client nous envoie deux vidéos de démonstration pour sa page projet. Elles sortent d'un iPhone récent : 2160 × 3840, 30 images par seconde, 20 mégabits par seconde. 137 et 142 Mo. Déposées telles quelles dans le dossier public d'un site, elles le rendent inutilisable.

Le problème n'est pas que le poids

On pense spontanément à la taille du fichier. C'est le troisième problème, pas le premier.

Le premier, c'est le codec. Ces fichiers sont en HEVC, aussi appelé H.265. Safari le lit, une bonne partie des autres navigateurs non : chez beaucoup de visiteurs, la vidéo ne se lance pas du tout, sans message d'erreur. Le web, c'est encore H.264 quand on veut que ça marche partout.

Le deuxième, c'est la définition. 2160 pixels de large, pour un élément affiché à 290 pixels dans la page. On sert seize fois plus de pixels que ce que l'écran affichera.

Le troisième seulement, c'est le poids — et il découle largement des deux premiers.

Mesurer plutôt que deviner

La tentation est de prendre un réglage au jugé. On fait l'inverse : on encode dix secondes du fichier à deux ou trois réglages, on regarde ce que ça pèse, on extrapole. Trente secondes de travail qui évitent deux ré-encodages complets.

Sur ces vidéos :

Réglage	Poids sur 10 s	Extrapolé sur 55 s
1080 × 1920, CRF 31	2,89 Mo	~15,9 Mo
864 × 1536, CRF 32	1,75 Mo	~9,6 Mo

Le second divise le poids par trois par rapport au premier. Et 864 pixels de large, pour un élément affiché à 290, représente encore trois fois la taille d'affichage : de quoi rester net sur un écran à haute densité comme en plein écran sur un téléphone.

Le réglage retenu

ffmpeg -i source.mp4 \
  -vf "scale=864:1536:flags=lanczos" \
  -c:v libx264 -profile:v high -pix_fmt yuv420p -crf 31 -preset slow -g 60 \
  -c:a aac -b:a 96k -ac 2 \
  -movflags +faststart \
  sortie.mp4

Deux options méritent un mot.

-movflags +faststart déplace l'index du fichier au début. Sans elle, le navigateur doit télécharger la vidéo entière avant d'afficher la première image : douze mégaoctets d'attente avant que quoi que ce soit ne bouge. C'est l'option qu'on oublie et qui fait dire « la vidéo ne marche pas ».

-preset slow demande à l'encodeur de chercher davantage. L'encodage prend quelques minutes de plus, le fichier est plus léger à qualité égale. Comme on encode une fois et qu'on sert des milliers de fois, l'arbitrage est vite fait.

Résultat : 137 Mo devenus 12,1 Mo, et 142 Mo devenus 13,2 Mo. Durées intactes, son conservé, et rien de visible à l'écran à la taille d'affichage.

Ne pas charger ce que personne ne regarde

Douze mégaoctets restent douze mégaoctets. La vraie économie vient de ne pas les télécharger :

<video src="/demo.mp4" poster="/demo.jpg" preload="none" controls playsinline></video>

Avec preload="none" et une image d'affiche, la page ne charge qu'un JPEG de 120 ko. La vidéo ne part sur le réseau que si le visiteur clique. Sur une page où deux vidéos sont présentes, on passe de 25 Mo imposés à tous à 240 ko — et le reste à la demande.

Deux pièges qui n'apparaissent qu'en production

Les fichiers sources ne doivent pas rester dans le dossier public. Les originaux 4K pesaient 280 Mo à eux deux. Restés là, ils partaient dans le dépôt et sur le serveur, consultables par n'importe qui connaissant l'adresse. Ils ont leur place hors du projet servi, listés dans le fichier d'exclusion.

Attention à la casse des noms de dossier. macOS ne distingue pas Facilyse de facilyse : un dossier créé en minuscules se confond avec un dossier existant en majuscules, et tout fonctionne en local. Le serveur de production, lui, tourne sous Linux, qui fait la différence. Le site marche sur la machine du développeur et renvoie des 404 une fois déployé. Le renommage forcé passe par un nom intermédiaire, sans quoi le système considère qu'il n'y a rien à faire.

Ce qu'il faut retenir

Une vidéo de client n'est jamais prête pour le web. Elle est faite pour être belle sur un téléphone, pas pour traverser un réseau. Transcoder en H.264, dimensionner à trois fois la taille d'affichage, activer faststart, différer le chargement : quatre gestes, et le poids passe de 280 Mo à 240 ko au chargement initial.

C'est le genre de détail qu'on traite à la construction plutôt qu'en rattrapage : voir notre page Outils digitaux sur-mesure.