kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Übersicht der Bild- & Grafikformate im Web

Attraktive visuelle Inhalte können für den Erfolg einer Website sehr wichtig sein. Die verschiedenen Grafikformate, die in Websites verwendet werden können, unterscheiden sich in erster Linie in der Art der Kompression und in ihrem Funktionsumfang. Wenn ihr also das passende Dateiformat wählt, erreicht ihr die beste visuelle Qualität, bei gleichzeitig kleinster Dateigröße.

Workshops & Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug.

Online-Schulungen (remote per Video)

Inhouse-Schulungen

Warum es wichtig ist, das richtige Format zu wählen

Bei Bildern und Grafiken könnt ihr grundsätzlich zwischen pixelbasierten und vektorbasierten Grafiken unterscheiden. Vektorbasierte Grafikformate eignen sich besser für eine grafische, flächigere Anmutung. Fotos und detaillierte Abbildungen lassen sich besser mit Pixelgrafiken abbilden.

Im Bereich der Pixelgrafiken unterscheiden sich die Dateiformate u.a. in der Art, wie sie mit Farben und Kompression umgehen. Einige Formate unterstützen z. B. deutlich mehr Farben als andere, erlauben Animationen oder eine einstellbare Kompression. Eine praktische Hilfestellung welches Format sich für welches Motiv am besten eignet findet ihr hier.

Browser-Kompatibilität

Einige Grafikformate gibt es seit langer Zeit – hier kann von einem flächendeckenden Browser-Support ausgegangen werden. Das betrifft u. a. die Formate JPG, GIF, PNG aber auch SVG. Neuere Formate wie WebP sind auch 2021 noch nicht in allen Browsern vollumfänglich unterstützt. Hier müssen mit Responsive Images und dem <picture>-Element Alternativen angeboten werden. Noch schlechter ist der Browser-Support für AVIF, das Dateiformat, dass WebP in Zukunft ersetzen soll. Anfang 2021 ist der Support noch sehr fragmentiert.

SVG (Scalable Vector Graphics)

SVG ist ein XML-basiertes Vektorgrafikformat, das den Inhalt eines Bildes als eine Reihe von Zeichenbefehlen angibt. In SVG stehen u.a. Befehle zum Zeichnen von Formen, Linien, Farben, Filter usw. zur Verfügung.

Ein großer Vorteil ist die Möglichkeit zur Manipulation. Eine SVG kann z.B. in einem Vektor-Grafikprogramm wie Illustrator, XD, Figma oder Sketch erstellt werden. Anschließend könnt ihr die SVG in einem Code-Editor öffnen und mit Hilfe von JavaScript oder CSS Animationen und Effekte hizufügen.

SVG-Grafiken können ohne Qualitätsverlust vergrößert werden. Das Dateiformat bietet sich daher insbesondere für Icons, Diagramme und grafische Formen wie z.B. Logos an. Es ist zwar auch möglich, Pixelgrafiken (Bitmaps) in eine SVG aufzunehmen, dieses Vorgehen ist allerdings eher unüblich. SVG sollte im Web Design nicht dafür verwendet werden, Pixelgrafiken darzustellen.

Die Dateigröße von SVG kann bei simplen, geometrischen Formen sehr klein sein. Wenn die Form allerdings über viele Kurvenpunkte verfügt, steigt die Dateigröße erheblich an. Es kommt regelmäßig vor, dass SVG gegenüber anderen Bildformaten hinsichtlich der Dateigröße nicht die beste Wahl ist. Dennoch kann es sich aus anderen Gründen anbieten, trotzdem SVG einzusetzen. Beispielsweise, da ihr die Grafik in verschiedenen Farben einsetzen möchtet.

 

JPG/JPEG (Joint Photographic Expert Group)

JPEG ist ein solides Grafikformat zur Speicherung von Fotos und Grafiken mit vie­len Farben und Tonwerten. Das Dateiformat unterstützt 16,7 Millionen Farben, speichert Bilder jedoch immer verlustbehaftet ab. Beachtet vor allem, dass mehrmaliges Öffnen und Abspeichern derselben JPEG­ Datei (auch bei 100 % Qualität) immer ei­nen Qualitätsverlust zur Folge hat. 

Kompression

Beim Speichern einer Datei ins JPEG­-Format wird das JPEG ­Kompressionsverfahren angewandt. Hierbei wird das Bild in 8 x 8 Pixel große Bereiche unterteilt, und diese Bereiche werden dann auf sich wiederholende Strukturen überprüft. Je stärker der Kompressionsfaktor, desto stärker werden die Pixel in diesen Quadranten einander ange­glichen. Dies führt bei starker Kompression zu sogenannten JPEG­-Artefakten. Diese Ar­tefakte sind dann im Bild deutlich sichtbar. Der Vorteil des JPEG­-Formats ist jedoch die individuelle und auf Wunsch starke Verrin­gerung der Dateigröße.

Transparenz und Animationen

JPEG unterstützt weder Transparenzen noch die Möglichkeit, Animationen zu erstellen.

GIF (Graphics Interchange Format)

Beim Speichern einer Grafik im GIF­ Datei­format werden maximal 256 Farben in der sogenannten Indextabelle der Datei abgelegt. Ihr bemerkt das z. B., wenn Ihr eine GIF­ Datei in einem Programm wie Photoshop öffnet: Ihr werdet nur mit den in der Indextabelle vorhandenen Farben die Grafik bearbeiten können. Photo­shop informiert euch mit dem Zusatz »Indiziert« über diese Tatsache.

Sobald eine Grafik mehr als 256 Farben besitzt, wer­det ihr deutliche Qualitätseinbußen er­kennen können. Farbverläufe werden stufig dargestellt, und das Bild verliert an Tiefe.

Transparenz

GIF unterstützt eine Transparenzstufe. Dies bedeutet, dass ihr jede der maximal 256 Farben transparent setzen könnt. Da es sich jedoch nur um eine Transparenzstu­fe handelt, könnt ihr Farben nicht halb transparent darstellen, sondern lediglich festlegen, ob eine Farbe 100% sichtbar oder 100 % transparent ist. Die Transparenzfunktion von GIF eignet sich daher nur für Grafiken mit harten Übergän­gen von Transparenz zu Sichtbarkeit. Sobald der Übergang weich ist, werdet ihr eine unschöne Kontur oder »harte Abrisse« wahrnehmen.

Animationen

Mit GIF könnt ihr Animationen erstellen, die bekannten (und berüchtigten) GIF-Ani­mationen. Hierbei werden mehrere einzel­ne GIF ­Grafiken nacheinander abgespielt, ähnlich wie bei einem Daumenkino. Ihr könnt bestimmen, wie lange jedes einzel­ne Bild sichtbar bleibt und ob die Animation loopen, also sich wiederholen soll.

Kompression

GIF ermöglicht eine verlustfreie Kompression über das lizenzpflichtige LZW­ Kompressi­onsverfahren. Es stehen keine unterschiedlichen Kompressionsarten zur Verfügung, da die Farben immer in einer Indextabelle abgespeichert werden. Beach­tet jedoch, dass GIFs ohne Animation gegenüber PNG­8 ­Grafiken in der Regel keine Vorteile bieten.

PNG8 (Portable Network Graphics)

Das PNG­8­-Format ist vergleichbar mit GIF, da es ebenso maximal 256 Farben sowie eine Transparenzstufe in einer Farbindextabelle unterstützt. Animationen sind beim PNG-­Format jedoch nicht möglich.

Kompression

Die Kompression von PNG ist verlustfrei. Ihr habt daher keine Wahl einer Quali­tätsstufe, könnt jedoch die Anzahl der Farben verringern, um die Dateigröße zu beeinflussen. Das Verfahren beruht auf dem gleichen Kompressionsverfahren, das auch bei ZIP Anwendung findet. Hinzu kommen sogenannte Vorfilter, die die Dateigröße zu­sätzlich reduzieren. PNG komprimiert deut­lich besser als GIF.

Transparenz

Wie bei GIF könnt ihr einzelne Farben der Indextabelle transparent setzen. Diese Far­be ist dann jedoch vollständig unsichtbar, eine semitransparente Färbung ist auch hier nicht möglich. Durch den ähnlichen Umfang an Funktionen ergeben sich hier vergleichbare Probleme wie beim Einsatz von GIF­-Grafiken. Weiche Übergänge von Opazität zu Transparenz sollten vermieden werden, da dies zu unschöner und pixeliger Kantenbildung führt.

PNG24

Das PNG­24­-Format bietet gegenüber den Grafikformaten GIF und PNG8 teils deutliche Vor­teile. PNG­24 unterstützt 16,7 Millionen Farben und eignet sich daher für alle Bilder und Fotos. Der große Vorteil gegenüber den anderen Webgrafikformaten ist die Unterstützung von Alpha­-Transparenzen. Animationen werden von PNG24 jedoch nicht unterstützt.

Transparenz

PNG­24 unterstützt bis zu 256 Transpa­renzstufen pro Farbe. Diese Technologie nennt sich Alpha-Transparenz. Mittels Alpha­-Transparenzen ist es möglich, auch weiche Übergänge von deckenden zu transparenten Flächen, wie beispielsweise Schatten oder Spiegelungen, optimal zu re­alisieren.

Kompression

Das Kompressionsverfahren von PNG­24­ Dateien entspricht dem von PNG­8­ Grafi­ken. Auch hier kommen ein Kompressions­algorithmus sowie Vorfilter zum Einsatz. Sobald Alpha-Transparenzen in die Datei aufgenommen werden, steigt die Dateigrö­ße rasant an. Verwendet PNG­24­-Dateien daher nur, wenn es für den gewünsch­ten Einsatzzweck unumgänglich ist. Wenn das Bild nicht über Transparenzen verfügt, ist PNG­24 normalerweise nicht die beste Wahl. Hier komprimieren JPEG, WebP oder PNG­8 besser.

Wenn ein Grafikprogramm beim PNG-Export keine Wahl zwischen PNG8 und 24 bereitstellt, handelt es sich i. d. R. um PNG24.

APNG

Das APNG-Format erweitert gewissermaßen PNG24 um die Möglichkeit, Animationen zu verwenden. Es wurde seinerzeit von Mozilla vorgestellt und wird u. a. für Animationen im Firefox-Browser eingesetzt. In Websites kann APNG verwendet werden, ist allerdings sehr selten im Einsatz. Wie PNG24 sind 16,7 Millionen Farben und Alpha-Transparenzen möglich. Bei Animationen kann die Dateigröße rasant ansteigen.

WEBP (Web Picture Format)

Das WebP-Format bietet sich gleichermaßen gut für Fotos und detaillierte Grafiken wie für simple Grafiken und Animationen an. Es wurde als modernes Bildformat für das Internet mit dem klaren Ziel konzipiert, ältere Formate wie JPG, PNG oder GIF zu ersetzen.

Kompression

WebP ermöglicht sowohl verlustbehaftete Komprimierung wie JPG als auch verlustfreie Kompression wie PNG. Die verlustbehaftete Kompression wird mittels »Predictive Coding« basierend auf dem VP8-Videocodec erreicht. Die verlustfreie Komprimierung arbeitet – vereinfacht ausgedrückt – mit Wiederholungsmustern in der Datei.

Im direkten Vergleich sind WebP-Bilder durchschnittlich 25–35 % kleiner als JPEG-Grafiken mit visuell ähnlichen Komprimierungsstufen. Im Vergleich mit PNG ist WebP etwa 26 % kleiner als dieselben Bilder im PNG-Format (Quelle).

Aufgrund der geringeren Dateigröße sollte WebP in den meisten Fällen den anderen Dateiformaten gegenüber bevorzugt werden.

AVIF (AV1 Image File Format)

AVIF ist ein Open-Source-Dateiformat ohne Lizenzgebühren. Das ist erwähnenwert, da bei anderen Dateiformaten Lizenzprobleme die Entwicklung und Verbreitung negativ beeinflusst haben. AVIF bietet sehr vielfältige Funktionen und Kompression auf dem neuesten Stand der Technik. Ähnlich wie WebP dazu konzipiert wurde, JPG und PNG abzulösen, soll AVIF wiederum WebP ablösen.

Kompression

AVIF verwendet das AV1-Codierungsformat. AV1 wurde ursprünglich für die Videoübertragung über das Internet entwickelt. Das Format profitiert von deutlichen Fortschritten bei der Videokodierung in den letzten Jahren. Im Vergleich zu JPG ist AVIF ca. 50% kleiner. Die mit WebP erreichbaren Dateigrößen werden ebenfalls noch einmal deutlich unterschritten.

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.