Grafikformate: Die wichtigsten Speicherformen für Bilder im Web

Bilder gehören seit den Anfängen des Webs zu den elementaren Komponenten, die keiner Seite fehlen dürfen. Egal ob Foto oder Grafik: Die visuellen Website-Elemente ziehen die Aufmerksamkeit der Besucher auf sich. In vielen Fällen bieten Bilder den Nutzern einen klaren Mehrwert und werten das Webprojekt auf, indem sie die Aussage eines Textes unterstreichen, Inhalte verdeutlichen, zusätzliche Informationen liefern (z. B. Infografiken) oder zum Nachdenken anregen. Während hinsichtlich der Bedeutung absolute Einigkeit besteht, herrschen in Bezug auf die verwendeten Bildformate seit Jahren Unstimmigkeiten. Vielfältige Optionen machen es den Website-Verantwortlichen alles andere als einfach, für jede Gelegenheit das passende Format zu finden – dabei spielt dieses insbesondere für mobile Geräte eine große Rolle.

Rastergrafiken sind trotz ihrer Nachteile bei der Skalierung wesentlich häufiger in Gebrauch als Vektorgrafiken, was insbesondere daraus resultiert, dass sie schnell erzeugt und für nahezu alle Szenarien geeignet sind. So lassen sich grafische Website-Elemente ebenso in Pixelformaten wie dem PNG-Format oder dem JPG-Format speichern wie aufwendige Grafiken. Die größte Stärke der Pixeldarstellung liegt jedoch eindeutig in der Präsentation von Fotografien, die in der modernen Webgestaltung eine große Rolle spielen. So kann ein beliebiges Foto problemlos eingescannt und als Pixelgrafik digitalisiert – und optional bearbeitet – werden. Neben den bereits genannten Grafikformaten gibt es eine Vielzahl weiterer freier und proprietärer Formate, wobei nur einige wenige übergreifend zum Einsatz kommen.

Bei dem als JPG oder auch JPEG bekannten Format handelt es sich eigentlich um eine 1992 veröffentlichte Norm (ISO/IEC 10918-1), die verschiedene Verfahren zur Bildkompression beschreibt. Da die Norm selbst keine Bestimmungen enthält, wie das Bild gespeichert werden soll, ist hierfür ein zusätzliches Format nötig, wobei sich das JPEG File Interchange Format (JFIF) als browserübergreifender Standard etabliert hat. Seltener verwendete Alternativen sind das Still Picture Interchange File Format (SPIFF) und das Grafikformat JPEG Network Graphics (JNG).

Das komprimierende JPG-Format verändert die gewöhnliche Struktur von Pixelgrafiken dahingehend, dass jeweils 8 x 8 Pixel zu einem Block zusammengefasst und im Verbund schrittweise umgerechnet werden. Dabei finden beispielsweise eine Farbumrechnung vom RGB-Farbraum in das YCbCr-Farbmodell und die sogenannte Tiefpassfilterung statt, bei der hohe Frequenzen herausgefiltert werden, um die Dateigröße zu verringern. Je nach gewähltem Kompressionsgrad ist dieser Prozess mit einem gewissen Qualitätsverlust verbunden, da nicht alle Bildinformationen beibehalten werden. Laut den Statistiken von W3Techs greifen rund drei Viertel aller Websites auf Bilder im JPG-Format zurück, was insbesondere auf die Effizienz in Sachen Dateigröße zurückzuführen ist, die mit der Kompression verbunden ist.

Empfohlenes Anwendungsszenario: Speicherung und Veröffentlichung von Fotos

Gleichermaßen stark im Netz vertreten ist PNG (Portable Network Graphics), ein universelles vom World Wide Web Consortium (W3C) anerkanntes Grafikformat, das 1996 zum ersten Mal auf der Bildfläche erschien. Als patentfreie und zugleich modernere Alternative zu GIF (Graphic Interchange Format) zeichnet es sich durch die Möglichkeit einer verlustfreien Kompression sowie eine maximale Farbtiefe von bis zu 24 Bit pro Pixel (16,7 Mio. Farben) – mit Alphakanal sogar 32 Bit – aus. Im Gegensatz zum GIF lassen sich mit PNG jedoch keine Animationen erzeugen. Das PNG-Format unterstützt sowohl Transparenz und Halbtransparenz (dank integriertem Alpha-Kanal), was es für alle Arten von Bildern einsetzbar macht, als auch Interlacing, das einen beschleunigten Aufbau der Bilddatei beim Ladevorgang ermöglicht. Farb- und Helligkeitskorrekturmechanismen stellen sicher, dass PNG-Bilddateien auf verschiedenen Systemen annähernd gleich aussehen. Um eine Grafik im PNG-Format zu komprimieren, können Sie Tools wie das als Webservice umgesetzte pngcrush verwenden. Aufgrund des verlustfreien Kompressionsprozesses sind die Dateien auch im Anschluss noch vergleichsweise groß, weshalb das Format weniger für die Darstellung von Fotografien geeignet ist als beispielsweise JPG. Es bietet allerdings die Möglichkeit, den Farbraum zu verkleinern (auf 1 bis 32 Bit pro Pixel). Empfohlenes Anwendungsszenario: Speicherung und Veröffentlichung kleiner Bilder und Grafiken (Logos, Icons, Balken etc.), Grafiken mit Transparenz, verlustfreie Fotos

Das Onlineportal CompuServe führte das Graphics Interchange Format, kurz GIF, 1987 als Farbalternative zu dem damaligen Schwarz-Weiß-Format X BitMap (XBM) ein. Im Gegensatz zu anderen damaligen Lösungen wie PCX oder MacPaint benötigten die GIF-Dateien dank der effizienten LZW-Kompression (Datenkompression mit dem Lempel-Ziv-Welch-Algorithmus) deutlich weniger Speicherplatz, weshalb sich das Format in den Anfängen des Webs großer Beliebtheit erfreute. Als Format für Fotos und Grafiken haben JPG und PNG mittlerweile aber deutlich die Nase vorn – seit der Version GIF89a (1989) kann das Format allerdings mehrere Einzelbilder in einer Datei vereinen, weshalb es bis heute Einsatz bei der Erstellung kleiner Animationen findet.

Alle Farbinformationen sind in GIF in einer Tabelle, der Farbpalette, abgelegt. Die Tabelle enthält bis zu 256 Farben (8 Bit), weshalb das Bildformat von sich aus nicht für die Darstellung von Fotografien geeignet ist. Die einzelnen Informationen können darüber hinaus als transparent definiert werden – anders als bei dem moderneren PNG ist eine Teiltransparenz jedoch nicht möglich, sodass ein Pixel entweder sichtbar oder nicht sichtbar sein kann.

Empfohlenes Anwendungsszenario: Erstellung von Animationen; Clip-Arts oder Logos, bei denen eine geringe Farbtiefe unproblematisch ist

Ein Grafikformat, das insbesondere bei der Übermittlung von Druckdaten und hochauflösenden Bildern Verwendung findet, ist TIFF (Tagged Image File Format). Bereits 1986 von Microsoft in Kooperation mit Aldus (gehört heute zu Adobe) entwickelt, ist es speziell für die Einbettung der Farbseparation und Farbprofile (ICC-Profile) eingescannter Bilder optimiert. Ferner unterstützt TIFF das CMYK-Farbmodell und ermöglicht für jeden Farbkanal eine Farbtiefe von bis zu 16 Bit (die Gesamt-Farbtiefe beträgt demnach 48 Bit). Seit 1992 kann man das Format darüber hinaus mithilfe der LZW-Komprimierung, die auch beim GIF-Format eingesetzt wird, verlustfrei komprimieren.

Dank dieser Eigenschaften hat sich TIFF als Quasi-Standard für Bilder durchgesetzt, bei denen die Qualität eine wichtigere Rolle spielt als die Dateigröße. So arbeiten u. a. Verlage und Printmedien mit dem Bildformat und auch die Archivierung einfarbiger Grafiken wie z. B. technischer Zeichnungen zählt zu den vielseitigen Einsatzgebieten. Zur Speicherung und Präsentation rasterbasierter Geoinformationen (Karten-, Luftbilder etc.) hat sich außerdem das mit zusätzlichen Tags versehene GeoTIFF-Format etabliert.

Empfohlenes Anwendungsszenario: Übermittlung hochwertiger Bilder mit hoher Auflösung für den Druck

Für die Speicherung von Grafikprojekten, die mit der bestens bekannten Software Photoshop erstellt worden sind, bietet der Hersteller Adobe u. a. das hauseigene, proprietäre PSD-Format (Photoshop Document) an. Dieses zeichnet sich dadurch aus, dass es sämtliche Informationen über Ebenen, Kanäle oder Vektoren sichert, was eine spätere Nachbearbeitung möglich macht. So können Ebenen im Nachhinein beispielsweise hinzugefügt, dupliziert, ausgeblendet, verschoben, entfernt und einzelne Elemente gezielt bearbeitet werden. In einer einzigen PSD-Datei lassen sich dabei mehrere Ebenen sowie die jeweiligen Bilddaten verlustfrei abspeichern. Insbesondere bei Grafiken mit hohem Wiedererkennungswert wie Logos, Banner etc., die bei Bedarf schnell an verschiedene Plattformen und Displaygrößen angepasst werden sollen, erweist sich das Adobe-Bildformat als praktisch. Standardmäßig lassen sich Bilder im PSD-Format nur mit Adobe Photoshop ohne Einschränkungen öffnen, wobei der Austausch zwischen Anwendungen für die verschiedenen Betriebssysteme Windows oder macOS problemlos funktioniert. Somit kann man das Grafikformat in gewisser Weise auch als systemübergreifend bezeichnen. PSD fungiert in erster Linie als Speicherformat während des Bearbeitungsprozesses. Für die Ausgabe im Web sollte die jeweilige Datei jedoch vor dem Upload auf den Server in das PNG-Format oder alternativ in JPG umgewandelt werden, da die verlustfreie Speicherung der Bilddaten und sämtlicher Ebenen zwar die effiziente Nachbearbeitung ermöglicht, aber auch eine sehr große Datenmenge mit sich bringt. Um eine PSD-Grafik zu konvertieren, genügt ein einfaches Webtool wie Zamzar. Empfohlenes Anwendungsszenario: Zwischenspeicherung und Nachbearbeitung oft genutzter Grafiken, Designvorlagen

BMP (Windows Bitmap) wurde für Microsoft- und IBM-Betriebssysteme entwickelt und erstmals 1990 mit Windows 3.0 als Speicherformat für Pixelgrafiken mit einer Farbtiefe von bis zu 24 Bit pro Pixel veröffentlicht. Das unkomprimierte Bildformat ordnet jedem Pixel exakt einen Farbwert zu, weshalb BMP-Dateien standardmäßig sehr groß sind. Aus diesem Grund eignet sich das Format nicht für den Einsatz im Web.

Empfohlenes Anwendungsszenario: Speicherung von Fotos/Grafiken für den Offline-Einsatz

Vektorgrafiken eignen sich deshalb so gut für den Einsatz im Web, weil sie häufig viel weniger Speicherplatz benötigen als vergleichbare Pixelgrafiken. Die entsprechenden Formate beschreiben nicht, welche Farbanteile ein Pixel im jeweiligen Bild hat, sondern die Objekte, aus denen sich das Bild zusammensetzt – runde und winklige Flächen, Text, gerade und gekrümmte Linien etc. – sowie ihre Position, Maße, Farben und anderen Eigenschaften. In Kombination mit dem bereits angesprochenen Aspekt der verlustfreien Skalierung wird so die Realisierung responsiver und barrierefreier Webelemente zum Kinderspiel. Ferner können Sie jederzeit und unkompliziert Änderungen an Dateien in vektorgrafischen Formaten vornehmen – wobei der Schwierigkeitsgrad jedoch mit zunehmender Komplexität der Bilddatei unverhältnismäßig steigt. Ein weiterer Vorteil gegenüber Pixelgrafiken ist die Möglichkeit, Animationen mit JavaScript zu erzeugen.

In Zusammenarbeit mit den Software-Herstellern Aldus und Altsys entwickelte und veröffentlichte Adobe 1987 das Vektorgrafikformat EPS (Encapsulated PostScript). Der Name des Formats rührt daher, dass die jeweiligen Dateien in der Seitenbeschreibungssprache PostScript gespeichert werden, die die Ausgabe komplexer Seiten auf Laserdruckern und Belichtern ermöglicht. Zu diesem Zweck beschreibt PostScript die Elemente der Druckseite wie Linien, Kreise, Bilder etc. und gibt Auskunft darüber, wo diese positioniert sind. EPS erweitert diese Bildinformationen um präzise Angaben über die Ausgabegröße, die sogenannte Bounding Box. Optional enthalten EPS-Dateien ein Vorschaubild in geringer Auflösung, das als Platzhalter dienen kann. Das Grafikformat von Adobe beschreibt die einzelnen Objekte unabhängig vom späteren Ausgabegerät, was den Austausch zwischen unterschiedlichen Ausgabemedien ermöglicht.

EPS fand insbesondere im Printbereich Anwendung, ist aber auch dort mittlerweile von dem bestens bekannten Nachfolgeformat PDF (Portable Document Format) abgelöst worden, das sich aufgrund der wesentlich geringeren Dateigröße auch für den E-Mail-Versand bestens eignet. Als Bildformat für Webprojekte eignet sich jedoch weder das historische EPS noch das moderne PDF, das vielmehr zum Austausch oder zur Präsentation von Text-Dokumenten genutzt wird.

Empfohlenes Anwendungsszenario: Beschreibung komplexer Druckseiten (Format nicht mehr aktuell)

Während viele andere Vektorgrafikformate wie das AI-Format (Adobe Illustrator Artwork) ebenfalls für den Einsatz im Web ungeeignet sind, bestätigt das vom W3C empfohlene SVG (Scalable Vector Graphics) die eingangs erwähnten Vorteile vektorbasierter Bilddateien eindrucksvoll. Die Spezifikation für die Beschreibung zweidimensionaler Vektorgrafiken, die auf der XML-Sprache basiert, ist spätestens seit der umfassenden HTML5-Unterstützung gängiger Browser eine ernst zu nehmende Alternative zu den traditionellen Rastergrafiken – insbesondere mit Blick für mobile und responsive Websites. Dabei bieten SVG-Dateien neben einer verlustfreien Skalierbarkeit und einer oft sehr geringen Datenmenge diverse weitere Vorzüge wie die folgenden:

• Alle Präsentationsattribute wie Farben, Schriftarten etc. können mit CSS manipuliert werden.

• Skripte können via DOM (Document Object Model) auf die Inhalte zugreifen.

• SVG-Grafiken sind maschinenlesbar.

• Entsprechender Code ist als separate Datei oder direkt im HTML-Dokument ausgezeichnet und anpassbar.

• Auf verschiedene Arten animierbar (SMIL, JavaScript, CSS).

Insbesondere für Grafiken, die Symbole enthalten (z. B. Logos) oder auf die Eingaben der Website-Besucher reagieren sollen (dynamische Diagramme), stellt das SVG-Format daher eine exzellente Wahl dar. Auch für technische Grafiken ist das moderne Vektor-Bildformat geradezu prädestiniert. Ein Blick auf die oben genannte Statistik von W3Techs zeigt jedoch, dass SVG im Gegensatz zu den Rastergrafiken in den meisten Webprojekten noch keine Verwendung findet. Ausführliche Informationen sowie Leitfäden zur Einbindung von SVG-Vektorgrafiken finden Sie im Ratgeber.

Empfohlenes Anwendungsszenario: technische oder interaktive Grafiken (Logos, Buttons, Icons etc.)