Hintergrundvideos auf Webseiten eignen sich sehr gut dazu, die Aufmerksamkeit von Seitenbesuchern zu lenken.

Es ist daher nicht verwunderlich, dass Videos im Laufe der letzten Jahre als Background-Design-Feature immer beliebter wurden und es weiterhin sind. Die immer mehr zum Standard werdende Unterstützung für HTML5-Videos in allen modernen Browsern ist dabei eine große Hilfe.

Zu den am häufigsten gestellten Fragen, die wir online über die Optimierung von Videos für Webdesign erhalten haben, gehören zwei häufige Probleme, die beim Erstellen und Implementieren von Hintergrundvideos in Projekten auftreten können.

 

1) Komprimierung von Videos für die Verwendung auf Webseiten

Das erste Problem bezieht sich auf Dateien die aus Schnitt- und Authoring-Anwendungen heraus exportiert werden. Diese Videos sind häufig sehr groß, was auf Webseiten dazu führt, dass sie lange gepuffert werden, bevor sie ruckelfrei abgespielt werden können. Zudem laden Seiten mit großen Videodateien sehr lange, insbesondere bei langsameren Internetverbindungen und begrenzter Bandbreite.

Was also ein nettes Design-Feature sein sollte, das zum Gesamteindruck einer Webseite beiträgt, kann für Seitenbesucher schnell zu einem Ärgernis werden, wenn sie darauf warten müssen, dass alle Elemente korrekt geladen und angezeigt werden.

 

compress-web-design

 

Zu große Videos sind nicht nur schlecht für die Ladezeiten der gesamten Seite und bieten eine negative Nutzererfahrung wenn sie noch nicht im Browser gecached sind. Sie können auch die SEO-Faktoren ihrer Webseite negativ beeinflussen, da die Seitenladezeit ein wichtiger Punkt ist, den Google und andere Suchmaschinen berücksichtigen. Daher ist das Komprimieren von Videos vor der Verwendung eine gute Idee.

2) Konvertierung von Videos für HTML5

Zweitens sind Videos, die sie von Kollegen erhalten oder in Videoschnitt-Suites erstellen, häufig in einem Format, das Runtime-Probleme verursachen kann, da die meisten Browser (Chrome, Firefox, Edge, Opera, Internet Explorer, Safari usw.) zwar einige Video-Formate, Video-Codecs und (falls sich eine Tonspur im Container befindet) Audio-Codecs ohne zusätzliche Plugins erkennen können, aber eben nicht alle.

MP4 und WebM sind derzeit die gängigsten Videoformate für die Internetnutzung. Aufgrund möglicher Lizenzprobleme mit MP4 ist es allerdings empfehlenswert, Videos in WebM zu konvertieren (VP8), bevor man sie auf Webseiten verwendet. Optional kann man dabei auch eine MP4 (H264)-Variante als Alternative für Browser bereitstellen, die WebM nicht unterstützen.

Dies ist wichtig, um sicherzustellen, dass Videos von möglichst vielen Browsern auf so vielen Telefonen, Desktop-PCs, Laptops und Betriebssystem-Combos wie möglich akzeptiert werden. Leider gibt es bis heute keine einzige Format/Video-Codec/Audio-Codec-Kombination, die überall funktioniert.

Videos für Webdesign optimieren

Somit sollte wie bereits erwähnt die Dateigröße von Videos, die für Webprojekte optimiert sind, so klein wie möglich sein, wodurch Seitenladezeiten und Wiedergabe-Performance drastisch verbessert werden.

Die Reduzierung von Videoauflösung und Bildqualität (Komprimierungsstufe und Bitrate) bieten hier Optimierungspotential. Ein weiterer Aspekt ist die Auswahl eines weithin anerkannten Videoformats.

Wir empfehlen normalerweise nicht, die Auflösung und Bitrate von Videos zu stark zu reduzieren, da diese beiden Faktoren für die Bildqualität eines Videos wichtig sind. Dies ist jedoch weniger der Fall, wenn es um schnell-ladende Hintergrundvideos auf Webseiten geht, da sich Seitenbesucher häufig nicht auf diese Clips konzentrieren und Performance Vorrang hat.

Meist werden geloopte HTML5-Videos hinter transparenten Ebenen und/oder Textelementen angezeigt und sind ein unterstützendes Designelement, das auf jedem Gerät, auf dem ihre Webseite geöffnet wird, schnell geladen und abgespielt werden können sollte.

Somit ist eine kleine Dateigröße in gewissem Maße wichtiger als die Auflösung, die Bitrate und Ansichtsqualität. 

Um kleine Videodateien in guter Qualität zu erstellen bietet sich unser kostenloser Online-Video-Konverter und Videokompressor Clipchamp an.

Er wird bereits von vielen Webdesignern, Webentwicklern, Grafikdesignern, WordPress-, Wix– und Squarespace-Seitenbetreibern genutzt und wird häufig als nützliche App von Web-Design-Bloggern und Visual-Website-Baukästen wie Webflow speziell zum Zweck der Komprimierung von Hintergrundvideos und Cinemagraphen* empfohlen.

compress-video-web-design

 

Clipchamp komprimiert und konvertiert Videos lokal im Browser (am schnellsten in Chrome), bevor die Dateien auf ihren eigenen Server, zu einem Hosting-Provider oder Website-Builder hochgeladen werden. Das Tool beschleunigt somit auch das erstmalige Hochladen von Videos.

Für die Verwendung auf Webseiten empfehlen wir generell, Videos mit der mittleren oder niedrigen Qualitätseinstellung in Clipchamp auf mindestens 720p zu komprimieren. Sowohl die Web– als auch die Mobile-Ausgabeoptionen sind möglich – die Voreinstellung „Mobile“ erzeugt kleinere Ausgabedateien als Web, mit einer geringfügig reduzierten Bildqualität.

Zusammengefasst sind die besten Einstellungen für Hintergrundvideos entweder Web, 720p, mittlere Qualität, MP4 oder WebM oder Mobile, 720p, mittlere Qualität, MP4. Abhängig von ihrer Ausgangsdatei und der Qualität sowie der Dateigröße der Ausgabevideos, die Clipchamp in ihrem Fall erstellt, sollten sie eine Kombination verschiedener Einstellungen ausprobieren, um ein für sie zufriedenstellendes Ergebnis zu erzielen.

 

HTML5-background-video

 

Es kann verlockend sein, qualitativ hochwertige Videos mit 1080p oder mehr zu verwenden, wir raten allerdings davon ab, da die durchschnittliche Zeit, die Besucher auf einer Webseite verbringen, weniger als 15 Sekunden beträgt. In diesen ersten entscheidenden Sekunden muss der Eindruck stimmen und die Seite schnell laden – unser Online-Video-Konverter kann ihnen dabei helfen, das zu erreichen.

 

* Sie fragen sich vielleicht, was Cinemagraphen sind? In diesem Subreddit finden sie ein paar wunderschöne Beispiele.