Posted on 8. Februar 20189. Februar 2026 by Damian Kaufmann – zuletzt aktualisiert am 9. Februar 2026

Grafiken für Web und Druck

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

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 mit einem Farbwert, 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 Pixeldichten, 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 herunterzuladen und sie dann in gleicher Größe zu drucken, wenn dafür die nötige Anzahl an Bildpunkten fehlt. Welches sind denn die praxisrelevanten Auflösungen einer Pixelgrafik?

In der Theorie werden für Printerzeugnisse meist 300 ppi (pixel per inch) als Pixeldichte genannt, in der Praxis sind je nach Motiv, Druckverfahren und Betrachtungsabstand oft schon 200 ppi ausreichend. Der Einsatz auf einer Website hängt mit der Arbeitsweise 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. Die Herstellungstechnik von Monitoren hat sich weiterentwickelt und die Hersteller kochen auch ihr eigenes Süppchen hinsichtlich der Pixeldichte. Für die Anzeige im Web ist deshalb vor allem entscheidend, wie viele Bildpunkte ein Bild insgesamt hat – der im Bild gespeicherte ppi-Wert ist dabei meist nicht ausschlaggebend. Man kann sich also nicht immer sicher sein, wie groß die Grafik schließlich am Ausgabegerät angezeigt wird.

Übrigens: Ich habe es schon in vielen Fällen 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 wurde. Diese Angaben sind natürlich absolut unzureichend, denn man bekommt jede Pixelgrafik auf 300 dpi, 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 ist und ab einer gewissen Schwelle ein Raster bzw. eine Unschärfe erkennbar ist. Diesem Manko unterliegen Vektorgrafiken nicht, denn sie bestehen aus Pfaden, die aus Linien und Kurven bestehen und geometrische Formen bilden. Werden die Objekte einer Vektorgrafik skaliert – also in der Größe verändert – passt sich einfach der Pfad mathematisch an, ohne dass die Grafik unscharf wird. 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 benötigt 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. Bei der Vergrößerung ändert 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 nur schwer umsetzbar und in einen Workflow zu integrieren. So kommen Vektoren primär in der grafischen Gestaltung, z. B. bei der Erstellung von Logos oder Diagrammen, zum Einsatz.

Farbmodi für Web und Druck

Unterschiedliche Farbräume

Die Farbe der einzelnen Bildpunkte 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. Komplexe Differenzierungen zwischen RGB, sRGB, Adobe RGB oder Display-P3 wollen wir an dieser Stelle vernachlässigen. 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. Wie groß der Unterschied ist, hängt allerdings auch davon ab, welcher konkrete RGB- und CMYK-Farbraum verwendet wird (z. B. sRGB vs. andere RGB-Farbräume bzw. je nach Druckprofil).

RGB bzw. sRGB

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 naheliegende und allgemein unterstützte Farbmodus ist. In der Praxis ist sRGB der Standard – auf vielen modernen Geräten können aber auch größere Farbräume eine Rolle spielen. Üblich ist eine Farbtiefe von 24 bit (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 in vielen Fällen 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, die Vorgaben der Druckerei einzuhalten. Häufig wird eine Abgabe in CMYK verlangt; manche Druckereien akzeptieren aber auch RGB mit eingebettetem Farbprofil und übernehmen die Umwandlung. Die Gefahr, dass das Druckerzeugnis Fehler aufweist – insbesondere, wenn mit Transparenzen und Schlagschatten gearbeitet wird – ist bei der Verwendung von RGB vor allem dann hoch, wenn der Workflow nicht sauber farbverwaltet ist oder wenn beim Export bzw. Umwandeln Transparenzen reduziert werden müssen. 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 speziell 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 spätestens 1990 mit Windows 3.0 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 (dadurch sehr große Dateien)

JPG (JPEG)

Das gebräuchlichste Pixelgrafikformat heißt JPEG (Joint Photographic Experts Group) und wurde als Standard Anfang der 1990er Jahre (1992) festgelegt. 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 bei jedem erneuten Speichern als JPG wird die Datei in der Regel erneut komprimiert, was zu zusätzlichem Qualitätsverlust führen kann. Zudem kann es keine Transparenz speichern. Der Erfolg von JPG hängt auch mit der großen Verbreitung von Digitalkameras und Smartphones zusammen: Viele Geräte speichern Fotos weiterhin als JPG, nutzen aber je nach Einstellung und Modell inzwischen auch HEIF/HEIC als Standardformat.

• 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). Die Komprimierung selbst ist zwar verlustfrei, aber bei der Umwandlung von Fotos auf maximal 256 Farben gehen oft Farbnuancen verloren. Es ist daher für Farbfotos ungeeignet, aber ideal für Grafiken wie Logos, Diagramme, Icons 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. Auf Websites werden solche GIFs aus Performance-Gründen aber häufig als Video oder als animiertes WebP/AVIF ausgeliefert. Es begegnet uns daher häufig in Form von animierten Smileys bei diversen Anwendungen, 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 Format aus Mitte der 1990er Jahre. Es verarbeitet bis zu 16,7 Millionen Farben und kann verlustfrei komprimieren. Im Gegensatz zu GIF kann das PNG-Format allerdings als klassisches PNG keine Animationen abspeichern; hierfür gibt es die Erweiterung APNG. Dafür unterstützt es echte Transparenz mit allen Abstufungen (Alpha-Kanal). Der einzige wesentliche Nachteil ist, dass PNG den CMYK-Farbmodus nicht beherrscht, also ein RGB-Format ist – für druckfertige CMYK-Daten ist es daher weniger geeignet, auch wenn PNGs natürlich trotzdem gedruckt werden können (die Umwandlung nach CMYK erfolgt dann im Workflow). Im Internet läuft es aber dem GIF vielfach den Rang ab, vor allem bei statischen Grafiken mit Transparenz.

• 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 unkomprimiert oder verlustfrei komprimiert. Die Dateigröße bleibt entsprechend oft 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, Transparenz (Alpha-Kanal) zu speichern und kann je nach Software auch Ebenen enthalten – diese werden aber nicht von allen Programmen als editierbare Ebenen erkannt. Dadurch wird es zur vielfach kompatiblen Alternative zum PSD-Format von Adobe Photoshop (vor allem als Austauschformat für hochwertige Bilddaten).

• Vorteile: kann Ebenen speichern (je nach Software), verlustfreie Speicherung, vielfach kompatible Alternative zu PSD
• Nachteile: großer Speicherbedarf, für Web ungeeignet

PSD

Für das Photoshop Document aus dem Hause Adobe gilt in vielen Punkten Ähnliches wie für TIFF. Insbesondere speichert eine PSD-Datei auch Ebenen, was sie zum perfekten Arbeitsformat macht. Zusätzlich können z. B. Masken, Texte und Effekte erhalten bleiben, die beim Export in einfache Ausgabeformate verloren gehen. Nachteilig wirkt sich aus, dass PSD ein Photoshop-spezifisches Format ist: Viele andere Programme können PSD-Dateien zwar öffnen, aber je nach Inhalt werden nicht alle Photoshop-Funktionen korrekt übernommen.

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

HEIF/HEIC

HEIF steht für High Efficiency Image File Format und ist ein modernes Containerformat für Bilder. HEIC ist dabei die gebräuchlichste Variante mit Bildkomprimierung. Dadurch sind bei ähnlicher Bildqualität oft deutlich kleinere Dateigrößen möglich als bei JPEG – weshalb es z. B. auf Apple-Geräten häufig als Standardformat für Fotos eingesetzt wird. Im Web spielt HEIC/HEIF allerdings eine eher untergeordnete Rolle, weil die Browser-Unterstützung insgesamt begrenzt ist.

• Vorteile: sehr gute Komprimierung (kleine Dateien bei guter Qualität)
• Nachteile: eingeschränkte Kompatibilität im Web, auf Windows teils zusätzliche Codecs erforderlich

AVIF

AVIF steht für AV1 Image File Format und ist ein modernes Pixelgrafikformat für das Web. Es basiert auf dem AV1-Codec und wird in einem HEIF-Container gespeichert. Dadurch sind sehr kleine Dateigrößen bei guter Bildqualität möglich – wahlweise verlustbehaftet oder auch verlustfrei. AVIF unterstützt zudem Transparenz (Alpha-Kanal), hohe Farbtiefen und kann auch Animationen als Bildsequenz speichern. In aktuellen Browsern ist AVIF inzwischen breit nutzbar.

• Vorteile: sehr gute Komprimierung bei guter Qualität, Transparenz mit Abstufungen möglich, hohe Farbtiefe, Animationen möglich
• Nachteile: keine Unterstützung bei alten Browsern

WebP

WebP ist ein modernes Pixelgrafikformat von Google, das speziell für den Einsatz im Web entwickelt wurde. Es kann sowohl verlustbehaftet (ähnlich JPG) als auch verlustfrei (ähnlich PNG) komprimieren und erreicht dabei oft kleinere Dateigrößen bei vergleichbarer Qualität. Zusätzlich unterstützt WebP Transparenz (Alpha-Kanal) und kann Animationen speichern, sodass es als Allrounder je nach Anwendungsfall JPG, PNG oder GIF ersetzen kann. In aktuellen Browsern wird WebP breit unterstützt und daher in der Praxis mittlerweile häufig eingesetzt.

• Vorteile: sehr gute Komprimierung (verlustbehaftet und verlustfrei möglich), Transparenz mit Abstufungen möglich, Animationen möglich, hohe Kompatibilität im Web
• Nachteile: fehlende Unterstützung durch ältere Browser

RAW

Das Rohdatenformat, von dem sich auch der Name ableitet, dürfte für den durchschnittlichen Anwender meist eine untergeordnete Rolle spielen, ist aber inzwischen auch bei vielen Smartphones als Option verfügbar (z. B. als DNG/ProRAW). Umso wichtiger ist es für den professionellen Fotografen, denn viele Digitalkameras 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. Außerdem ist RAW kein einheitliches Dateiformat. Je nach Hersteller gibt es unterschiedliche RAW-Typen, häufig auch DNG als verbreiteten Standard.

• Vorteile: hohe Flexibilität bei der Bildbearbeitung
• Nachteile: großer Speicherbedarf, vollständige Bearbeitung meist nur mit Spezialsoftware

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 Vektordateien, nicht nur zwischen unterschiedlichen Anwendungen, sondern häufig auch zwischen verschiedenen Versionen derselben Software. Zu den wichtigsten Dateiformaten gehören AI, CDR, SVG sowie im Windows- bzw. Office-Umfeld WMF und EMF. EPS spielt heute meist nur noch in älteren Workflows eine Rolle.

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, ist vor allem 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 als Containerformat, das sowohl Pixel- als auch Vektorgrafiken enthalten kann, abgelöst und weitgehend veraltet.

Die große Zeit von SVG hat begonnen, seitdem dieses Format sich auf Websites einbinden lässt (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 mit CSS programmierbar. Die Handhabung gehört allerdings nicht gerade zu den leichten Disziplinen, ist aber durch bessere Tools und verbreitete Praxis deutlich zugänglicher geworden. Außerdem entwickeln sich die CSS-Standards kontinuierlich weiter.

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. Vektordateien können Sie dagegen beliebig vergrößern.
• Grafiken sollten für Druckerzeugnisse nach Möglichkeit im CMYK-Farbmodus, sonst in RGB vorliegen.
• Das Dateiformat PNG ist wegen fehlender CMYK-Unterstützung beim Druck problematisch.
• JPG-Dateien speichern keine Transparenz, GIF-Dateien nur 256 Farben.
• Von den obigen Formaten können nur TIF und PSD unter bestimmten Softwareumgebungen Ebenen speichern.
• Das Vektorgrafikformat SVG eignet sich für den Einsatz im Webdesign.

Und nun viel Spaß bei der kreativen Arbeit!