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 Unternehmens-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.

Desktop and mobile user waiting for video to load

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. Einige Cloud-Hosting-Anbieter bieten kostenlose Testversionen ihrer Dienste an.

In-Browser- Video -Editor.

Immer kostenlos. Professionelle Videos in wenigen Minuten.

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 die Seitenladezeiten und die Wiedergabeleistung drastisch verbessern, wenn Videos auf das Webdesign optimiert werden. 

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 enterprise users

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.

Optimize your video for web

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:

Select WebM

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

Mehr aus dem Clipchamp-Blog

Videos von Deinem Telefon zu Clipchamp übertragen

November 2, 2020
Einige unserer Benutzer haben uns gefragt, wie sie Videos konvertieren oder komprimieren…

Wie Videos die Konversionsraten für E-Commerce steigern

June 3, 2020
**** aktualisiert am 28. Mai 2020 **** Unabhängig davon, ob Du für ein kleines Unternehmen…

So bettet man Video in Word-Versionen 2007 bis 2016 ein

March 3, 2020
Ganz gleich, ob Du Präsentationen fürs Büro aufwerten möchtest oder ein Student bist…

Jetzt kostenlos Videos mit Clipchamp erstellen