Videocompressie

HTML5-video's optimaliseren voor je website

Clipchamp is een gratis online video-editorProbeer gratis
Deel deze post

Laatst bijgewerkt: 15 oktober 2019

Online video blijft het internet domineren en het is nu een veelgebruikt element geworden in webdesign. 

Video's trekken aandacht en spreken de verbeelding aan. Het is dan ook geen wonder dat het op vele startpagina's wordt gebruikt om de aandacht van de gebruiker te trekken. Bijna alle webbrowsers ondersteunen HTML5 video inmiddels, dus dit is het perfecte moment om een achtergrond- of headervideo aan je website toe te voegen.

Clipchamp heeft een aantal geweldige sjablonen die perfect zouden kunnen zijn voor je websiteontwerp, zoals deze prachtige cinemagraph:

Gebruik dit sjabloon

Er zijn talloze redenen voor het toevoegen van HTML5-video aan je website, maar je hoeft het niet te overhaasten. Er kunnen enkele problemen optreden en je moet je video's optimaliseren zodat ze goed worden afgespeeld. Dit gaan we bespreken:

  1. Waarom je jouw video's moet optimaliseren voor je website

    • Langzame websites verliezen klanten

    • Niet alle videoformaten zijn gelijk

  2. Hoe optimaliseer je video's met Clipchamp?

    • Je video's comprimeren voor HTML5

    • Je video converteren voor compatibiliteit met de browser

1. Waarom je video's moet optimaliseren voor je website

De voordelen van HTML5 kennen zo hun prijs. Ingebedde videocontent die automatisch wordt afgespeeld, kan ertoe leiden dat pagina's enorm langzaam laden en dat is een enorme killer voor je traffic. Je zou ook tegen problemen kunnen aanlopen als je video's niet compatibel zijn met de browsers die je klanten gebruiken.

Langzame websites verliezen klanten

Als je HTML5-video te groot is, dan kan dit je website veel langzamer maken. Dit kan tot een onprettige ervaring leiden voor gebruikers die zien dat je video steeds op pauze gaat en buffert terwijl de pagina wordt geladen. 

Wat dus een leuke designfunctie zou moeten zijn die bijdraagt aan de algehele indruk van een website, kan voor bezoekers hinderlijk worden als ze moeten wachten tot alle elementen zijn geladen en correct worden weergegeven.

Zelfs al heb je een geweldige SEO en fantastische aanbiedingen die mensen naar je website lokken, dan kan een slechte gebruikerservaring dit alles teniet doen. Mensen zullen je website niet alleen wegklikken, maar Google zal dit ook merken. De laadtijd van je pagina en de wegkliksnelheid zijn beide belangrijke factoren die van invloed zijn op de Google-classificering. Zorg dus voor het comprimeren van je video's voor je website.

Als je videocontent zich in de cloud bevindt, zorg er dan voor dat je cloudhostingprovider snel laden en een goede uptime garandeert. Daardoor kun je een ononderbroken video-ervaring aan de bezoekers van je website bieden.

Video- editor in je browser.

Altijd gratis. Maak professionele video's binnen enkele minuten.

Niet alle videoformaten zijn gelijk

De beste HTML5-video ter wereld zal je niet helpen als hij niet wordt geladen in de browser van bezoekers. Niet alle videoformaten worden in alle soorten browsers geladen, dus je moet je video's converteren om dat ongemakkelijke moment te vermijden, waarop die flitsende videocontent niet wordt geladen. Dit is belangrijk om ervoor te zorgen dat video's worden geaccepteerd door zoveel mogelijk browsers op zoveel mogelijk apparaten. 

Helaas is er geen enkel formaat dat overal in werkt, maar de beste formaten zijn toch wel WebM (VP8) of MP4 (H264). Deze worden in de meeste browsers geladen, maar niet in alle. 

Je kunt het beste je videocontent converteren in WebM voordat je het gebruikt in je webdesign, maar je kunt ook een MP4 als alternatief bieden. Op die manier kan de MP4-versie worden geladen in het zeldzame geval dat WebM niet wordt ondersteund.

2. Video's optimaliseren met Clipchamp

De twee belangrijkste manieren om video's te optimaliseren voor je webdesign zijn compressie en conversie - en beide kun je gratis doen met Clipchamp Utilities!

Zoals eerder vermeld, zijn de beste manieren om video's te optimaliseren voor webdesign compressie en conversie, waardoor de laadtijd van pagina's aanzienlijk wordt verbeterd en de afspeelprestaties beter worden. 

Voordat je dit doet, hebben we nog een aanbeveling voor je: om de kwaliteit te behouden, kun je beter niet de resolutie en bitrate van je video's teveel verlagen, maar je hebt wel wat meer flexibiliteit als je video's ontwerpt die voornamelijk op de achtergrond van je website worden afgespeeld. Deze video's trekken niet de meeste aandacht en kunnen vaak op een kleiner scherm worden weergegeven omdat er zoveel op het internet gesurft wordt op mobiele telefoons. 

Geloopte HTML5-video's worden doorgaans weergegeven achter transparante lagen of tekstelementen en moeten snel worden geladen en afgespeeld op elk apparaat, ongeacht de internetverbinding. Een kleine bestandsgroote is dus belangrijker dan de resolutie. De eigen website van Clipchamp is trouwens een goed voorbeeld van hoe dit advies in elkaar steekt. En nu terug naar het optimaliseren van uw video's:

Je video's comprimeren voor HTML5

Zoals je misschien al geraden hebt, is onze gratis online videoconverter en videocompressor Clipchamp een goed hulpmiddel als je een klein videobestand van goede kwaliteit wilt maken.

Het is inmiddels een zeer populair middel onder webdesigners, webontwikkelaars, grafisch ontwerpers, en WordPress-, Wix- en Squarespace- ontwerpers. Ook wordt het ten zeerste aanbevolen als handige app door webdesign bloggers en platforms voor het bouwen van visuele websites zoals Webflow, in het bijzonder vanwege het comprimeren van achtergrondvideo's en bioscoopbeelden voor websites.

Clipchamp comprimeert en converteert video's lokaal in je browser voordat je ze naar je server, hostingprovider of website builder uploadt. Het is dus niet alleen handig zodra de video te zien is op je website, maar maakt ook de eerste upload een stuk sneller.

Voor gebruik op websites raden we aan video's te comprimeren tot minimaal 720p d.m.v. de medium of low-kwaliteitsinstelling in Clipchamp. Zowel de opties Web als Mobiel zijn mogelijk – de voorinstelling Mobiel produceert kleinere uitvoerbestanden dan Web, met een iets verminderde zichtbare kwaliteit.

Je video converteren voor compatibiliteit met de browser

Met Clipchamp Utilities kun je je video's gemakkelijk converteren om de browsercompatibiliteit te verbeteren. Upload je video, kies het gewenste formaat onder Instellingen personaliseren en de gratis converter van Clipchamp doet de rest:

Als je een backup MP4 voor je site wilt toevoegen, dan herhaal je dit proces maar kies je gewoon voor MP4.

Maak nu gratis video's met Clipchamp