Compression vidéo

Optimiser les vidéos HTML5 pour une utilisation en design Web

Clipchamp est un logiciel gratuit de montage vidéo en ligneEssai gratuit
Partager cet article

Dernière mise à jour : 15 octobre 2019

Les vidéos en ligne continuent de dominer l'Internet et sont devenues un élément courant dans la conception des sites Web.

Les vidéos attirent l'attention et stimulent l'imagination, il est donc logique qu'elles soient intégrées dans de nombreuses pages d'accueil pour capter le regard de l'utilisateur. La quasi-totalité des navigateurs Web est désormais compatible avec la vidéo HTML5. C'est donc le moment idéal pour ajouter une vidéo d'arrière-plan ou d'en-tête à votre site.

Clipchamp propose de superbes modèles qui pourraient convenir parfaitement au design de votre site Web, tels que ce magnifique cinémagraphe :

Utilisez ce modèle

Les raisons pour lesquelles vous devriez ajouter des vidéos HTML5 à votre site sont nombreuses, mais ne vous précipitez pas pour autant. Vous pouvez rencontrer quelques difficultés et vous devrez optimiser vos vidéos pour faciliter leur usage. Voici le sommaire de cet article :

  1. Pourquoi vous devez optimiser les vidéos pour votre site

    • Les clients délaissent les sites lents

    • Certains formats vidéo sont plus avantageux

  2. Comment optimiser vos vidéos avec Clipchamp

    • Compresser vos vidéos en HTML5

    • Convertir votre vidéo pour une meilleure compatibilité avec les navigateurs

1. Pourquoi vous devez optimiser les vidéos pour votre site

Les avantages de la vidéo HTML5 ne sont pas sans contrepartie. Les contenus vidéo intégrés qui s'affichent automatiquement peuvent ralentir le chargement des pages, et nuire considérablement à la fréquentation de votre site. Vous pouvez également rencontrer des difficultés si vos vidéos ne sont pas compatibles avec les navigateurs utilisés par vos clients.

Les clients délaissent les sites lents

Si votre vidéo HTML5 est trop volumineuse, elle risque de ralentir considérablement votre site Web professionnel. Cela peut entraîner une expérience désagréable pour les utilisateurs qui subissent les arrêts intempestifs de votre vidéo le temps que le site charge.

Ainsi, ce qui au départ est supposé être un atout esthétique pour votre site Web peut devenir une nuisance pour les visiteurs s'ils doivent attendre que tous les éléments se chargent et s'affichent correctement.

Desktop and mobile user waiting for video to load

Même si vous bénéficiez d'un excellent référencement et proposez des offres fantastiques qui attirent les internautes sur votre site, une mauvaise expérience utilisateur peut tout gâcher. Non seulement vous ferez fuir vos visiteurs, mais Google en tiendra compte. Le temps de chargement des pages et le taux de clics sont deux facteurs importants qui influent sur le classement de votre page dans Google. Veillez donc à compresser les vidéos utilisées sur votre site.

Si votre contenu vidéo est hébergé dans le cloud, assurez-vous que votre fournisseur de services cloud garantit un temps de chargement rapide et une disponibilité élevée. De cette façon, vous pouvez offrir une expérience vidéo sans interruption à vos visiteurs. Certains fournisseurs d’hébergement cloud proposent un essai gratuit de leurs services.

Outil de montage vidéo en ligne.

Gratuit sans limite de temps. Créez des vidéos professionnelles en quelques minutes.

Certains formats vidéo sont plus avantageux

La plus belle vidéo HTML5 au monde ne vous sera d'aucune utilité si elle ne se charge pas dans le navigateur des utilisateurs. Certains formats vidéo ne sont pas compatibles avec tous les types de navigateurs. Vous devez donc convertir vos vidéos pour éviter ce moment embarrassant où votre super contenu vidéo reste invisible. Ce point est important pour que les vidéos soient lisibles sur le plus grand nombre de navigateurs et d'appareils possible. 

Contrairement à l’anneau de Tolkien, il n'existe pas de « format unique pour les gouverner tous », le mieux étant de choisir entre WebM (VP8) ou MP4 (H264). Ceux-ci chargeront dans la plupart des navigateurs, mais pas tous. 

Pour aller plus loin, la meilleure chose à faire est de convertir votre contenu vidéo au format WebM avant de l’intégrer dans votre site Web, tout en proposant une alternative au format MP4. Ainsi, dans les rares cas où WebM n'est pas pris en charge, la version MP4 sera utilisée à la place.

2. Comment optimiser vos vidéos avec Clipchamp

Les deux mesures les plus importantes pour optimiser des vidéos pour votre site Web sont la compression et la conversion – et vous pouvez faire les deux gratuitement en utilisant Clipchamp Utilities !

Comme mentionné ci-dessus, la compression et la conversion sont les meilleures stratégies d’optimisation de vidéos pour la conception de sites Web. Elles contribueront à améliorer considérablement le temps de chargement des pages et les performances de lecture. 

Mais avant, nous avons une recommandation : pour des raisons de qualité, nous proposons généralement de ne pas trop réduire la résolution et le débit de vos vidéos. Cela dit, vous pourrez peut-être pousser un peu plus les réglages dans le cas de vidéos conçues pour être jouées en arrière-plan de votre site. Ces vidéos ne sont pas le seul centre d'attention, et sont souvent affichées sur des écrans plus petits puisque la plupart des visites se font sur téléphone portable. 

Les vidéos HTML5 en boucle sont généralement affichées derrière des calques transparents ou des éléments de texte, et doivent être chargées et lues rapidement sur tout type d'appareil, quelle que soit la vitesse de la connexion Internet. Ainsi, le faible encombrement des fichiers prime sur la résolution. Le site de Clipchamp est justement une bonne illustration de cette pratique. Revenons maintenant à l'optimisation de vos vidéos :

Compresser vos vidéos en HTML5

Comme vous l'avez peut-être deviné, si votre objectif est de créer un petit fichier vidéo de bonne qualité, le convertisseur et compresseur vidéo en ligne gratuit de Clipchamp est l'outil qu'il vous faut.

Sa popularité est déjà grande auprès des concepteurs et développeurs Web, des graphistes ainsi que des créateurs utilisant WordPress, Wix et Squarespace. Il est également recommandé par les blogueurs spécialisés dans la conception de sites Web et les plateformes visuelles de création de sites Web telles que Webflow, notamment pour compresser des vidéos et des cinémagraphes d'arrière-plan.

Clipchamp enterprise users

Clipchamp compresse et convertit les vidéos localement dans votre navigateur avant que vous ne les transfériez sur votre serveur, chez votre hébergeur ou sur votre plateforme de création de sites Web. Notre application permet ainsi de faciliter la lecture de la vidéo une fois sur le site, mais également d’accélérer son transfert vers celui-ci.

Pour une utilisation sur site Web, nous recommandons généralement de compresser les vidéos jusqu'à 720p au minimum, en utilisant le paramètre de qualité moyenne ou faible de Clipchamp. Les options de sortie Web et Mobile sont toutes deux possibles - le préréglage Mobile produira des fichiers moins volumineux que le réglage Web, avec une qualité visuelle légèrement réduite.

Optimize your video for web

Convertir votre vidéo pour une meilleure compatibilité avec les navigateurs

Vous pouvez facilement convertir votre vidéo pour améliorer sa compatibilité avec les navigateurs en utilisant Clipchamp Utilities. Il vous suffit de charger votre vidéo, de choisir le format souhaité sous Personnaliser les paramètres et le convertisseur gratuit de Clipchamp s'occupera du reste :

Select WebM

Si vous souhaitez ajouter une vidéo de secours au format MP4 pour votre site, il vous suffit de répéter le processus et de sélectionner MP4 à la place.

Plus sur le blog de Clipchamp

Passez vos vidéos de votre téléphone à Clipchamp

November 1, 2020
Certains de nos utilisateurs nous ont demandé comment convertir ou compresser les…

Comment la vidéo améliore-t-elle les taux de conversion pour le e-commerce ?

June 2, 2020
**** Mise à jour : 28 mai 2020 **** Que vous soyez une petite entreprise qui lance…

Comment intégrer une vidéo dans les versions Word 2007- 2016 ?

March 2, 2020
Que vous soyez un professionnel essayant de faire ressortir votre portefeuille ou…

Lancez-vous dans la création de vidéos gratuitement avec Clipchamp