Le meilleur format vidéo pour ton site web : MP4, WebM & plus

TL;DR : Le meilleur format vidéo pour ton site web

Cet article est assez long et entre dans les détails. Voici un petit résumé « trop long ; pas lu » pour toi. Le choix du bon format vidéo dépend de tes besoins. MP4 est universellement compatible et idéal pour des tailles de fichiers modérées. WEBM offre une compression plus efficace et convient aux sites web modernes et performants, mais le support navigateur est limité. AVIF est excellent pour les animations et offre une qualité d'image remarquable avec des fichiers légers, mais n'est pas supporté par tous les appareils anciens. Il y a quelques avantages et inconvénients supplémentaires (voir ci-dessous). Les autres formats ne devraient pas être utilisés.

Pour les vidéos, tu as deux options : L'auto-hébergement ou l'hébergement professionnel. L'auto-hébergement signifie configurer ton propre player et gérer manuellement les différentes qualités vidéo, ce qui demande des efforts et des ressources supplémentaires. Les services professionnels, en revanche, fournissent un véritable streaming adaptatif et simplifient considérablement la gestion vidéo, pour une meilleure expérience pour tes visiteurs.

Notre expertise en formats vidéo

Ces dernières années, nous nous sommes concentrés intensément sur les vidéos web et leur intégration dans des projets web de toutes tailles. Grâce à ce travail, nous avons acquis une solide expertise et comprenons les défis liés à l'intégration de vidéos dans un site web — qu'il s'agisse d'optimiser les temps de chargement, de trouver le bon équilibre entre qualité et consommation de données, ou de respecter les normes d'accessibilité européennes pour les vidéos. Par insatisfaction envers les autres solutions, nous avons développé Ignite Video Hosting. Mais ce n'est pas le sujet ici.

Critères importants pour choisir un format vidéo

Tu pourrais bien sûr scroller directement jusqu'au tableau, mais prenons d'abord un peu de recul pour examiner les critères de base. Parce qu'une chose à dire d'emblée : il n'y a pas de « solution parfaite unique ».

Pour nous, les aspects techniques et les besoins de ton audience cible jouent tous deux un rôle crucial.

1. Qualité vs. temps de chargement La qualité et la durée d'une vidéo influencent considérablement la taille du fichier. Une qualité plus élevée signifie souvent des fichiers plus lourds, ce qui peut entraîner des temps de chargement plus longs. Un ratio équilibré entre taille de fichier et qualité est essentiel pour éviter de frustrer les utilisateurs avec des temps de chargement interminables.
2. Compatibilité Un format vidéo doit fonctionner sur un maximum d'appareils et de navigateurs. Le support des navigateurs anciens et des appareils mobiles est particulièrement important pour toucher un large public. En tant que développeurs web ou designers qui implémentent des solutions, on a tendance à posséder les derniers appareils et à utiliser des logiciels modernes. Malheureusement, la réalité est toute autre. Vieux navigateurs. Vieux ordinateurs. Vieux smartphones avec des navigateurs obsolètes.
3. Exigences de streaming Surtout pour les vidéos longues ou un grand nombre de spectateurs simultanés, un streaming efficace est nécessaire. Le streaming adaptatif garantit que les utilisateurs obtiennent la meilleure qualité en fonction de leur vitesse de connexion.
4. Accessibilité Des vidéos accessibles sont essentielles pour de nombreux publics. Cela inclut la possibilité d'ajouter des sous-titres ou des audiodescriptions et s'assurer que le player vidéo est facile à utiliser. La Directive européenne sur l'accessibilité deviendra obligatoire en 2025, ce qui signifie que tu ne peux plus l'ignorer. (Les détails sur les vidéos et l'accessibilité se trouvent ici, et un bon exemple de player vidéo accessible ici).
5. Consommation de bande passante et charge serveur Un format vidéo efficace réduit la consommation de données pour les utilisateurs comme pour les serveurs. C'est particulièrement important en cas de trafic élevé ou de capacité serveur limitée. Sur les petits projets web, ça n'a souvent pas d'importance. Mais dès que tu as beaucoup de visiteurs simultanés, ça peut devenir un problème — ou tout simplement coûteux, à cause de la bande passante que tu génères.
6. Environnement technique Dans quel environnement les vidéos vont-elles tourner ? Est-ce « juste » un site WordPress ou un CMS plus conséquent comme Magnolia ? Comment les vidéos y sont-elles intégrées ? Le CMS supporte-t-il le format souhaité ? Au final : ai-je vraiment le choix ?
7. Cas d'utilisation Nous partons généralement de la meilleure UX possible pour les visiteurs, donc les différents cas d'utilisation sont déterminants pour le choix du bon format. Les vidéos d'arrière-plan qui se jouent derrière d'autres éléments nécessitent souvent une qualité moindre pour minimiser les temps de chargement. Les vidéos intégrées dans le contenu, qui peuvent être assez longues, nécessitent une qualité supérieure et des options de streaming efficaces pour garantir une bonne expérience utilisateur.
8. Auto-hébergement ou hosting professionnel ? Quand il s'agit d'intégrer des vidéos sur ton site web, tu as essentiellement deux options : auto-héberger la vidéo ou utiliser un service de hosting professionnel. Avec l'auto-hébergement, tu auras besoin de divers composants comme un serveur puissant, un player vidéo adapté, et suffisamment de bande passante et de stockage pour gérer un trafic élevé. En plus, tu dois gérer l'encodage des vidéos pour les proposer dans différents niveaux de qualité. Alternativement, les services de hosting professionnel peuvent se charger de tout ça. Ces solutions fournissent du streaming adaptatif, une qualité vidéo optimisée et des fonctionnalités d'accessibilité facilement intégrables. Surtout pour les sites web avec du contenu vidéo de haute qualité, cette option en vaut la peine car elle élimine le besoin d'encodage, d'intégration de player et d'infrastructure de streaming.

Tous les formats vidéo pour sites web en détail

Assez parlé, passons aux formats. Comme tu l'as vu plus haut, le choix du bon format vidéo pour ton site web dépend fortement de l'usage prévu. Chaque format a ses avantages et inconvénients spécifiques, qui pèsent différemment selon le cas d'utilisation. Regardons en détail les formats vidéo les plus courants, leurs usages, et leurs forces et faiblesses.

MP4 : le standard universel

Le MP4, basé sur le standard MPEG-4, a été développé pour stocker et lire efficacement des données vidéo et audio. C'est l'un des formats vidéo les plus utilisés, pris en charge par la quasi-totalité des navigateurs et appareils modernes.

Avantages

• Grande compatibilité : Fonctionne dans pratiquement tous les navigateurs, systèmes d'exploitation et appareils.
• Bonne qualité pour une taille de fichier modérée : Idéal pour la plupart des cas d'utilisation.
• Compatible streaming : Permet le Streaming adaptatif via HLS.
• Accessibilité : Prend en charge les sous-titres et les métadonnées.

Inconvénients

• Technologie de compression obsolète : Le MP4 utilise H.264, qui est moins efficace que les codecs modernes comme AV1, ce qui donne des fichiers plus lourds pour la même qualité.
• Pas de licence ouverte : Le codec H.264 est breveté, et son utilisation peut nécessiter des frais de licence, notamment pour les applications commerciales.
• Pas de compression sans perte : Le MP4 utilise une compression avec perte, ce qui signifie que la qualité diminue à chaque compression, le rendant inadapté quand une qualité maximale est requise.
• Manque de flexibilité pour les ajustements dynamiques : Le MP4 sans streaming adaptatif ne permet pas d'ajuster dynamiquement la qualité, ce qui peut poser problème avec des conditions réseau variables. Oui, il gère le streaming HLS, mais ton serveur et ton player doivent le supporter.

Cas d'utilisation Le MP4 est un format courant pour intégrer des vidéos sur les sites web grâce à sa large compatibilité avec différents appareils et navigateurs. Il convient bien pour les applications nécessitant une lecture sur la plupart des plateformes, et pour les vidéos de durée et taille modérées. Les vidéos d'arrière-plan fonctionnent aussi bien en MP4, car le format offre un bon équilibre entre qualité et temps de chargement. En revanche, pour les vidéos d'arrière-plan, assure-toi qu'elles soient les plus légères et courtes possible.

WEBM : le favori moderne

WEBM a été développé par Google comme un format open source spécialement conçu pour le web. Il utilise des codecs modernes comme VP9 ou AV1, qui offrent une compression élevée et une bonne qualité.

Avantages

• Haute efficacité : Très bonne qualité avec des fichiers de petite taille.
• Utilisation gratuite : Sans licence grâce à sa nature open source.
• Compatible streaming : Prend en charge le Streaming adaptatif via DASH.
• Accessibilité : Prend en charge les sous-titres et autres métadonnées.

Inconvénients

• Compatibilité : Support limité sur Safari et les appareils plus anciens. En septembre 2024, Safari avait une part de marché mondiale d'environ 9,2 % (Source : Statista), ce qui signifie qu'une partie des utilisateurs pourrait avoir du mal à lire ces vidéos. Selon ton audience cible, environ 1 visiteur sur 10 pourrait ne pas pouvoir voir ta vidéo.
• Faible accélération matérielle : Ça sonne un peu geek, mais beaucoup de smartphones et tablettes anciens n'ont pas d'accélération matérielle native pour les vidéos WebM. Cela signifie que l'appareil a besoin de plus de puissance de calcul. Si tu as aussi d'autres animations, beaucoup de CSS, JavaScript, etc., cela peut souvent provoquer des saccades ou de mauvaises performances sur l'ensemble du site.

Cas d'utilisation WEBM convient particulièrement aux sites web qui misent sur une utilisation efficace de la bande passante et des temps de chargement rapides — surtout quand la performance et les petits fichiers sont prioritaires. Il est économique car sans licence. Pour nous, le plus gros problème a toujours été la compatibilité. Même si le nombre d'appareils non supportés diminue régulièrement, est-ce que tu veux vraiment risquer d'exclure 1 visiteur sur 10 ? On a souvent fini par revenir au MP4.

GIF : obsolète et inefficace

Ce n'est pas vraiment un format vidéo. Alors pourquoi il apparaît ici ? Parce qu'en pratique, on voit souvent des GIF utilisés pour animer des sites web.

Soyons honnêtes : si ce n'est pas une animation graphique ou un mème, c'est vraiment une mauvaise idée.

Avantages

• Euh… ouais… Le charme rétro ?

Inconvénients

• Qualité médiocre : Palette de couleurs limitée (256 couleurs) et pas d'option HD.
• Consommation de bande passante élevée : Fichiers très lourds pour les animations longues. Si tes visiteurs n'ont pas la meilleure connexion internet (p. ex. en déplacement), ça devient vraiment problématique.
• Aucune accessibilité : Ne prend pas en charge les sous-titres ni les métadonnées. Particulièrement problématique si tu essaies de l'utiliser pour intégrer une vidéo.

Cas d'utilisation Animations simples ou petits effets visuels. Si ton contenu ressemble à une vidéo — n'utilise pas le GIF.

MOV : obsolète et inadapté au web

MOV a été développé par Apple et était autrefois le format standard pour QuickTime. Il offre une haute qualité mais, pour le dire poliment, il est obsolète pour le web. Ne l'utilise tout simplement pas.

Inconvénients

• Fichiers volumineux : Inadapté pour le web.
• Compatibilité limitée : Optimisé principalement pour les appareils Apple.
• Inadapté au streaming efficace.

Cas d'utilisation Éventuellement pour le montage professionnel ou comme format intermédiaire en production vidéo. Mais si quelqu'un t'envoie un fichier MOV pour le site web, ne l'intègre pas directement. Regarde MP4 ou WEBM ci-dessus.

AVI : une relique du passé

AVI (Audio Video Interleave) a été développé par Microsoft et c'est l'un des plus anciens formats vidéo. Comme pour MOV, notre avis est clair : NE L'UTILISE PAS ! Il est tout simplement obsolète.

Inconvénients

• Fichiers volumineux : Tailles de fichiers très inefficaces.
• Compatibilité web limitée : Inadapté aux standards web modernes.
• (La honte : Les autres développeurs web vont te regarder bizarrement si tu mets un fichier AVI sur ton site.)

Cas d'utilisation Juste… non.

AVIF : moderne mais spécialisé

AVIF (AV1 Image File Format) est basé sur le codec AV1 et est principalement conçu pour les images. Il y a quelques cas d'utilisation où c'est un bon choix, notamment pour les animations. Dans ces cas-là, tu n'as généralement pas besoin d'un format vidéo classique, car les pertes de qualité peuvent souvent gâcher l'animation.

Avantages

• Excellente compression : Fichiers très petits avec une haute qualité.
• Open source : Sans licence et tourné vers l'avenir.

Inconvénients

• Usage limité : Inadapté aux vidéos « longues ». Dans ce cas, tout ce qui dépasse 5-10 secondes est considéré comme long.
• Compatibilité : Pas encore pris en charge partout. Comme pour WEBM, environ 10-15 % des utilisateurs pourraient avoir un navigateur plus ancien et donc ne pas voir la vidéo. Le pourcentage diminue, mais tu devrais peut-être vérifier tes stats et peser le pour et le contre toi-même.
• Pas d'option streaming : Pas conçu pour le Streaming adaptatif.

Cas d'utilisation Pour les animations ou les petits clips qui doivent être extrêmement légers en données. Si tu as ce cas précis : fonce. Pour l'instant, on recommande d'ajouter un fallback pour les navigateurs et smartphones plus anciens.

En profondeur : le Streaming adaptatif des vidéos sur le web

Tu as peut-être remarqué qu'on a pas mal insisté sur le sujet du « streaming ». C'était tout simplement l'un des plus grands défis que nous avons rencontrés en intégrant des vidéos. Bien sûr, tu peux auto-héberger des fichiers MP4 ou WebM, mais ce n'est pas terrible et c'est compliqué.

Pourquoi ? Le mot magique, c'est « streaming adaptatif ».

Streaming adaptatif de fichiers auto-hébergés

Avec un format vidéo auto-hébergé comme MP4 ou WebM, tu peux techniquement faire du streaming adaptatif. Cependant, tu dois créer manuellement la vidéo en plusieurs niveaux de qualité (p. ex. 360p, 720p, 1080p). Ensuite, un player est nécessaire pour sélectionner le niveau de qualité approprié en fonction de la bande passante et de l'appareil de l'utilisateur. Concrètement, un utilisateur avec une connexion lente reçoit une qualité inférieure (p. ex. 360p), tandis qu'une connexion plus rapide fournit la meilleure qualité.

Streaming adaptatif via des services de hosting vidéo

Les services professionnels proposent un « vrai » streaming adaptatif, qui génère automatiquement différents niveaux de qualité et les délivre à l'utilisateur sans que tu aies besoin d'intervenir manuellement en tant qu'opérateur de site web. Ces services utilisent des protocoles spéciaux comme HLS (HTTP Live Streaming) ou DASH, qui garantissent que la vidéo est diffusée en petits segments. La qualité de ces segments s'adapte dynamiquement à la bande passante et à l'appareil de l'utilisateur. (Oui, tu peux aussi le faire avec des fichiers auto-hébergés, mais tu dois tout configurer toi-même.)

Les utilisateurs obtiennent toujours la meilleure qualité possible sans interruptions de chargement ni temps de démarrage longs — le tout automatiquement.

Pourquoi est-ce important ?

• Streaming adaptatif de fichiers (p. ex. MP4/WebM) est techniquement possible, mais tu dois tout mettre en place toi-même. Ce n'est généralement pas du vrai streaming, mais plutôt une sélection de différents fichiers pré-préparés parmi lesquels le player choisit.
• Le vrai Streaming adaptatif (HLS/DASH) va au-delà de ce qu'on peut faire avec des vidéos auto-hébergées en ajustant la qualité vidéo en temps réel. Le streaming adaptatif s'adapte de manière flexible à la bande passante, ce qui améliore grandement l'expérience utilisateur, surtout dans des conditions réseau changeantes.

La différence est-elle vraiment si grande qu'il faut un chapitre dédié ?

Oui, la différence est encore significative parce qu'en pratique, on recule souvent devant l'effort. Un fichier est uploadé dans le CMS. Ça ira bien. On connaît ça nous-mêmes ; tu construis un site web avec 1 000 choses à faire, et évidemment, rendre la vidéo en plusieurs versions dans les bons formats ne fait souvent pas partie de la liste.

Dans un environnement aussi compétitif que le web, « ça ira bien » finit par devenir un vrai problème — surtout si tes visiteurs ne peuvent pas voir les vidéos ou ont une mauvaise expérience.

Par exemple, si tu utilises des vidéos en arrière-plan pour des bannières ou des éléments similaires, tu devrais calculer une taille appropriée en fonction de leur dimension et de leur position. C'est normal pour les images. Tu ne mettrais pas non plus un PNG de 12 Mo dans le contenu — mais avec les vidéos, beaucoup oublient ça en pratique.

Prouve-le : quelle est la vraie différence ?

OK, ça va devenir un peu technique maintenant. Tu peux scroller si tu veux.

Prenons un exemple : avec une connexion 4G modérée d'environ 10 Mbit/s (1,25 Mo/s), les différences entre un MP4 auto-hébergé et un vrai streaming adaptatif sont plus perceptibles.

Hypothèses de l'exemple :

• Fichier vidéo : 20 Mo, 1 minute de durée
• Vitesse de connexion (4G modérée) : Moyenne de 10 Mbit/s (1,25 Mo/s)

1. Fichier MP4 (auto-hébergé, non adaptatif)

• Temps de téléchargement complet : 20 Mo / 1,25 Mo/s ≈ 16 secondes
• Temps de mise en mémoire tampon avant la lecture : En général, 25 à 30 % de la vidéo doivent être préchargés, ce qui signifie que charger les premiers 5-6 Mo prend environ 4-5 secondes.
• Si la connexion devient instable et descend sous 10 Mbit/s, la lecture peut s'arrêter et doit recharger parce que la qualité ne s'ajuste pas dynamiquement.

2. Streaming adaptatif (HLS/DASH)

• Temps de démarrage de la vidéo : Le vrai streaming adaptatif découpe la vidéo en petits segments, généralement de 2 à 10 secondes de durée. Avec une connexion 4G modérée, un premier segment en qualité inférieure est chargé, ce qui permet à la vidéo de démarrer en environ 1 seconde.
• Ajustement continu : Le streaming adaptatif ajuste la qualité dynamiquement en fonction de la bande passante disponible. Si la connexion descend à 6-8 Mbit/s, le système passe automatiquement à une résolution inférieure pour maintenir une lecture ininterrompue. Cela garantit que la vidéo reste stable même avec une connexion plus faible.

Résumé des temps de chargement :

• MP4 sans Streaming adaptatif : Démarre en environ 4-5 secondes avec une connexion 4G modérée et stable.
• Streaming adaptatif (HLS/DASH) : Démarre en environ 1 seconde parce qu'il ne charge qu'une petite portion en qualité inférieure.

4 secondes ? Ça ne gêne personne ? Pourquoi se donner tant de mal ?

Eh bien… Va maintenant sur un site web, regarde du contenu, et compte jusqu'à quatre… une partie de tes visiteurs aura déjà scrollé plus loin, changé d'onglet, ou tout simplement quitté la page.

Surtout avec les connexions mobiles, souvent instables, l'ajustement continu de la qualité est crucial pour une bonne expérience utilisateur.

Conclusion : différents formats pour différents cas d'usage

Long article. Désolé. Mais comme tu peux le voir, il n'y a pas « une seule solution ». C'est complexe.

1. MP4 – Le couteau suisse universel

• Quand l'utiliser ? Pour des vidéos qui doivent fonctionner sans accroc sur tous les appareils.
• Avantages : Haute compatibilité, taille de fichier modérée, support du streaming.
• Inconvénients : Codec sous licence, compression moins efficace par rapport aux formats récents.

2. WEBM – Pour des sites web modernes et efficaces

• Quand l'utiliser ? Si tu privilégies des temps de chargement rapides et des fichiers légers.
• Avantages : Compression efficace, codecs modernes, faible utilisation de la bande passante.
• Inconvénients : Compatibilité limitée (voir plus haut) et capacités de streaming restreintes.

3. AVIF – Pour les animations et images efficaces

• Quand l'utiliser ? Pour des animations de haute qualité.
• Avantages : Excellente compression, technologie moderne, libre de droits.
• Inconvénients : Compatibilité limitée (voir plus haut).

Ou utilise un hosting vidéo professionnel pour tes vidéos

Notre avis Sommes-nous neutres ici ? Oui et non.

Nous avons implémenté l'une de ces solutions pendant des années, mais soyons honnêtes — les vidéos sont devenues un élément tellement essentiel des sites web. On y investit tant d'efforts et d'argent, et ensuite on accepte des obstacles artificiels ? Pas vraiment idéal.

Pour nous, le hosting professionnel est devenu la seule solution, mais nous avons ensuite été confrontés à un nouveau problème avec Vimeo, YouTube, Wistia — la conformité RGPD. Tous exigeaient un consentement et des solutions bancales pour l'expérience utilisateur. Nous ne voulions pas de compromis — ni sur le format, ni sur la technologie. C'est pourquoi nous avons créé Ignite. Chez nous, tu peux héberger tes vidéos professionnellement dès 15 €. Nous générons automatiquement ta vidéo dans différents codecs et tailles. Tu n'as qu'à l'intégrer, ou utiliser notre player, qui est aussi accessible.

On sait qu'une fois que tu as 5 à 10 vidéos sur ton site web, les gérer devient un casse-tête — entre toutes les versions, les différents formats, les miniatures de prévisualisation, etc.