Comment bien optimiser vos vidéos pour le web ?
Rate this post

Comment bien optimiser vos vidéos pour le web ?

Publié le 1 juin 2021

 

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…

 

 

ratios vidéo mobile
Les ratios communs sur écran de 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 :

 

résolutions vidéo infographie

 

 

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.  

 

 

mouvement décomposé fréquence
Edward Muybridge, 1878
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 »  :

 

integrer video youtube iframe

 

 

 

À 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> !!

Rate this post

Par jugement en date du 4 avril 2023, le Tribunal de Commerce de BREST a prononcé la liquidation judiciaire de la société ZIP et de la société Beable avec une poursuite d’activité jusqu’au 12 avril prochain inclus, et désigné la SELARL FIDES, prise en la personne de Maître Bernard CORRE, en qualité de Liquidateur Judiciaire.

La poursuite d’activité jusqu’au 12 Avril nous permet d’assurer la transition pour nos clients vers le prestataire de leur choix. Vous allez recevoir un courrier officiel dans les prochains jours et nous pourrons ensuite convenir ensemble des modalités de transfert de vos données. Sachez que nous mettons tout en oeuvre de notre côté pour que vous soyez le moins impacté par l’arrêt de notre activité.