Videokomprimierung

So optimierst du HTML5-Videos für deine Website

Clipchamp ist ein kostenloser Online-Video-EditorKostenlos testen
Diesen Post teilen

Letzte Aktualisierung: 15. Oktober 2019

Onlinevideos dominieren weiterhin das Internet und sind mittlerweile zu einem gängigen Element im Webdesign geworden. 

Mit Videos gewinnt man die Aufmerksamkeit von Besuchern und sie regen die Fantasie an. Es ist also kein Wunder, dass sie in viele Homepages eingebettet werden, um den Blick des Nutzers auf sich zu ziehen. Fast alle Webbrowser unterstützen jetzt HTML5-Videos. Es ist also der perfekte Zeitpunkt, um deiner Website ein Hintergrund- oder Header-Video hinzuzufügen.

Bei Clipchamp findest du etliche tolle, auf dein Website-Design abgestimmte Vorlagen, wie z. B. dieses wunderschöne Cinemagramm:

Diese Vorlage verwenden

Es gibt viele Gründe, einer Website HTML5-Videos hinzuzufügen, aber man sollte dabei nichts überstürzen. Es können nämlich ein paar Probleme auftreten und du solltest deine Videos unbedingt optimieren, damit die Performance deiner Website nicht darunter leidet. Wir werden die folgenden Themen behandeln:

  1. Gründe für die Optimierung der Videos für deine Website

    • Langsame Websites verlieren Kunden

    • Nicht alle Videoformate sind gleich

  2. Optimierung von Videos mit Clipchamp

    • Videos für HTML5 komprimieren

    • Videos für Browserkompatibilität komprimieren

1. Gründe für die Optimierung der Videos für deine Website

Die Vorteile von HTML5-Videos haben ihren Preis. Eingebettete Videoinhalte, die automatisch abgespielt werden, können ein langsames Laden von Seiten zur Folge haben, was ein großer Traffic-Killer ist. Problematisch sind auch Videos, die nicht mit den Browsern deiner Kunden kompatibel sind.

Langsame Websites verlieren Kunden

Ein zu großes HTML5-Video kann deine Website erheblich verlangsamen. Wenn dein Video beim Laden der Seite pausiert und puffert, kann dies zu einem unangenehmen Benutzererlebnis führen. 

Ein eigentlich ansprechendes Designfeature, das zum Gesamteindruck einer Website beiträgt, kann dadurch für Besucher zu einem Ärgernis werden, wenn sie erst warten müssen, bis alle Elemente vollständig geladen sind und korrekt angezeigt werden.

Selbst wenn du über eine ausgezeichnete SEO und fantastische Angebote verfügst, über die potenzielle Kunden auf deine Website stoßen, kann eine schlechte Benutzererfahrung alles zunichte machen. Die Leute werden nicht nur deine Website schnell wieder verlassen, sondern auch Google wird das bemerken. Seitenladezeiten und Click-Through-Rates sind beides wichtige Faktoren, die sich auf das Google-Ranking deiner Seite auswirken. Du solltest deine Videos also unbedingt komprimieren, bevor du sie auf deine Website hochlädst.

Wenn sich deine Videoinhalte in der Cloud befinden, musst du sicherstellen, dass dein Cloud-Hosting-Anbieter schnelle Lade- und Betriebszeiten garantiert. Nur dann kannst du deinen Website-Besuchern ein ununterbrochenes Videoerlebnis bieten.

Kostenlos loslegen

Immer kostenlos. Oder nimm für nur 9 $/Monat ein Upgrade vor.

Nicht alle Videoformate sind gleich

Das beste HTML5-Video der Welt hilft dir nicht, wenn es nicht in den Browsern deiner Besucher geladen wird. Nicht alle Videoformate werden in allen Browsern geladen, daher musst du deine Videos konvertieren, um zu vermeiden, dass deine wertvollen Videoinhalte nicht geladen werden. Das Konvertieren ist wichtig, damit sich deine Videos von möglichst vielen Browsern auf möglichst vielen Geräten abspielen lassen. 

Leider gibt es kein allgemein gültiges Format, aber die beste Wahl ist entweder WebM (VP8) oder MP4 (H264). Diese Formate werden in den meisten Browsern geladen, aber nicht in allen. 

Am besten konvertierst du deine Video-Inhalte zu WebM, bevor du sie in deinem Website-Design verwendest, aber stelle auch eine MP4-Alternative bereit. Somit wird für den seltenen Fall, dass WebM nicht unterstützt wird, die MP4-Version geladen.

2. Optimierung von Videos mit Clipchamp

Die beiden wichtigsten Möglichkeiten zur Optimierung von Videos für dein Webdesign sind die Komprimierung und die Konvertierung – und beides lässt sich gratis mit Clipchamp Utilities erreichen!

Wie bereits erwähnt, lassen sich durch Komprimierung und Konvertierung die Seitenladezeiten und die Wiedergabeleistung drastisch verbessern. 

Aber vorher haben wir noch einen Tipp: Wir empfehlen, die Auflösung und Bitrate deiner Videos nicht zu stark zu reduzieren, um die Qualität zu erhalten. Du bist jedoch etwas flexibler, wenn die Videos hauptsächlich für die Wiedergabe im Hintergrund deiner Website konzipiert sind. Diese Videos stehen nicht so sehr im Mittelpunkt und können oft auf kleineren Bildschirmen angezeigt werden, da das Surfen hauptsächlich auf Mobiltelefonen geschieht. 

In Schleifen abgespielte HTML5-Videos werden in der Regel hinter transparenten Ebenen oder Textelementen angezeigt und müssen auf jedem Gerät unabhängig von der Internetverbindung schnell geladen und abgespielt werden. Daher ist eine kleinere Dateigröße wichtiger als eine gute Auflösung. Die Website von Clipchamp selbst ist ein Paradebeispiel für die Umsetzung dieses Ratschlags. Nun zurück zum Optimieren deiner Videos:

Videos für HTML5 komprimieren

Wie du vielleicht schon vermutest, ist der kostenlose Online-Video-Konverter und Videokompressor von Clipchamp ein hervorragendes Tool, wenn es um die Erstellung von kleinen Videodateien in guter Qualität geht.

Das Tool ist bereits bei Webdesignern, Webentwicklern, Grafikdesignern sowie Nutzern von WordPress, Wix und Squarespace beliebt. Es wurde auch von Webdesign-Bloggern und visuellen Plattformen zur Erstellung von Websites wie Webflow speziell für den Zweck der Komprimierung von Hintergrundvideos und Cinemagrammen für Websites als nützliche App empfohlen.

Clipchamp komprimiert und konvertiert Videos lokal in deinem Browser, bevor du sie auf deinen Server, zu deinem Hosting-Anbieter oder bei deinem Website-Builder hochlädst. Es ist also nicht nur nützlich, sobald das Video auf die Website hochgeladen ist, sondern beschleunigt auch das erstmalige Hochladen.

Wir empfehlen für den Einsatz auf Websites im Allgemeinen die Komprimierung von Videos auf mindestens 720p, entweder unter Verwendung der mittleren oder niedrigen Qualitätseinstellung in Clipchamp. Sowohl die Web- und Mobil-Ausgabeoptionen sind möglich – die Mobil-Voreinstellung resultiert in kleineren Output-Dateien als die Web-Einstellung bei einer leicht reduzierten sichtbaren Qualität.

Videos für Browserkompatibilität komprimieren

Mit Clipchamp Utilities kannst du ganz leicht dein Videomaterial konvertieren, um die Browserkompatibilität zu erhöhen. Du musst dafür einfach nur das Video hochladen, das gewünschte Format unter Einstellungen anpassen wählen und der kostenlose Konverter von Clipchamp erledigt den Rest:

Wenn du deiner Website ein Backup im MP4-Format hinzufügen möchtest, wiederhole einfach den Vorgang und wähle dabei stattdessen MP4.

Erstelle kostenlos Videos mit Clipchamp Create.