Intégrer du contenu vidéo est devenu incontournable pour rendre une page d’accueil attrayante et dynamique. S’il est utilisé à bon escient, votre contenu provoquera l’effet « wouah » recherché et les visiteurs sauront du premier coup d’oeil qu’ils sont arrivés au bon endroit.
Cependant, il faut veiller à bien optimiser ses vidéos afin d’éviter de longues secondes de chargement supplémentaire qui pénaliseront la performance du site, son référencement et in fine le nombre de visites.
Alors tous à vos caméras !! (et vos outils de compression 😉)
Rappel des notions techniques de base
Aujourd’hui, nous sommes de plus en plus nombreux à être munis de petits bijoux de technologie capables d’enregistrer des clips vidéo en 16:9 4K 60fps 100Mbps le tout en MP4 H.265… Kézako ? Ce jargon vous parle ? S’il ravit d’avance les vidéastes amateurs, il fait frémir vos disques durs, vos serveurs et votre bande passante.
Décriptons ces caractéristiques :
Le ratio :
Ici 16:9 évoque le format cinéma, désormais généralisé au format vertical par Tiktok et Instagram, le format carré 1:1 est d’avantage diffusé sur Facebook. Tout dépend de l’emplacement de la vidéo sur la page, bandeau, colonne de droite, plein écran, mobile…
La résolution :
4K signifie, par abus de langage commercial, une image de 3860 pixels de large par 2160 de haut.
Les résolutions les plus courantes sont :
La fréquence :
60 FPS (frames per second ou IPS pour images par seconde) représente le nombre d’images affichées chaque seconde, autrement dit la fluidité du film. 24 fps suffisent à donner au cerveau l’impression de mouvement.
Pionnier dans la décomposition du mouvement
Le débit :
Exprimé en megabits par seconde (Mbps) ou kilobits par seconde (kbps) le débit (ou bitrate en anglais) à choisir lors de l’exportation d’une vidéo dépend du support sur lequel elle va être affichée. Ce volume de données est un élément majeur à prendre en compte pour la rapidité de chargement d’une page.
L’extension :
.MP4, pour Moving Pictures Expert Group 4 est l’extension par excellence, supportée par la majorité des navigateurs web, c’est un format conteneur qui permet d’encapsuler des données multimédia (audio et vidéo).
Il existe d’autres conteneurs tels que .WEBM, .AVI, .MOV, .WMW….
Actuellement les deux extensions à retenir sont le MP4 et le WEBM car elles allient une grande compatibilité à un taux de compression assez fort.
Le codec :
Comme son nom l’indique le codec sert à encoder le flux de données numériques, le plus souvent dans le but d’en réduire la taille finale. Ils sont nombreux pour la vidéo ( H.265, VP8, AV1…) ainsi que pour l’audio : ( MP3, AAC, OGG, FLAC…)
Résumé d’un workflow de compression de vidéo :
Vous l’avez compris, le challenge va être de parvenir au meilleur compromis entre qualité de vidéo et ergonomie.
Voici un exemple (totalement gratuit) pour obtenir un fichier vidéo de bonne qualité et optimisé pour le web :
- Transférez votre vidéo sur votre ordinateur
- Glissez votre fichier dans la fenêtre du site online.video.cutter.com (10 clips/jour gratuits)
- Vous pouvez alors écourter (trim), recadrer (crop), enlever l’audio, modifier la résolution….
- Exportez votre fichier en .mp4
- Ouvrez maintenant le logiciel gratuit Handbrake pour réduire le poids de votre fichier
- Plusieurs réglages d’exportation sont proposés (nous conseillons « very fast »)
- Le choix de la résolution finale dépend de la destination du fichier (mobile, desktop…)
Quelle durée doit faire une vidéo ?
Lorsqu’elle est placée en arrière plan d’une page web, la vidéo sera réglée en « autoplay » (sauf sur mobile) pour se lancer dès le chargement. La durée idéale pour une vidéo en arrière plan est généralement située entre 12 et 30 secondes.
De fait une boucle trop courte va avoir un caractère répétitif pour l’utilisateur. Au contraire un clip trop long devient une vraie petite histoire et nécessitera d’être traité comme un élément à part. Dans ce dernier cas autant l’héberger sur une plateforme comme Youtube puis l’intégrer dans une section de votre site dans une iframe comme ceci :
Accédez aux options de partage Youtube puis sélectionnez « intégrer » :
À quel endroit d’un site afficher du contenu vidéo ?
Il n’y a bien sûr pas de réponse prédéfinie à cette question car tout dépend du type de site que vous souhaitez développer.
La grande tendance en 2021 est de placer une vidéo en arrière plan sur la home, souvent avec un léger cache couleur ou un filtre de transparence.
Le visiteur est ainsi immédiatement plongé dans l’ambiance visuelle du site, effet garanti sur nos écrans de plus en plus larges.
Notons que l’activation automatique de l’audio sur la page d’accueil n’est plus conseillée pour une expérience web « agréable ».
Il est aussi pertinent d’utiliser un « hero header » sur la page d’accueil, véritable résumé de l’état d’esprit de la marque, il peut inclure un gif, une image, une illustration et bien sûr une vidéo.
Exemple de vidéo s’affichant soit en mp4 soit en webm selon le navigateur :
Au moment de l’intégration, gardez une pensée pour les utilisateurs de mobiles dont la patience diminue au fil du temps, surtout devant un site que ne charge pas vite.
Réservez leur une version statique, ou avec un contenu animé redimensionné en fonction de l’écran ( voir les différents media queries ).
Si vous voulez absolument afficher une vidéo même en faible réception de réseau, il faudra vous tourner vers des solutions « adaptative bitrate ». Grâce à un script qui détecte la bande passante courante, la vidéo affichée passe dynamiquement entre des versions plus ou moins compressées.
Quels outils pour optimiser vos vidéos ?
Il existe un logiciel très puissant et aux nombreuses possibilités chez Adobe, c’est Premiere Pro et son Media Encoder. Du côté d’Apple vous pourrez compter sur Final Cut Pro pour assurer lors de montages de qualité professionnelle et exporter votre fichiers dans de nombreux formats. Ces 2 derniers outils sont payants.
Du côté des logiciels gratuits, nous vous conseillons ces 3 pépites :
Complétés par ces convertisseurs gratuits en lignes, vous pourrez arriver à vos fins sans problème :
À bientôt sur le blog de <ZIP> !!