Gra­fik­for­ma­te: Die wich­tigs­ten Spei­cher­for­men im Überblick

Bilder gehören seit den Anfängen des Webs zu den ele­men­ta­ren Kom­po­nen­ten, die keiner Seite fehlen dürfen. Egal ob Foto oder Grafik: Die visuellen Website-Elemente ziehen die Auf­merk­sam­keit der Besucher auf sich. In vielen Fällen bieten Bilder den Nutzern einen klaren Mehrwert und werten das Web­pro­jekt auf, indem sie die Aussage eines Textes un­ter­strei­chen, Inhalte ver­deut­li­chen, zu­sätz­li­che In­for­ma­tio­nen liefern (z. B. In­fo­gra­fi­ken) oder zum Nach­den­ken anregen. Während hin­sicht­lich der Bedeutung absolute Einigkeit besteht, herrschen in Bezug auf die ver­wen­de­ten Bild­for­ma­te seit Jahren Un­stim­mig­kei­ten. Viel­fäl­ti­ge Optionen machen es den Website-Ver­ant­wort­li­chen alles andere als einfach, für jede Ge­le­gen­heit das passende Format zu finden – dabei spielt dieses ins­be­son­de­re für mobile Geräte eine große Rolle.

Ras­ter­gra­fi­ken sind trotz ihrer Nachteile bei der Ska­lie­rung we­sent­lich häufiger in Gebrauch als Vek­tor­gra­fi­ken, was ins­be­son­de­re daraus re­sul­tiert, dass sie schnell erzeugt und für nahezu alle Szenarien geeignet sind. So lassen sich grafische Website-Elemente ebenso in Pi­xel­for­ma­ten wie dem PNG-Format oder dem JPG-Format speichern wie auf­wen­di­ge Grafiken. Die größte Stärke der Pi­xel­dar­stel­lung liegt jedoch eindeutig in der Prä­sen­ta­ti­on von Fo­to­gra­fien, die in der modernen Web­ge­stal­tung eine große Rolle spielen. So kann ein be­lie­bi­ges Foto pro­blem­los ein­ge­scannt und als Pi­xel­gra­fik di­gi­ta­li­siert – und optional be­ar­bei­tet – werden. Neben den bereits genannten Gra­fik­for­ma­ten gibt es eine Vielzahl weiterer freier und pro­prie­tä­rer Formate, wobei nur einige wenige über­grei­fend zum Einsatz kommen.

Bei dem als JPG oder auch JPEG bekannten Format handelt es sich ei­gent­lich um eine 1992 ver­öf­fent­lich­te Norm (ISO/IEC 10918-1), die ver­schie­de­ne Verfahren zur Bild­kom­pres­si­on be­schreibt. Da die Norm selbst keine Be­stim­mun­gen enthält, wie das Bild ge­spei­chert werden soll, ist hierfür ein zu­sätz­li­ches Format nötig, wobei sich das JPEG File In­ter­ch­an­ge Format (JFIF) als brow­se­r­ü­ber­grei­fen­der Standard etabliert hat. Seltener ver­wen­de­te Al­ter­na­ti­ven sind das Still Picture In­ter­ch­an­ge File Format (SPIFF) und das Gra­fik­for­mat JPEG Network Graphics (JNG).

Das kom­pri­mie­ren­de JPG-Format verändert die ge­wöhn­li­che Struktur von Pi­xel­gra­fi­ken da­hin­ge­hend, dass jeweils 8 x 8 Pixel zu einem Block zu­sam­men­ge­fasst und im Verbund schritt­wei­se um­ge­rech­net werden. Dabei finden bei­spiels­wei­se eine Farb­um­rech­nung vom RGB-Farbraum in das YCbCr-Farb­mo­dell und die so­ge­nann­te Tief­pass­fil­te­rung statt, bei der hohe Fre­quen­zen her­aus­ge­fil­tert werden, um die Da­tei­grö­ße zu ver­rin­gern. Je nach gewähltem Kom­pres­si­ons­grad ist dieser Prozess mit einem gewissen Qua­li­täts­ver­lust verbunden, da nicht alle Bild­in­for­ma­tio­nen bei­be­hal­ten werden. Laut den Sta­tis­ti­ken von W3Techs greifen rund drei Viertel aller Websites auf Bilder im JPG-Format zurück, was ins­be­son­de­re auf die Effizienz in Sachen Da­tei­grö­ße zu­rück­zu­füh­ren ist, die mit der Kom­pres­si­on verbunden ist.

Emp­foh­le­nes An­wen­dungs­sze­na­rio: Spei­che­rung und Ver­öf­fent­li­chung von Fotos

Glei­cher­ma­ßen stark im Netz vertreten ist PNG (Portable Network Graphics), ein uni­ver­sel­les vom World Wide Web Con­sor­ti­um (W3C) an­er­kann­tes Gra­fik­for­mat, das 1996 zum ersten Mal auf der Bild­flä­che erschien. Als pa­tent­freie und zugleich modernere Al­ter­na­ti­ve zu GIF (Graphic In­ter­ch­an­ge Format) zeichnet es sich durch die Mög­lich­keit einer ver­lust­frei­en Kom­pres­si­on sowie eine maximale Farbtiefe von bis zu 24 Bit pro Pixel (16,7 Mio. Farben) – mit Al­pha­ka­nal sogar 32 Bit – aus. Im Gegensatz zum GIF lassen sich mit PNG jedoch keine Ani­ma­tio­nen erzeugen. Das PNG-Format un­ter­stützt sowohl Trans­pa­renz und Halb­trans­pa­renz (dank in­te­grier­tem Alpha-Kanal), was es für alle Arten von Bildern ein­setz­bar macht, als auch In­ter­la­cing, das einen be­schleu­nig­ten Aufbau der Bilddatei beim La­de­vor­gang er­mög­licht. Farb- und Hel­lig­keits­kor­rek­turme­cha­nis­men stellen sicher, dass PNG-Bild­da­tei­en auf ver­schie­de­nen Systemen annähernd gleich aussehen. Um eine Grafik im PNG-Format zu kom­pri­mie­ren, können Sie Tools wie das als Web­ser­vice um­ge­setz­te pngcrush verwenden. Aufgrund des ver­lust­frei­en Kom­pres­si­ons­pro­zes­ses sind die Dateien auch im Anschluss noch ver­gleichs­wei­se groß, weshalb das Format weniger für die Dar­stel­lung von Fo­to­gra­fien geeignet ist als bei­spiels­wei­se JPG. Es bietet al­ler­dings die Mög­lich­keit, den Farbraum zu ver­klei­nern (auf 1 bis 32 Bit pro Pixel). Emp­foh­le­nes An­wen­dungs­sze­na­rio: Spei­che­rung und Ver­öf­fent­li­chung kleiner Bilder und Grafiken (Logos, Icons, Balken etc.), Grafiken mit Trans­pa­renz, ver­lust­freie Fotos

Das On­line­por­tal Com­pu­Ser­ve führte das Graphics In­ter­ch­an­ge Format, kurz GIF, 1987 als Farb­al­ter­na­ti­ve zu dem damaligen Schwarz-Weiß-Format X BitMap (XBM) ein. Im Gegensatz zu anderen damaligen Lösungen wie PCX oder MacPaint be­nö­tig­ten die GIF-Dateien dank der ef­fi­zi­en­ten LZW-Kom­pres­si­on (Da­ten­kom­pres­si­on mit dem Lempel-Ziv-Welch-Al­go­rith­mus) deutlich weniger Spei­cher­platz, weshalb sich das Format in den Anfängen des Webs großer Be­liebt­heit erfreute. Als Format für Fotos und Grafiken haben JPG und PNG mitt­ler­wei­le aber deutlich die Nase vorn – seit der Version GIF89a (1989) kann das Format al­ler­dings mehrere Ein­zel­bil­der in einer Datei vereinen, weshalb es bis heute Einsatz bei der Er­stel­lung kleiner Ani­ma­tio­nen findet.

Alle Farb­infor­ma­tio­nen sind in GIF in einer Tabelle, der Farb­pa­let­te, abgelegt. Die Tabelle enthält bis zu 256 Farben (8 Bit), weshalb das Bild­for­mat von sich aus nicht für die Dar­stel­lung von Fo­to­gra­fien geeignet ist. Die einzelnen In­for­ma­tio­nen können darüber hinaus als trans­pa­rent definiert werden – anders als bei dem mo­der­ne­ren PNG ist eine Teil­trans­pa­renz jedoch nicht möglich, sodass ein Pixel entweder sichtbar oder nicht sichtbar sein kann.

Emp­foh­le­nes An­wen­dungs­sze­na­rio: Er­stel­lung von Ani­ma­tio­nen; Clip-Arts oder Logos, bei denen eine geringe Farbtiefe un­pro­ble­ma­tisch ist

Ein Gra­fik­for­mat, das ins­be­son­de­re bei der Über­mitt­lung von Druck­da­ten und hoch­auf­lö­sen­den Bildern Ver­wen­dung findet, ist TIFF (Tagged Image File Format). Bereits 1986 von Microsoft in Ko­ope­ra­ti­on mit Aldus (gehört heute zu Adobe) ent­wi­ckelt, ist es speziell für die Ein­bet­tung der Farbs­e­pa­ra­ti­on und Farb­pro­fi­le (ICC-Profile) ein­ge­scann­ter Bilder optimiert. Ferner un­ter­stützt TIFF das CMYK-Farb­mo­dell und er­mög­licht 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-Kom­pri­mie­rung, die auch beim GIF-Format ein­ge­setzt wird, ver­lust­frei kom­pri­mie­ren.

Dank dieser Ei­gen­schaf­ten hat sich TIFF als Quasi-Standard für Bilder durch­ge­setzt, bei denen die Qualität eine wich­ti­ge­re Rolle spielt als die Da­tei­grö­ße. So arbeiten u. a. Verlage und Print­me­di­en mit dem Bild­for­mat und auch die Ar­chi­vie­rung ein­far­bi­ger Grafiken wie z. B. tech­ni­scher Zeich­nun­gen zählt zu den viel­sei­ti­gen Ein­satz­ge­bie­ten. Zur Spei­che­rung und Prä­sen­ta­ti­on ras­ter­ba­sier­ter Geo­in­for­ma­tio­nen (Karten-, Luft­bil­der etc.) hat sich außerdem das mit zu­sätz­li­chen Tags versehene GeoTIFF-Format etabliert.

Emp­foh­le­nes An­wen­dungs­sze­na­rio: Über­mitt­lung hoch­wer­ti­ger Bilder mit hoher Auflösung für den Druck

Für die Spei­che­rung von Gra­fik­pro­jek­ten, die mit der bestens bekannten Software Photoshop erstellt worden sind, bietet der Her­stel­ler Adobe u. a. das haus­ei­ge­ne, pro­prie­tä­re PSD-Format (Photoshop Document) an. Dieses zeichnet sich dadurch aus, dass es sämtliche In­for­ma­tio­nen über Ebenen, Kanäle oder Vektoren sichert, was eine spätere Nach­be­ar­bei­tung möglich macht. So können Ebenen im Nach­hin­ein bei­spiels­wei­se hin­zu­ge­fügt, du­pli­ziert, aus­ge­blen­det, ver­scho­ben, entfernt und einzelne Elemente gezielt be­ar­bei­tet werden. In einer einzigen PSD-Datei lassen sich dabei mehrere Ebenen sowie die je­wei­li­gen Bilddaten ver­lust­frei ab­spei­chern. Ins­be­son­de­re bei Grafiken mit hohem Wie­der­erken­nungs­wert wie Logos, Banner etc., die bei Bedarf schnell an ver­schie­de­ne Platt­for­men und Dis­play­grö­ßen angepasst werden sollen, erweist sich das Adobe-Bild­for­mat als praktisch. Stan­dard­mä­ßig lassen sich Bilder im PSD-Format nur mit Adobe Photoshop ohne Ein­schrän­kun­gen öffnen, wobei der Austausch zwischen An­wen­dun­gen für die ver­schie­de­nen Be­triebs­sys­te­me Windows oder macOS pro­blem­los funk­tio­niert. Somit kann man das Gra­fik­for­mat in gewisser Weise auch als sys­tem­über­grei­fend be­zeich­nen. PSD fungiert in erster Linie als Spei­cher­for­mat während des Be­ar­bei­tungs­pro­zes­ses. Für die Ausgabe im Web sollte die jeweilige Datei jedoch vor dem Upload auf den Server in das PNG-Format oder al­ter­na­tiv in JPG um­ge­wan­delt werden, da die ver­lust­freie Spei­che­rung der Bilddaten und sämt­li­cher Ebenen zwar die ef­fi­zi­en­te Nach­be­ar­bei­tung er­mög­licht, aber auch eine sehr große Da­ten­men­ge mit sich bringt. Um eine PSD-Grafik zu kon­ver­tie­ren, genügt ein einfaches Webtool wie Zamzar. Emp­foh­le­nes An­wen­dungs­sze­na­rio: Zwi­schen­spei­che­rung und Nach­be­ar­bei­tung oft genutzter Grafiken, De­sign­vor­la­gen

BMP (Windows Bitmap) wurde für Microsoft- und IBM-Be­triebs­sys­te­me ent­wi­ckelt und erstmals 1990 mit Windows 3.0 als Spei­cher­for­mat für Pi­xel­gra­fi­ken mit einer Farbtiefe von bis zu 24 Bit pro Pixel ver­öf­fent­licht. Das un­kom­pri­mier­te Bild­for­mat ordnet jedem Pixel exakt einen Farbwert zu, weshalb BMP-Dateien stan­dard­mä­ßig sehr groß sind. Aus diesem Grund eignet sich das Format nicht für den Einsatz im Web.

Emp­foh­le­nes An­wen­dungs­sze­na­rio: Spei­che­rung von Fotos/Grafiken für den Offline-Einsatz

Vek­tor­gra­fi­ken eignen sich deshalb so gut für den Einsatz im Web, weil sie häufig viel weniger Spei­cher­platz benötigen als ver­gleich­ba­re Pi­xel­gra­fi­ken. Die ent­spre­chen­den Formate be­schrei­ben nicht, welche Farb­an­tei­le ein Pixel im je­wei­li­gen Bild hat, sondern die Objekte, aus denen sich das Bild zu­sam­men­setzt – runde und winklige Flächen, Text, gerade und gekrümmte Linien etc. – sowie ihre Position, Maße, Farben und anderen Ei­gen­schaf­ten. In Kom­bi­na­ti­on mit dem bereits an­ge­spro­che­nen Aspekt der ver­lust­frei­en Ska­lie­rung wird so die Rea­li­sie­rung re­spon­si­ver und bar­rie­re­frei­er We­b­ele­men­te zum Kin­der­spiel. Ferner können Sie jederzeit und un­kom­pli­ziert Än­de­run­gen an Dateien in vek­tor­gra­fi­schen Formaten vornehmen – wobei der Schwie­rig­keits­grad jedoch mit zu­neh­men­der Kom­ple­xi­tät der Bilddatei un­ver­hält­nis­mä­ßig steigt. Ein weiterer Vorteil gegenüber Pi­xel­gra­fi­ken ist die Mög­lich­keit, Ani­ma­tio­nen mit Ja­va­Script zu erzeugen.

In Zu­sam­men­ar­beit mit den Software-Her­stel­lern Aldus und Altsys ent­wi­ckel­te und ver­öf­fent­lich­te Adobe 1987 das Vek­tor­gra­fik­for­mat EPS (En­cap­su­la­ted Post­Script). Der Name des Formats rührt daher, dass die je­wei­li­gen Dateien in der Sei­ten­be­schrei­bungs­spra­che Post­Script ge­spei­chert werden, die die Ausgabe komplexer Seiten auf La­ser­dru­ckern und Be­lich­tern er­mög­licht. Zu diesem Zweck be­schreibt Post­Script die Elemente der Druck­sei­te wie Linien, Kreise, Bilder etc. und gibt Auskunft darüber, wo diese po­si­tio­niert sind. EPS erweitert diese Bild­in­for­ma­tio­nen um präzise Angaben über die Aus­ga­be­grö­ße, die so­ge­nann­te Bounding Box. Optional enthalten EPS-Dateien ein Vor­schau­bild in geringer Auflösung, das als Platz­hal­ter dienen kann. Das Gra­fik­for­mat von Adobe be­schreibt die einzelnen Objekte un­ab­hän­gig vom späteren Aus­ga­be­ge­rät, was den Austausch zwischen un­ter­schied­li­chen Aus­ga­be­me­di­en er­mög­licht.

EPS fand ins­be­son­de­re im Print­be­reich Anwendung, ist aber auch dort mitt­ler­wei­le von dem bestens bekannten Nach­fol­ge­for­mat PDF (Portable Document Format) abgelöst worden, das sich aufgrund der we­sent­lich ge­rin­ge­ren Da­tei­grö­ße auch für den E-Mail-Versand bestens eignet. Als Bild­for­mat für Web­pro­jek­te eignet sich jedoch weder das his­to­ri­sche EPS noch das moderne PDF, das vielmehr zum Austausch oder zur Prä­sen­ta­ti­on von Text-Do­ku­men­ten genutzt wird.

Emp­foh­le­nes An­wen­dungs­sze­na­rio: Be­schrei­bung komplexer Druck­sei­ten (Format nicht mehr aktuell)

Während viele andere Vek­tor­gra­fik­for­ma­te wie das AI-Format (Adobe Il­lus­tra­tor Artwork) ebenfalls für den Einsatz im Web un­ge­eig­net sind, bestätigt das vom W3C emp­foh­le­ne SVG (Scalable Vector Graphics) die eingangs erwähnten Vorteile vek­tor­ba­sier­ter Bild­da­tei­en ein­drucks­voll. Die Spe­zi­fi­ka­ti­on für die Be­schrei­bung zwei­di­men­sio­na­ler Vek­tor­gra­fi­ken, die auf der XML-Sprache basiert, ist spä­tes­tens seit der um­fas­sen­den HTML5-Un­ter­stüt­zung gängiger Browser eine ernst zu nehmende Al­ter­na­ti­ve zu den tra­di­tio­nel­len Ras­ter­gra­fi­ken – ins­be­son­de­re mit Blick für mobile und re­spon­si­ve Websites. Dabei bieten SVG-Dateien neben einer ver­lust­frei­en Ska­lier­bar­keit und einer oft sehr geringen Da­ten­men­ge diverse weitere Vorzüge wie die folgenden:

• Alle Prä­sen­ta­ti­ons­at­tri­bu­te wie Farben, Schrift­ar­ten etc. können mit CSS ma­ni­pu­liert werden.

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

• SVG-Grafiken sind ma­schi­nen­les­bar.

• Ent­spre­chen­der Code ist als separate Datei oder direkt im HTML-Dokument aus­ge­zeich­net und anpassbar.

• Auf ver­schie­de­ne Arten ani­mier­bar (SMIL, Ja­va­Script, CSS).

Ins­be­son­de­re für Grafiken, die Symbole enthalten (z. B. Logos) oder auf die Eingaben der Website-Besucher reagieren sollen (dy­na­mi­sche Diagramme), stellt das SVG-Format daher eine ex­zel­len­te Wahl dar. Auch für tech­ni­sche Grafiken ist das moderne Vektor-Bild­for­mat geradezu prä­de­sti­niert. Ein Blick auf die oben genannte Statistik von W3Techs zeigt jedoch, dass SVG im Gegensatz zu den Ras­ter­gra­fi­ken in den meisten Web­pro­jek­ten noch keine Ver­wen­dung findet. Aus­führ­li­che In­for­ma­tio­nen sowie Leitfäden zur Ein­bin­dung von SVG-Vek­tor­gra­fi­ken finden Sie im Ratgeber.

Emp­foh­le­nes An­wen­dungs­sze­na­rio: tech­ni­sche oder in­ter­ak­ti­ve Grafiken (Logos, Buttons, Icons etc.)