Video für Webseiten II: Bitrate und Auflösung

Auflösung der Monitore

Heute kommt das Video in immer höherer Auflösung aus der Kamera des Handys uns selbst mit 4K aus der Systemkamera. Für viele Geräte und Internet-Verbindungen ist das eine zu große Datenmenge – vor allem, wenn wir an die mobilen Geräte denken und ihr eingeschränktes Datenvolumen denken.

Die Monitore, auf denen wir Videos im Internet ansehen, haben unterschiedliche Auflösungen. Dabei bringen selbst Smartphones heute Full-HD-Auflösung mit. Jeder Blick auf die Verteilung von Monitorgrößen ist nur ein Blick in die Glaskugel. Wir wollen eine ansehnliche und möglichst hohe Qualität für alle Besucher, die das Datenvolumen der mobilen Geräte nicht übermäßig beansprucht.

Die optimale Auflösung für Video im Internet gibt es auch ebensowenig wie das beste Video-Format.

Höhe des Videos

Die Angaben in der dritten Zeile (575p, 720p, 1080p) geben die Höhe des Videos an.

Ab und zu sehen wir diese Bezeichnung mit einem i statt einem p: Das "i" steht für Interlaced. Das war das Zeilensprungverfahren des alten Röhrenfernsehers und ist heute nicht mehr relevant.

Monitore einschätzen

Beim digitalen Fernsehn wird schon mal mit der Auflösung geschummelt, um die Videodaten ohne Ruckeln und Aussetzer mit kleinen Datenraten über die Bühne zu kriegen. Dann wird nicht die HD-Auflösung von 1280x720 Pixeln geliefert, sondern das Video wird klein gerechnet und dann auf dem Monitor wieder vergrößert. Das bringt zwar ein unschärferes Bild, aber wer merkt das schon?

Die Frage, wieviele Pixel nun optimal sind, hängt genauso wie bei Fotografien auch vom Betrachtungsabstand ab. Auf dem Handy und auf dem Tablett sehen wir Videos mit einem Abstand von ca. 40 cm, auf dem Desktop-Monitor mit 40 bis 50 cm, im Meetingraum auf dem großen Monitor mit einem Abstand von ein paar Metern.

Runterrechnen und sparen | Videos in Full HD sollten für das Abspielen auf Webseiten heruntergerechnet werden.

• Full-HD für den Desktop-Monitor ist seit vielen Jahren kein Hindernis mehr, sondern eher eine Frage des Besucherspektrums. Das HTML-Video-Tag kann neben der Full-HD-Version eine HD-Version für mobile Geräte mitliefern. Der Browser entscheidet, welches Video ausgeliefert wird.

• Auf dem Desktop-Monitor bringt eine Auflösung von 1280 x 720 Pixeln (das ist HD-Video) eine große Ersparnis für die Bandbreite des Videos und bereits eine sehr gute Qualität.
• Beim mobilen Geräten spart die SD-Auflösung von 1024×576 und bringt immer noch eine vernünftige Qualität.
• Im Sitzungsraum mit dem großen Monitor sitzen wir in einigen Metern Abstand. Full-HD oder 720p wären auch hier die Varianten der Wahl.

Ob ein Video in dieser Auflösung ruckelfrei im Internet ohne große Verzögerung abgespielt werden kann, ist allerdings eine offene Frage, die stark vom System des Betrachters abhängt, von der Art des Bildmaterials und bei mobilen Geräten natürlich von der Anbindung.

Datenrate oder Bitrate

Die Datenrate ist eine der wichtigsten Stellschrauben für Video im Internet und ist sowohl für die Qualität als auch für die Dateigröße verantwortlich. Im Allgemeinen gilt: Je höher die Datenrate, desto besser ist die Qualität und desto größer wird die Datei.

Wie groß der Film in Hinsicht auf die Dateigröße ist, ist im Grunde genommen uninteressant, denn das Video muss nicht komplett zum Betrachter geliefert werden, bevor es abgespielt werden kann. Video wird in kleinen Häppchen zum Besucher transportiert und kann bereits anlaufen, während es noch übertragen wird.

Nicht vergessen dürfen wir allerdings, dass das Datenvolumen für mobile Geräte bei den meisten Verträgen auf 0.5 bis 1 GB beschränkt ist. Danach kann der Benutzer zwar immer noch surfen, aber die Geschwindigkeit wird beschränkt.

Wenn das Programm für die Videobearbeitung die Option bietet, wählt man eine variable Bitrate:

Datenrate und Bandbreite

Das digitale Fernsehn gönnt uns eine Datenrate von 12 Mbit/s. Allerdings nutzen die Sender diese Bandbreite meist für vier Kanäle …

ups. Da bleiben nur rund 2,5 bis 3,5 Mbit/s pro Kanal. Da wird noch ein wenig geschoben, denn die Sendung »Der Tierdoktor kommt« enthält vielleicht nur wenig Bewegung und kriegt nur 2,5 Mbit/s, aber Fußball hat schnelle Bilder und braucht eine höhere Bandbreite.

Beste Video-Qualität im Internet? | Das schaffen wir mit Videos im Internet (noch) nicht. Für Internet-Wählverbindungen ist die Datenrate begrenzt. So 2-5 MBit/s können wir dem Video heute gönnen, wenn wir davon ausgehen, dass heute fast alle eine schnelle DSL-Anbindung zur Verfügung haben. Einige Codecs (zuständig für die Kodierung / Dekodierung des Videos) erlauben eine Datenrate, die in einem Bereich von oben nach unten variieren darf (z.B. H.264).

Wie gut das Video im Internet aussieht, hängt jetzt davon ab, wie gut die Bandbreite zum Besucher ist und wie schnell die Videobilder sind.

Responsives Video

Auch wenn heute alle Browser MP4 abspielen und wir nicht mehr verschiedene Formate ausliefern müssen, macht es doch Sinn, verschiedene Auflösungen je nach Größe des Viewports zu bieten.

Das source-Tag des Video-Tags unterstützt Media Queries mit der Abfrage nach der Größe des Viewports – sowohl im video-Tag als auch im picture-Tag.

<video controls> 
   <source src="video-large.mp4" type="video/mp4" media="all and (min-width:680px)"> 
   <source src="video-small.mp4" type="video/mp4" media="all and (min-width:320px)">  
</video>

Seitenverhältnis (Aspect Ratio) des Videos

Video im Internet kann ein beliebiges Seitenverhältnis benutzt. Moderne Computer-Monitore haben meist ein Seitenverhältnis 16:9, das Retina-Display des iPads zeigt 2048 x 1536 Pixeln bei 264 ppi, also ein Seitenverhältnis 4:3. Ein iPhone 6s bis 8Plus mit Widescreen hat eine Auflösung von 1920 x 1080 Pixeln bei 401 ppi.

Wenn ein bestimmtes Seitenverhältnis gewünscht wird, die das Eingangsmaterial nicht aufweist, muss das Video mit einer Letterbox gerendert werden oder muss beschnitten werden.