Social Media Agentur Blog » Social Media Agentur Wien, Linz, Zürich und München

Bilder und Videos sind von Websites nicht mehr wegzudenken. Von kleinen Icons über blaue Wolken im Hintergrund bis hin zu komplizierten Infografiken, mit einem Bild ist (fast) alles möglich. Multimediale Inhalte können auf verschiedenste Arten im Web verwendet werden, wobei jede ihre eigenen Spezialgebiete und Eigenheiten hat.

Bilder

Im Web werden hauptsächlich vier verschiedene Formate verwendet: JPEG, PNG, GIF und SVG.

Generell werden diese Formate in verlustbehaftet (lossy) und verlustfrei (lossless) unterteilt. Damit ist gemeint, wie ein Bild komprimiert und gespeichert wird.

Verlustbehaftete Kompression: die Qualität des Bildes nimmt beim Speichern ab. Die Stärke der Kompression wirkt sich sowohl auf die Qualität des Bildes als auch auf die Dateigröße aus, wobei stärker komprimierte Bilder in der Regel kleiner sind.
Verlustfreie Kompression: kein Qualitätsverlust. Diese Speicherart ist vor allem dann sinnvoll, wenn ein Bild noch öfter gespeichert oder auch bearbeitet werden soll, da keine Daten verloren gehen. Dadurch sind die Dateien in der Regel aber größer.

JPEG / JPG

lossy Kompression, meist mit auswählbarer Stärke
kleinere Bilder möglich & schnellere Ladezeiten
überall unterstützt
keine Transparenz

Durch ihre gute Browserunterstützung und die spezielle Kompression eignen sich JPEGs für unterschiedlichste Aufgaben, da sie die Geschwindigkeit der Website durch geringere Dateigrößen nicht unnötig verlangsamen.

Generell eignen sich JPEGs vor allem für vielfarbige Bilder ohne Transparenz, wie zum Beispiel Fotos. Weniger geeignet sind sie für Bilder, die zum Beispiel sehr feine Linien enthalten, da diese durch die Kompression verschwinden können.

jpg

GIF

lossless
max. 256 Farben
überall unterstützt
Animationen möglich

Mit GIFs ist es möglich, kleine Animationen auf einer Website zu verwenden. Sie unterstützen transparente Bilder, können aber nur maximal 256 verschiedene Farben enthalten. Durch die Einschränkung der Farben sind GIFs weniger für komplexe Fotos geeignet. Hauptsächlich werden GIFs für Animationen, Icons oder CTAs verwendet, welche mit wenigen Farben auskommen.

PNG

lossless
größere Bilder
überall unterstützt
Transparenz möglich
Animationen eingeschränkt möglich

PNG wurde als Nachfolger von GIF entwickelt, wodurch es ähnliche Eigenschaften besitzt. Der größte Unterschied ist, dass PNGs mehr verschiedene Farben enthalten können als ein Standard-GIF. Animationen können durch die Erweiterung APNG erzeugt werden. Diese verhalten sich ähnlich wie GIFs gepaart mit den Vorteilen eines PNGs, werden allerdings nicht in allen Browsern unterstützt.

PNGs eignen sich speziell dann, wenn Bilder noch bearbeitet oder mehrmals gespeichert werden sollen, da durch neuerliches Speichern keine Bildinformationen verloren gehen. Im Web können sie zum Beispiel für vielfarbige, transparente Bilder verwendet werden, oder in Bereichen, in denen die Bildqualität wichtiger als die Dateigröße ist.

SVG

lossless
Skalierbar ohne Qualitätsverlust
Standardfunktion überall unterstützt
Animationen
Transparenz
nicht für Fotos

SVGs sind Vektorbilder, die sich von den vorherigen Formaten dadurch unterscheiden, dass die Bildinformationen nicht als fixe Pixelwerte gespeichert, sondern durch mathematische Funktionen beschrieben werden. Dadurch kann ein SVG beliebig skaliert werden, ohne dabei einen Qualitätsverlust des Bildes befürchten zu müssen.

SVGs eignen sich wie GIFs besonders für kleine Animationen, Icons oder CTAs. Da bei diesem Format der Bildinhalt nicht Pixel für Pixel gespeichert wird, eignet es sich nur bedingt für Fotos.

WEBP

kleine Bilder
nicht überall unterstützt
lossy/lossless
Transparenz
Animationen

WEBP wurde von Google entwickelt und zielt speziell darauf ab, die Vorteile von PNG, GIF und JPEG zu kombinieren. Bilder im WEBP-Format können sowohl lossy als auch lossless komprimiert werden sowie Transparenzen und Animationen enthalten, wodurch sie für nahezu alle Bildarten und Anwendungsfälle verwendbar sind. Der größte Nachteil ist die unvollständige Browserunterstützung.

Videos

Videos auf Webseiten werden im Großen und Ganzen auf zwei Arten eingebunden:

über eine Drittplattform wie zum Beispiel YouTube, Facebook oder Vimeo,
oder direkt auf der Website mit dem HTML5 <video> Element.

Wird das Video direkt auf der Website eingebunden, empfiehlt es sich, mehrere Versionen eines Videos in unterschiedlichen Formaten anzugeben, um möglichst viele Browser und Geräte abzudecken.

Spricht man bei einem Video von unterschiedlichen Formaten, ist damit für gewöhnlich die Kombination zweier Begriffe gemeint: Container und Codec.

Container

Der Container wird häufig als "das Video-Format" bezeichnet, da er unter anderem die Dateiendung eines Videos festlegt. In einem Container sind für gewöhnlich mehrere Tracks enthalten, zum Beispiel jeweils einen für Video und Audio. Der Container selbst legt dabei fest, wie diese Tracks gemeinsam in einer einzelnen Datei gespeichert werden können.

Codec

Der Codec definiert unter anderem wie ein Track komprimiert, gespeichert und im Anschluss wieder gelesen wird. Wie auch bei Bildern gibt es hier sowohl lossy als auch lossless Varianten, wobei letztere sehr große Datenmengen erzeugen und darum weniger für den Gebrauch im Web geeignet sind.

Sowohl für Container als auch Codec gibt es unterschiedlichste Varianten, spezialisiert auf die unterschiedlichen Verwendungsmöglichkeiten. Für den Gebrauch auf Websites werden die drei folgenden Formate am häufigsten verwendet: