Videokomprimierung

So optimierst du HTML5-Videos für deine Website

Zuletzt aktualisiert: 15. Oktober 2019

Online-Videos dominieren nach wie vor das Internet und sind mittlerweile zu einem häufig eingesetzten Element im Webdesign geworden. 

Videos wecken die Aufmerksamkeit und die Phantasie, so dass es kein Wunder ist, dass sie in viele Homepages eingebettet sind, um die Blicke der Benutzer auf sich zu ziehen. Fast alle Webbrowser unterstützen jetzt HTML5-Video, so dass es der perfekte Zeitpunkt ist, um deiner Website einen Hintergrund oder ein Headervideo hinzuzufügen.

Clipchamp hat einige großartige Vorlagen, die perfekt für dein Website-Design passen könnten, wie dieses wunderschöne Cinemagramm:

Diese Vorlage verwenden

Es gibt viele Gründe, warum du deiner Website HTML5-Videos hinzufügen solltest, aber lege nicht gleich einfach so damit los. Es gibt ein paar Probleme, die auftreten können, und du musst deine Videos optimieren, um eine reibungslose Leistung zu gewährleisten. Und das werden wir hier behandeln:

  1. Warum du Videos für Ihre Website optimieren musst

    • Langsame Websites verlieren Kunden

    • Videoformate sind nicht alle gleich erstellt

  2. Wie du deine Videos mit Clipchamp optimieren kannst

    • Komprimiere deine Videos für HTML5

    • Konvertiere dein Video aus Gründen der Browser-Kompatibilität

1. Warum du Videos für Ihre Website optimieren musst

Die Vorteile von HTML5-Video sind nicht ohne Preis. Eingebettete Videoinhalte, die automatisch abgespielt werden, können dazu führen, dass Seiten langsam geladen werden, was ein großer Traffic-Killer ist. Du kannst auch auf Probleme stoßen, wenn deine Videos nicht mit den Browsern kompatibel sind, die deine Kunden verwenden.

Langsame Websites verlieren Kunden

Wenn dein HTML5-Video zu groß ist, kann es deine Website erheblich verlangsamen. Dies kann zu einem unangenehmen Erlebnis für die Benutzer führen, wenn sie deine Videos beim Laden der Website anhalten und zwischenspeichern. 

So kann ein angeblich schönes Designmerkmal, das den Gesamteindruck einer Website verbessern soll, für die Besucher zu einem Ärgernis werden, wenn sie warten müssen, bis alle Elemente korrekt geladen und angezeigt werden.

Desktop and mobile user waiting for video to load

Selbst wenn du eine großartige SEO und fantastische Angebote hast, die Menschen auf deine Website bringen, kann eine schlechte Benutzererfahrung alles zunichte machen. Nicht nur, dass die Leute von deiner Website wegklicken, sondern auch Google wird das bemerken. Ladezeiten und Klickraten sind wichtige Faktoren, die das Google-Ranking deiner Seite beeinflussen. Stelle also sicher, dass du Videos für deine Website komprimierst.

Videoformate sind nicht alle gleich erstellt

Das beste HTML5-Video der Welt wird dir nicht helfen, wenn es im Browser der Leute nicht geladen wird. Nicht alle Videoformate werden in allen Browsertypen geladen, daher musst du deine Videos konvertieren, um den unangenehmen Moment zu vermeiden, in dem der auffällige Videoinhalt nicht geladen wird. Dies ist wichtig, um sicherzustellen, dass Videos von so vielen Browsern wie möglich auf so vielen Geräten wie möglich akzeptiert werden. 

Leider gibt es kein einziges Format, das alles beherrscht, aber deine beste Wahl ist entweder WebM (VP8) oder MP4 (H264). Diese werden in den meisten Browsern geladen, aber nicht allen. 

Tatsächlich ist es das Beste, deine Videoinhalte in WebM zu konvertieren, bevor du sie in deinem Website-Design verwendest, aber auch eine MP4-Alternative anzubieten. Auf diese Weise wird in dem seltenen Fall, dass WebM nicht unterstützt wird, stattdessen die MP4-Version geladen.

2. Wie du deine Videos mit Clipchamp optimieren kannst

Die beiden wichtigsten Möglichkeiten, Videos für dein Webdesign zu optimieren, sind Komprimierung und Konvertierung – und beides kannst du mit Clipchamp Utilities kostenlos durchführen!

Wie bereits erwähnt, sind die besten Möglichkeiten, Videos für das Webdesign zu optimieren, die Komprimierung und Konvertierung, was dazu beitragen wird, die Seitenladezeiten und die Wiedergabeleistung drastisch zu verbessern. 

Aber vorher haben wir eine Empfehlung: Um die Qualität zu erhalten, schlagen wir normalerweise nicht vor, die Auflösung und Bitrate deiner Videos zu stark zu reduzieren, aber du kannst etwas mehr Flexibilität erhalten, wenn du Videos entwirfst, die hauptsächlich im Hintergrund deiner Website abgespielt werden. Diese Videos stehen nicht nur im Mittelpunkt der Aufmerksamkeit, sondern können auch oft auf kleineren Bildschirmen angezeigt werden, da heutzutage auch sehr viel über Mobiltelefone gesurft wird. 

Looped 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 kleine Dateigröße wichtiger als die Auflösung. Die eigene Website von Clipchamp ist eigentlich ein praktisches Beispiel für diesen Rat. Nun zurück zur Optimierung deiner Videos:

Komprimiere deine Videos für HTML5

Wie du vielleicht schon erraten hast, ist unser kostenloser Online-Videokonverter und Videokompressor Clipchamp ein gutes Hilfsmittel, wenn es darum geht, eine kleine Videodatei in guter Qualität zu erstellen.

Er ist bereits bei Webdesignern, Webentwicklern, Grafikern, WordPress, Wix- und Squarespace-Designern beliebt. Er wurde von Webdesign-Bloggern und visuellen Website-Bauplattformen wie Webflow auch als nützliche App speziell für die Komprimierung von Hintergrundvideos und Cinemagrammen für Websites  empfohlen.

Clipchamp enterprise users

Clipchamp komprimiert und konvertiert Videos lokal in deinem Browser, bevor du sie auf deinen Server, Hosting-Provider oder Website-Builder hochlädst. Es ist also nicht nur nützlich, wenn das Video auf der Website verfügbar ist, sondern macht auch den ersten Upload schneller.

Für die Verwendung auf Websites empfehlen wir generell, Videos auf mindestens 720p zu komprimieren, entweder mit der mittleren oder niedrigen Qualitätseinstellung in Clipchamp. Sowohl die Ausgabe-Optionen Web als auch Mobile sind möglich – die Voreinstellung Mobile erzeugt kleinere Ausgabedateien als Web bei leicht reduzierter sichtbarer Qualität.

Optimize your video for web

Konvertiere dein Video aus Gründen der Browser-Kompatibilität

Mit den Clipchamp Utilities kannst du dein Video ganz einfach konvertieren, um die Browser-Kompatibilität zu erhöhen. Lade einfach dein Video hoch, wähle das gewünschte Format unter Individuelle Einstellungen und der kostenlose Konverter von Clipchamp erledigt den Rest:

Select WebM

Wenn du ein Backup-MP4 für deine Website hinzufügen möchtest, wiederhole einfach den Vorgang, wähle aber stattdessen MP4.

More from the Clipchamp blog

Erstelle kostenlos Videos mit Clipchamp Create.