L’utilisation de vidéo en arrière-plan dans votre site web peut être une excellente façon de capter l’attention initiale des utilisateurs. La vidéo est devenue de plus en plus populaire au fil des années en tant que fonctionnalité pour le design d’arrière-plan et cela va continuer à progresser car la prise en charge de la vidéo HTML5 dans tous les navigateurs modernes est en passe de devenir le paramètre par défaut.

Certaines des questions les plus fréquemment posées que nous avons vu sur internet à propos de la façon d’optimiser les vidéos pour le design web se résument à 2 problèmes courants que vous pourriez rencontrer pendant la création et l’implémentation des vidéos en arrière-plan dans vos projets.

1) La compression des vidéos pour leur utilisation sur les sites web

Le premier problème concerne les fichiers souvent trop gros quand il sont issus des applications d’édition ou de création. C’est un gros problème car la bande passante limitée et les connexions lentes à internet peuvent conduire à des vidéos en pause et à une importante mise en tampon avant qu’elles ne soient entièrement téléchargées.

Ainsi, ce qui était supposé être une fonctionnalité sympa de design qui s’ajoute à l’impression d’ensemble d’un site web peut se transformer en une nuisance pour les visiteurs s’ils doivent attendre que tous les éléments soient chargés et affichés correctement.

compress-web-design

Les vidéos de taille importante ne sont pas seulement néfastes pour les temps de chargement des pages. Elles procurent une expérience négative à l’utilisateur, notamment si votre site est consulté pour la première fois et qu’il n’est pas encore mis en cache. Elle peuvent également impacter de façon négative la SEO de votre site car les temps de chargement des pages sont un important facteur que Google et d’autres prennent en considération. Par conséquent, la compression des vidéos avant leur utilisation sur un site web est incontournable.

2) Conversion des vidéos pour le HTML5

Ensuite, les vidéos que vos collègues vous envoient ou que vous créer dans les suites d’édition peuvent souvent être dans un format source de problème lors de leur lecture car la plupart des navigateurs (Chrome, Firefox, Edge, Opéra, Internet Explorer, Safari, etc.) sont en mesure de reconnaître certains formats vidéo, mais pas tous les formats vidéo, ni tous les codecs vidéo, ni les codecs audio (s’il n’est pas dans un container) sans des plug-ins additionnels.

Le MP4 et le WebM sont aucun doute les formats vidéo les plus courants pour une utilisation sur le web. Du fait d’éventuels problèmes de licence avec le MP4, il est préférable de convertir les vidéos en WebM (VP8) avant de les utiliser sur les sites web et de proposer en option une vidéo au format MP4 (H264) comme format alternatif pour les navigateurs qui ne prennent pas en charge le WebM.

C’est important afin de s’assurer que les vidéos soient acceptées par autant de navigateurs que possibles sur les téléphones, les tablettes, les ordinateurs portables et les systèmes d’exploitation combinés. Malheureusement, à ce jour, il n’existe pas de combinaison format/codec vidéo/codec audio compatible pour tout.

Optimiser les vidéos pour le design web

Comme décrit ci-dessus, une façon d’optimiser les vidéos pour le design web est de réduire la taille du fichier de la vidéo, ce qui contribuera à améliorer de façon drastique les temps de téléchargement des pages et la performance de la lecture de la vidéo.

Les options supplémentaires incluent la réduction de la résolution et de la qualité de la vidéo (taux de compression et débit). Par ailleurs, un autre facteur consiste à choisir un format vidéo largement reconnu.

Bien que nous ne recommandons pas habituellement de trop réduire la résolution et le débit de vos vidéos car ces 2 facteurs sont importants pour la qualité visible de la vidéo, c’est moins problématique dans le cas des vidéos en arrière-plan pour les sites web car les visiteurs du site ne se focalisent pas sur ce type de clip vidéo.

Au lieu de cela, les vidéos HTML5 en boucle sont affichées derrière des calques transparents et/ou des éléments de texte et elles sont un élément de design pris en charge qui doit être téléchargé et lu rapidement sur tout appareil utilisé par vos visiteurs, peu importe la connexion internet dont ils disposent.

Ainsi, un fichier de petite taille est un atout pour la résolution, le débit et la qualité visible dans une certaine mesure.

Comme vous l’avez peut-être déjà deviné, si la création d’un fichier de petite taille pour une vidéo de qualité est l’objectif, notre convertisseur vidéo gratuit et compresseur vidéo en ligne Clipchamp est un bon outil pour y parvenir.

Il est déjà très populaire parmi les designers web, les développeurs web, les graphistes, les créateurs dans WordPress, Wix et Squarespace. Il est également recommandé comme appli utile par les blogueurs en design web et sur les plateformes de construction de site web visuel telles que Webflow, spécifiquement dans le but de compresser les vidéos d’arrière-plan et les cinémagraphes* pour les sites web.

 

compress-video-web-design

 

Clipchamp compresse et convertit les vidéos localement dans votre navigateur avant de les télécharger vers votre serveur, votre hébergeur ou votre site de construction de site web. Donc, il est n’est pas simplement utile dès que la vidéo est installée dans le site web, mais il rend également le téléchargement initial plus rapide.

Pour l’utilisation sur les sites web, nous recommandons généralement de compresser les vidéos jusqu’à au moins 720p en utilisant le paramètre de qualité soit moyen soit faible dans Clipchamp. Les deux options de sortie web et mobile sont possibles – le préréglage mobile produira des fichiers de sortie plus petits que le préréglage web avec une qualité visible légèrement plus réduite.

En résumé, les meilleurs paramètres pour les vidéos en arrière-plan sont soit web, 720p, qualité moyenne, MP4 ou WebM ou mobile, 720p, qualité moyenne, MP4. Selon votre fichier source et sa qualité, ainsi que la taille du fichier des vidéos en sortie que Clipchamp produit dans votre scénario, il est préférable d’essayer une combinaison de différents paramètres pour obtenir le résultat souhaité.

HTML5-background-video

Nous comprenons qu’il peut être tentant d’utiliser des vidéos de qualité élevée  – 1080p ou plus, mais nous le conseillons pas si nous prenons en compte que le temps moyen que les visiteurs passent sur un site web donné est inférieur à 15 secondes. Vous voulez faire une bonne première impression au cours de ces cruciales premières secondes et notre convertisseur vidéo en ligne peut y contribuer.


*Vous vous demandez ce que sont les cinémagraphes ? Consultez ce subreddit et ses magnifiques exemples.