Beliebte Grafik- und Bildformate im Web

Ein schneller Überblick zu JPG, PNG, SVG & Co. ...

Werbung

GIF – „old skool“ für Spezielles

Das älteste Grafikformat gehört auch heute noch lange nicht auf den digitalen Schrottplatz.

GIF erlaubt die Darstellung von Bildern in True Color (8 Bit pro Kanal im RGB-Farbraum, ca. 16,78 Millionen Farben), einer Transparenz und bietet eine verlustfreie Kompression, welche für die damaligen schmalbandigen Internet-Zugänge (meist Modems mit theoretisch max. 64 Kbit/s) eine essentielle Voraussetzung war.

Neuere Formate wie JPG und PNG verfügen über effizientere Komprimierungstechniken – und im Fall von PNG sogar über einen Alpha-Kanal für abgestufte Transparenzen. Doch GIF hat ein As im Ärmel:

Es beherrscht die Fähigkeit zur Darstellung animierter Inhalte: Dabei werden in frei definierbaren zeitlichen Abständen einzelne GIF-Bilder durch eine Art „Daumenkino“-Effekt animiert.

Anwendungsbereiche des GIF-Formats:

  • Kurze Animationssequenzen
  • Cinemagramme

Hinweise und Empfehlungen

Die moderne Alternative PNG bietet neben einer erheblich besseren Datenkompression auch eine höhere Farbtiefe (bis zu 16 Bit pro Kanal im RGB-Farbraum, also ca. 281 Billionen Farben).

JPG – das Universalgenie für Fotografien

Selbst wer sich nur ansatzweise mit Bildbearbeitung oder digitaler Fotografie beschäftigt, kommt an JPG kaum vorbei. Es ist das am weitesten verbreitete Grafikformat für die Darstellung digitaler Bildinhalte – auch und besonders im Web.

Das hat vor allem mit seiner Flexibilität zu tun: JPG unterstützt verlustlose wie verlustbehaftete Kompression, kann also Bilder sowohl in bestmöglicher Qualität darstellen oder optimiert auf kleine Datenmengen.

Hinzu kommt, dass JPG zusammen mit GIF zu den ältesten Bildformaten im World Wide Web gehört und so von allen Webbrowsern auf allen grafikfähigen Endgeräten unterstützt wird.

Anwendungsbereiche des JPG-Formats:

  • Fotografien
  • Künstlerische Arbeiten

Hinweise und Empfehlungen

Aufgrund der meist genutzten verlustbehafteten Kompression eignet sich JPG nicht für filigrane Zeichnungen und großflächige Farbverläufe. Hier bilden sich bei höherer Kompression schnell unschöne Fragmente und Unschärfen, die den Bildeindruck zerstören und schlichtweg unprofessionell wirken.

PNG – der große Konkurrent in Sachen Qualität

PNG trat ursprünglich mit dem Ziel an, das Format GIF zu ersetzen. Hintergrund waren laufende Patente mit teils unklarer Nutzungslage der Kompressionsalgorithmen des GIF-Formats, welche insbesondere beim kommerziellen Einsatz ein Kostenrisiko bedeuteten.

Allerdings lies mangelnde Browserunterstützung lange Zeit einen produktiven Einsatz von PNG-Dateien nicht zu. Inzwischen stellt dies jedoch kein Problem mehr da, da alle modernen Webbrowser seit mehreren Versionen PNG vollumfänglich beherrschen.

PNG und JPG unterscheiden sich in folgenden Punkten:

  • PNG benötigt tendenziell mehr Speicherplatz.
  • PNG besitzt eine bessere Darstellungsqualität (verlustfreie Kompression).
  • PNG bietet einen Alpha-Kanal für abgestufte Transparenz (JPG erlaubt keine Transparenzen).

Der Nachteil des größeren Speicherbedarfs wird durch steigende Geschwindigkeiten der Internet-Anbindungen privater Haushalte inzwischen relativiert, sodass PNG eine ernstzunehmende Alternative gegenüber JPG ist und besonders für Bildinhalte infrage kommt, bei welchen eine hohe Darstellungsqualität im Vordergrund steht.

Anwendungsbereiche des PNG-Formats:

  • Hochauflösende, detailreiche Fotografien
  • Künstlerische Arbeiten
  • Zeichnungen mit komplexen Farbverläufen und feinen Strukturen

Hinweise und Empfehlungen

Wer großen Wert auf eine absolut detailgetreue Wiedergabe bei gleichzeitig exzellenter Kompression legt, sollte sich für das PNG-Format entscheiden.

SVG – Vektorformat mit Highspeed

SVG-Dateien nutzen ein auf XML aufbauendes Datenformat zur Speicherung der Bildinhalte. Aus einfachen Grundelementen wie Linien, Ovalen und Polygonen (sogenannte „grafische Primitive“) werden komplexe Formen gebildet.

Als Vektorformat eignet sich SVG kaum für die Wiedergabe von Fotografien, bietet jedoch unschlagbare Vorteile im Bereich der technisch-wissenschaftlichen Datenvisualisierung sowie bei der Darstellung von Infografiken, Logos, Buttons und anderen, auf geometrischen Formen basierenden Inhalte.

Die SVG-Spezifikationen liefern auch Funktionen wie einen Alphakanal für abgestufte Transparenzen, Animationen und diverse Filtereffekte. Selbst das Einbinden von Bitmaps ist möglich.

Der größte Vorteil liegt jedoch im Vektorformat an sich: SVGs sind ohne Qualitätsverlust stufenlos skalierbar und daher ideal für den Einsatz in responsiven Websites und Web-Anwendungen.

Anwendungsbereiche des SVG-Formats:

  • Logos und Banner
  • (Technische) Zeichnungen, Illustrationen
  • Grafiktext und Formeln

Hinweise und Empfehlungen

Manche Filtereffekte und Animationen werden nicht von allen Webbrowsern gleichermaßen unterstützt; Testläufe vor dem produktiven Einsatz derartiger Grafiken sind deshalb ratsam.


Autor: Tobias Eichner | Datum der Veröffentlichung: Juli 2018
Wichtig: Bitte beachten Sie die Nutzungsbedingungen und rechtlichen Hinweise für diesen Beitrag!


Werbung