Une vidéo non optimisée peut peser plusieurs gigaoctets et tuer les performances d'un site en quelques secondes. Voici comment choisir le bon format, régler la compression et charger les vidéos intelligemment.
La vidéo est le média le plus lourd du web. Une mauvaise gestion des formats et de la compression peut rendre un site inutilisable sur mobile. Voici les bases pour intégrer des vidéos performantes.
Les formats principaux
- MP4 / H.264 : le format universel. Support sur tous les navigateurs et appareils, encodage mature et bien outillé. Idéal pour la compatibilité maximale. Bitrate recommandé : 800kbps–2Mbps selon la résolution.
- WebM / VP9 : format open source de Google. 30-40% plus léger que H.264 à qualité équivalente. Support excellent
sur Chrome et Firefox, partiel sur Safari. À utiliser en complément de MP4 via la balise
<source>. - MP4 / H.265 (HEVC) : successeur de H.264, deux fois plus efficace. Support encore limité sur le web (Safari uniquement sans licence). À surveiller.
- AV1 : le format next-gen, open source, encore meilleur que VP9. Support croissant (Chrome 70+, Firefox 67+, Safari 16.4+). Encodage très lent côté serveur — à réserver aux contenus importants.
Bitrate et résolution selon l'usage
- Vidéo mobile (360-480p) : 300–500 kbps
- SD web (720p) : 800 kbps–1.5 Mbps
- HD web (1080p) : 1.5–4 Mbps
- Background vidéo (hero section, muet) : 500kbps–1Mbps, 720p suffisant
- Streaming adaptatif (HLS/DASH) : multiple bitrates, CDN vidéo recommandé
Bonnes pratiques HTML
La balise <video> avec sources multiples permet au navigateur de choisir le meilleur format supporté. Pour les vidéos
de fond : autoplay muted loop playsinline est la combinaison correcte — sans muted, l'autoplay est bloqué par les
navigateurs. Le lazy loading natif (loading="lazy") n'est pas encore supporté sur <video> : utiliser
preload="none" ou une solution JS avec IntersectionObserver.
Outils de compression
- FFmpeg : l'outil CLI de référence, gratuit, supporte tous les formats. Exemple :
ffmpeg -i input.mp4 -c:v libvpx-vp9 -crf 32 -b:v 0 output.webm - HandBrake : interface graphique conviviale, parfait pour les non-développeurs
- Cloudflare Stream / Mux / Cloudinary : CDN vidéo avec transcodage automatique et streaming adaptatif. La meilleure option pour les sites à fort trafic.