Grafiken für Web und Druck

Was sind eigentlich Pixelgrafiken und Vektorgrafiken? Was unterscheidet sie und für welche Einsatzbereiche eigenen sie sich? Muss ich bei der Verwendung auf das Dateiformat der Grafik achten? Und was hat es mit den Farbmodi RGB und CMYK auf sich? Diese Fragen möchte ich im Folgenden detailliert beantworten, damit es bei dem nächsten Druckauftrag oder beim Hochladen auf die eigene Website keine bösen Überraschungen gibt.

Für die ganz Ungeduldigen habe ich eine Merkliste mit den gängigsten Dateiformaten, den Vor- und Nachteilen und den wichtigsten Eigenschaften von Pixelgrafiken zum Download bereit gestellt:

Dateiformate Pixelgrafiken

Pixelgrafik und Vektorgrafik – der Unterschied

Pixelgrafiken und ihre Auflösung

Pixelgrafiken – auch Rastergrafiken genannt – sind in unserem Alltag präsenter als Vektorgrafiken. Unsere Digitalkamera oder das Smartphone macht Aufnahmen ausschließlich als Pixelgrafik. Sie bestehen aus unzähligen Punkten, die bei genügender Auflösung so klein sind, dass unser Auge sie nicht wahrnimmt. Dadurch entsteht Fotorealismus. Es sind je nach Medium unterschiedliche Auflösungen, also Dichten der Pixel notwendig, damit das Raster oder störende Unschärfen nicht erkennbar werden. Deshalb ist es auch in der Regel nicht möglich, für Websites optimierte Bilder herunter zu laden und sie dann in gleicher Größe zu drucken.

Welches sind denn die praxisrelevanten Auflösungen einer Pixelgrafik?

In der Theorie werden für Printerzeugnisse meist 300 ppi (pixel per inch) genannt, doch sind 200 ppi in der Praxis absolut ausreichend, da das menschliche Auge hierbei ohne Hilfsmittel keinen qualitativen Unterschied feststellen würde. Der Einsatz auf einer Website hängt mit der Auflösung der Bildschirme zusammen und wird häufig mit 72 ppi, manchmal auch 96 ppi angegeben, um in gleicher Größe dargestellt zu werden wie im Druck. Diesen nicht tot zu bekommenden Mythos darf man aber gerne begraben, er ist lediglich ein grober Richtwert. Die Herstellungstechnik von Monitoren hat sich weiterentwickelt und die Hersteller kochen auch ihr eigenes Süppchen hinsichtlich der Pixeldichte. Man kann sich also nicht sicher sein, wie groß die Grafik schließlich am Ausgabegeräte angezeigt wird.

Übrigens: Ich habe es schon sehr häufig erlebt, dass bei Handreichungen für Publikationen eine Pixeldichte der Abbildungen von 300 ppi bzw. dpi (dots per inch – das Äquivalent zu ppi beim Druck) erbeten wurden. Diese Angaben sind natürlich absolut unzureichend, denn man bekommt jede Pixelgrafik auf 300 ppi, wenn man sie nur klein genug macht. Insofern gehört zu so einer Angabe stets die gewünschte Größe in der Druckausgabe dazu, um hilfreich zu sein.

Vektorgrafiken und die Skalierung

Der Nachteil von Pixelgrafiken liegt also darin, dass ihre Darstellungsgröße endlich und ab einem gewissen Punkt ein Raster bzw. eine Unschärfe erkennbar ist. Diesem Manko unterliegen Vektorgrafiken nicht, denn sie bestehen aus mathematischen Formeln. Werden die Objekte einer Vektorgrafik skaliert – also in der Größe verändert – passt sich einfach die Formel an. Natürlich sehen wir beim Arbeiten mit Vektorgrafiken nichts davon und am Monitor werden die Vektorgrafiken gerastert (in Pixel umgerechnet), um sie darstellen zu können.

Ein ganz simples Beispiel für ein Objekt in einer Vektorgrafik wäre ein Kreis: Man braucht die Position des Mittelpunktes in einem Koordinatensystem, den Radius des Kreises und die Füllfarbe, fertig ist der Kreis! Möchte man dem Kreis eine Kontur geben, dann kommen Konturfarbe und Konturstärke hinzu. Beim Skalieren ändern sich einfach der Radius des Kreises.

Natürlich sind die meisten Objekte einer Vektorgrafik komplexer aufgebaut, das Prinzip bleibt aber immer gleich. Man kann sich aber gut vorstellen, dass sich diese Art der grafischen Darstellung nicht für Motive eignet, bei denen Fotorealismus gefragt ist. Kleinste Farbnuancen einer Landschaft oder in der Spiegelung der im Meer untergehenden Sonne würden aus unzähligen kleinen Vektoren bestehen müssen. In der Praxis ist dies nicht handlebar. So kommen Vektoren vor allem in der grafischen Gestaltung, z. B. bei der Erstellung von Logos oder Diagrammen, zum Einsatz.

Farbmodi

Die Farbe der einzelnen Pixel einer Pixelgrafik kann auf verschiedene Weise dargestellt werden. Hier kommt der Farbmodus ins Spiel. Die für den Durchschnittsanwender relevanten Modi heißen RGB und CMYK. Nehmen wir mit unserer Digitalkamera oder dem Smartphone ein Foto auf, liegt dieses immer im RGB-Modus vor. Erst mit entsprechender Grafiksoftware auf unserem Computer können wir den Modus ändern.

Die Farbmodelle unterschieden sich auch im Umfang der darstellbaren Farben (Farbraum). Der Farbraum des CMYK-Modells ist kleiner als der des RGB-Modells. Besonders im grünen und blauen/violetten Farbbereich sind im RGB-Modell mehr Farbabstufungen möglich.

RGB

RGB steht für die Farben Rot, Grün (nicht Gelb, wie man glauben könnte) und Blau. Durch die additive Farbmischung kann man aus diesen drei Farben alle anderen generieren. Das bedeutet, dass die drei Farben eine unterschiedliche Helligkeit erhalten. Bei höchster Helligkeit ergeben sie überlagert die Farbe Weiß, bei geringster Helligkeitsstufe Schwarz. Diese Technik kommt bei Monitoren zum Einsatz, weshalb es derzeit auch für den Einsatz auf Websites der einzig sinnvolle und voll unterstützte Farbmodus ist.

Üblich ist übrigens eine Farbtiefe von 24bit (True-Color), wodurch rund 16,7 Millionen verschiedene Farbabstufungen erzeugt werden können. Das menschliche Auge ist nicht in der Lage, so viele Farben zu unterscheiden, weshalb auch die Schwelle zum Fotorealismus überschritten ist.

CMYK

CMYK steht für die Farben Cyan, Magenta, Yellow und Black (Key). Wir kennen sie von unserem heimischen Tintenstrahldrucker. Der Farbmodus kommt entsprechend bei Printmedien zum Einsatz. Das Schwarz ist übrigens notwendig, weil die Mischung der drei anderen Farben in der Praxis kein tiefes Schwarz erzeugt. Hier liegt ein subtraktives Farbmodell vor: Schwarz wird durch die volle Intensität aller Farben erreicht, Weiß durch das Fehlen derselben.

An dieser Stelle möchte ich nachdrücklich darauf hinweisen, dass bei Printmedien akribisch darauf geachtet werden sollte, nur Grafiken im CMYK-Modus zu verwenden. Die Gefahr, dass das Druckerzeugnis Fehler aufweist – insbesondere, wenn mit Transparenzen und Schlagschatten gearbeitet wird – ist bei der Verwendung von RGB sehr hoch. Das kann ich auch aus eigener Praxis berichten: In einem meiner ersten Kurse zum Gestalten mit Adobe InDesign habe ich bei der Endkontrolle nicht darauf geachtet, dass ausschließlich CMYK bei den Projektplakaten der Teilnehmer zum Einsatz kam. Diese Nachlässigkeit ist mir kein zweites Mal unterlaufen.

Dateiformate bei Pixelgrafiken

In der täglichen Arbeit wird man insbesondere bei Pixelgrafiken mit einer großen Fülle an verschiedenen Dateiformaten konfrontiert. Nicht alle Formate eignen sich für jeden Einsatzzweck.  Es ist daher außerordentlich wichtig, dass wir die wichtigsten Eigenschaften dieser Dateien kennen. Im folgenden möchte ich daher die häufigsten kurz vorstellen und dann ihre Vor- und Nachteile zusammenfassen.

BMP

BMP steht für Windows Bitmap und ist ein Pionier der Pixelgrafikformate. Es wurde 1990 für das Betriebssystem von Microsoft eingeführt. Es kommt heute kaum noch zum Einsatz. Grund ist vor allem die schwache bzw. nicht vorhandene Komprimierung, wodurch die Dateien sehr viel Speicherbedarf besitzen.

• Vorteile: hohe Kompatibilität
• Nachteile: keine (schwache) Komprimierung

JPG (JPEG)

Das gebräuchlichste Pixelgrafikformat heißt JPEG (Joint Photographic Experts Group) und wurde bereits 1991 entwickelt. Es bringt die Möglichkeit der hohen Komprimierung mit. Diese ist allerdings verlustbehaftet, weshalb man zwischen Qualität und Komprimierungsrate stets abwägen sollte. JPG ist daher auch kein Arbeitsformat, sondern ein Ausgabeformat, denn nach jedem erneuten Öffnen und Speichern der Datei findet eine weitere Komprimierung statt. Zudem kann es keine Transparenz speichern. Der Erfolg von JPG hängt auch mit der großen Verbreitung von Digitalkameras und Smartphones zusammen: Jedes aktuelle Modell legt die Aufnahmen in diesem Format auf.

• Vorteile: hohe Kompatibilität, ordentliche Komprimierung
• Nachteile: keine Transparenz speicherbar, Komprimierung verlustbehaftet

GIF

Das GIF (Graphics Interchange Format) ist ein Bildformat mit verlustfreier Komprimierung für Bilder mit geringer Farbtiefe von maximal 256 Farben (8 bit Farbtiefe). Es ist daher für Farbfotos ungeeignet, aber ideal für Grafiken wie Logos, Diagramme etc. einsetzbar. Graustufenbilder können ebenfalls als GIF dargestellt werden. Auch Transparenz beherrscht GIF, allerdings eingeschränkt: Ein Pixel kann entweder transparent sein oder nicht, Abstufungen sind nicht möglich. Bei Animationen erfreut sich das Format, das dabei mehrere Einzelbilder in einer Datei speichert, immer noch großer Beliebtheit. Es begegnet uns daher häufig in Form von animierten Smileys bei diversen Anwendung, Apps und Websites.

• Vorteile: hohe Kompatibilität, verlustfreie Komprimierung, Transparenz möglich, Animationen möglich
• Nachteile: maximal 256 Farben, Transparenz eingeschränkt

PNG

PNG steht für Portable Network Graphics und ist ein relativ junges Format. Es verarbeitet bis zu 16,7 Millionen Farben und kann verlustfrei komprimieren. Im Gegensatz zu GIF kann das PNG-Format allerdings keine Animationen abspeichern. Dafür unterstützt es als einziges Format echte Transparenz mit allen Abstufungen. Der einzige wesentliche Nachteil ist, dass PNG den CMYK-Farbmodus nicht beherrscht, somit für Printmedien ungeeignet ist. Im Internet läuft es aber dem GIF vielfach den Rang ab.

• Vorteile: hohe Kompatibilität, verlustfreie Komprimierung, Transparenz mit Abstufungen möglich
• Nachteile: kein CMYK-Farbmodus möglich

TIF (TIFF)

Das Tagged Image File Format – kurz TIFF – speichert Bilder verlustfrei, die Dateigröße bleibt entsprechend hoch. Im Internet spielt es daher keine Rolle. Verlage und Druckereien nutzen es gerne zum Austausch von Daten in der Druckvorstufe, da es das im Druck übliche CMYK-Farbmodell unterstützt. Ebenso ist es in der Lage, Ebenen zu speichern und somit natürlich auch Transparenz darzustellen. Dadurch wird es zur vielfach kompatiblen Alternative zum PSD-Format von Adobe Photoshop macht.

• Vorteile: kann Ebenen speichern, verlustfreie Speicherung, vielfach kompatible Alternative zu PSD
• Nachteile: großer Speicherbedarf

PSD

Für das Photoshop Document aus dem Hause Adobe gilt weitgehend das für ein TIF Gesagte. Insbesondere speichert eine PSD-Datei auch Ebenen, was sie zum perfekten Arbeitsformat macht. Nachteilig wirkt sich lediglich die geringe Kompatibilität zu anderen Grafikprogrammen als Photoshop selbst aus.

• Vorteile: kann Ebenen speichern, verlustfreie Speicherung
• Nachteile: großer Speicherbedarf, geringe Kompatibilität

RAW

Das Rohdatenformat, woher sich auch der Name ableitet, dürfte für den durchschnittlichen Anwender eine untergeordnete Rolle spielen. Umso wichtiger ist es für den professionellen Fotografen, denn viele Digitalkameras – insbesondere Spiegelreflexkameras – erlauben es, die Aufnahmen in diesem Format auf dem Speicherchip abzulegen. RAW-Dateien ermöglichen eine sehr hohe Flexibilität bei der späteren Bildbearbeitung, wofür aber auch spezielle Software notwendig ist.

• Vorteile: hohe Flexibilität bei der Bildbearbeitung
• Nachteile: großer Speicherbedarf, geringe Kompatibilität

Dateiformate bei Vektorgrafiken

Zwar gibt es bei Vektorgrafiken eine ähnliche Vielfalt an Dateiformaten wie bei Pixelgrafiken, doch spielen diese für den einfachen Nutzer keine so entscheidende Rolle. Fehlende Kompatibilität ist allerdings nicht selten ein Ärgernis bei Vektorgrafiken, nicht nur zwischen unterschiedlichen Anwendungen, sondern häufig auch zwischen verschiedenen Versionen derselben Software. Zu den wichtigsten Dateiformaten gehören AI, CDR, EPS, WMF, EMF und SVG.

Während AI und CDR die hausinternen Formate von Adobe Illustrator bzw. CorelDraw darstellen und für die Verarbeitung in den entsprechenden Anwendungen ausgelegt sind, sind vor allem EPS und SVG von größerer Bedeutung. EPS (Encapsulated PostScript) kommt bzw. kam hierbei als softwareübergreifendes Transportformat und als Druckvorstufe zum Einsatz. Es kann sowohl Pixel als auch Vektoren beinhalten. In der Eigenschaft als Druckvorstufe ist es mittlerweile von PDF abgelöst und veraltet.

Die große Zeit von SVG steht dagegen wohl noch bevor, denn dieses Format lässt sich auf Websites einbinden (weiterführende Informationen hierzu bei SELFHTML und mediaevent.de). Es hat nicht nur den Vorteil einer extrem schlanken Dateigröße, man muss sich auch keine Gedanken mehr über notwendige Auflösungen machen. Die Vektorgrafik wird immer in bester Schärfe dargestellt. Zudem sind SVG-Grafiken per CSS formatierbar. Anders ausgedrückt: Ihre Gestalt ist programmierbar. Die Handhabung gehört allerdings nicht gerade zu den leichten Disziplinen, aber die Entwicklung hat hier mit dem neuen CSS3-Standards erst begonnen.

Zusammenfassung: Merkliste

Das Fazit soll die Fülle an Informationen auf die allerwichtigsten Erkenntnisse reduzieren. Folgende Tipps möchte ich Ihnen an die Hand geben, damit unangenehme Überraschungen ausbleiben:

• Achten Sie beim Einsatz von Pixelgrafiken bei Druckerzeugnissen auf mindestens 200 ppi Auflösung. Vektorgrafiken können Sie dagegen skalieren, wie es Ihnen beliebt.
• Grafiken sollten für Druckerzeugnisse immer im CMYK-Farbmodus, sonst in RGB vorliegen.
• Das Dateiformat PNG ist wegen fehlender CMYK-Unterstützung beim Druck tabu.
• JPG-Dateien speichern keine Transparenz, GIF-Dateien nur 256 Farben.
• Nur die Formate TIF und PSD können Ebenen speichern.
• Das Vektorgrafikformat SVG eignet sich für den Einsatz im Webdesign.

Und nun viel Spaß bei der kreativen Arbeit!