Comment réduire davantage la taille des fichiers vidéo web avec le codec AV1 (2025)

• En utilisant le format vidéo AV1 le plus récent, il est possible de réduire la taille des fichiers vidéo sur le web de 20 à 40 fois
• YouTube et Netflix ont adopté AV1 comme codec vidéo de nouvelle génération, et il est pris en charge par les principaux navigateurs comme Chrome, Safari et Firefox
• Ce guide explique les stratégies d’encodage du codec AV1 et les méthodes d’optimisation

Aperçu des codecs et des conteneurs

• Formats d’image fixes : WebP, JPEG et PNG sont pris en charge par la plupart des navigateurs. Sur les navigateurs récents, il est possible d’utiliser AVIF
• Structure d’un fichier vidéo :
  • Codec vidéo : H.264, HEVC, VP9, AV1, etc., déterminent la stratégie de compression vidéo
  • Codec audio : MP3, Opus, AAC, etc., déterminent la stratégie de compression audio
  • Conteneur : MP4, MOV, WebM, etc., stockent les flux vidéo et audio, les sous-titres et les métadonnées

Présentation du codec AV1

• Le codec AV1 a été lancé pour la première fois en mars 2018
• Il peut produire des fichiers jusqu’à 30 à 50 % plus petits que HEVC/VP9 et H.264/VP8
• Avantages :
  • Permet de conserver une haute qualité d’image à faible débit
  • Les pertes dues à la compression sont presque inexistantes
• Inconvénients :
  • La vitesse d’encodage est lente
  • Pris en charge uniquement sur les appareils récents (iPhone 15+, MacBook M3, etc.)
  • Il faut préparer à la fois une version AV1 et une version H.264 pour assurer la compatibilité

Comment utiliser AV1 dès maintenant

• Choix du conteneur et des codecs
  • Conteneur : MP4 est le plus populaire et recommandé
  • Codec audio : il est recommandé d’utiliser Opus (efficace et gratuit)
• Préparer les fichiers pour une compatibilité maximale
  • Pour les navigateurs desktop et mobiles récents (Chrome, Safari, Firefox, Edge, etc.)
    • Conteneur MP4 + codec vidéo AV1 + codec audio Opus
    • Couverture utilisateur : environ 74 % (en septembre 2023)
  • Pour les anciennes versions de Safari et macOS
    • Conteneur MP4 + codec vidéo H.264 + codec audio AAC
    • Couverture utilisateur : environ 19 %
  • Pour renforcer la prise en charge des anciens iPhone et Mac (optionnel)
    • Conteneur MP4 + codec vidéo HEVC + codec audio AAC

Comment créer des fichiers vidéo AV1

1. Installer FFmpeg

• Mac : brew install ffmpeg
• Linux : installer FFmpeg depuis votre distribution
• Windows : voir le guide d’installation

2. Créer un fichier H.264 (pour la prise en charge des anciens appareils)

• ffmpeg -i SOURCE.mov -map_metadata -1 -c:a aac -c:v libx264 -crf 24 -preset veryslow -profile:v main -pix_fmt yuv420p -movflags +faststart -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" video.h264.mp4

3. Créer un fichier AV1 (pour la prise en charge des appareils récents)

• ffmpeg -i SOURCE.mov -map_metadata -1 -c:a libopus -c:v libsvtav1 -qp 30 -tile-columns 2 -tile-rows 2 -pix_fmt yuv420p -movflags +faststart -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" video.av1.mp4
• Il est possible d’ajuster la valeur crf ou qp pour trouver l’équilibre entre qualité d’image et taille de fichier

4. Créer un fichier HEVC (si nécessaire)

• Encodage HEVC pour prendre en charge les anciens iPhone et Mac
• ffmpeg -i SOURCE.mov -map_metadata -1 -c:a aac -c:v libx265 -crf 24 -preset veryslow -pix_fmt yuv420p -movflags +faststart -tag:v hvc1 -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" video.hevc.mp4

Explication des principales options FFmpeg

• -i SOURCE.mov : définit le fichier source en entrée
• -map_metadata -1 : supprime les métadonnées inutiles
• -c:a libopus : choisit le codec audio (Opus)
• -c:v libsvtav1 : choisit le codec vidéo (AV1)
• -crf 34, -qp 30 : ajustent la qualité d’image et la taille du fichier (plus la valeur est basse, meilleure est la qualité et plus le fichier est volumineux)
• -preset veryslow : règle la vitesse d’encodage pour produire un fichier de haute qualité
• -pix_fmt yuv420p : réduit les données de couleur pour diminuer la taille du fichier
• -movflags +faststart : réduit le temps de démarrage du streaming
• -tile-columns 2 -tile-rows 2 : améliore la vitesse d’encodage

Paramétrage de la compatibilité navigateur

• Utiliser AV1 sur les navigateurs récents et basculer vers H.264 sur les navigateurs plus anciens

  <video controls width="600" height="400">  
    <source src="video.av1.mp4" type="video/mp4; codecs=av01.0.05M.08,opus">  
    <source src="video.h264.mp4" type="video/mp4; codecs=avc1.4D401E,mp4a.40.2">  
  </video>  
  

• Il est également possible d’ajouter un fichier HEVC pour la prise en charge des anciens iPhone et Mac

  <source src="video.hevc.mp4" type="video/mp4; codecs=hvc1">  
  

Convertir un GIF en AV1 ou H.264

• Les GIF sont 20 à 40 fois plus volumineux que H.264 et AV1, et consomment aussi beaucoup plus de CPU et d’énergie → conversion recommandée
• Conversion GIF → H.264
  • ffmpeg -i IMAGE.gif -map_metadata -1 -an -c:v libx264 -crf 24 -preset veryslow -profile:v main -pix_fmt yuv420p -movflags +faststart -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" animation.h264.mp4
• Conversion GIF → AV1
  • ffmpeg -i IMAGE.gif -map_metadata -1 -an -c:a opus -c:v libsvtav1 -qp 30 -tile-columns 2 -tile-rows 2 -pix_fmt yuv420p -movflags +faststart -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" animation.av1.mp4
• Exemple de remplacement d’un GIF en HTML

  <video autoplay loop muted playsinline width="600" height="400">  
    <source src="animation.av1.mp4" type="video/mp4; codecs=av01.0.05M.08">  
    <source src="animation.h264.mp4" type="video/mp4">  
  </video>  
  

[laeyoung]

On utilise souvent des vidéos sur une landing page, donc cela peut valoir le coup d’essayer. À voir si cela fonctionne bien, ou si des cas d’exception empêchent de l’utiliser.