Hex, Hex! JPG, PNG, SVG oder PDF?

Ich lese immer wieder Posts, die das Dasein von Designern unter anderem damit rechtfertigen, dass diese wüssten, welches Bilddateiformat für welchen Zweck geeignet ist. Klar, viele Leute wissen das nicht, und für einen Kommunikations-Designer sollte das zum grundlegendem Handwerk gehören. Trotzdem ist das hoffentlich nicht das Einzige was einen Designer ausmacht 😊. In diesen Posts wird aber nie gesagt, was denn nun Sache ist. Welches Format eignet sich denn nun für welchen Zweck und warum ist das so? (Achtung, es wird etwas nerdig):

Grundsätzlich unterscheidet man zwischen Lichtfarben und Druckfarben. Auf dem Bildschirm werden immer Lichtfarben gezeigt. Schaut man mit einer starken Lupe oder einem Mikroskop auf die weiße Fläche eines Smartphones, sieht man viele Anordnungen kleiner roter, grüner und blauer Lämpchen. Man sieht keine weißen! Wenn alle Lämpchen voll aufgedreht sind, mischen sich die 3 Lichtfarben zu Weiß und ergeben einen Bildpunkt. Stellt man die Lämpchen unterschiedlich hell ein, ergeben sich daraus alle möglichen Farben. Der Standard sind 256 Helligkeitsstufen pro Lampe (von 0 bis 255). Das gibt theoretisch 256³ = 16.777.216 Farben. Das ist RGB. Und genauso gibt man diese Farben an. Das No Man’s Brand Pink ist R: 221, G: 0, B: 162, also die rote Lampe ist ziemlich hell, die grüne ist aus und die blaue leuchtet etwas stärker als die halbe Leuchtkraft. Man kann das auch hexadezimal schreiben: #DD00A2. Das bezeichnet genau das Selbe. Die ersten beiden Ziffern für R, die mittleren für G und die beiden hinteren für B. Im hexadezimalen Zahlensystem kann man 256 verschiedene Zustände auf zwei Stellen schreiben (00 bis FF). Weiß ist #FFFFFF, alle Lampen voll an. Schwarz ist #000000, alle Lämpchen sind aus.

In den Bildformaten JPG, GIF, SVG und WebP werden die Farben im RGB-System abgespeichert. Sie eignen sich also für die Bildschirmdarstellung. Allerdings hat jedes Format wiederum seine Stärken. JPG, GIF, PNG und WebP sind Pixelformate. Sie speichern das Motiv in vielen kleinen Bildpunkten. Aufgrund der Art und Weise, wie innerhalb dieser Formate komprimiert wird, eignet sich JPG für Fotos, PNG für Grafiken mit zusammenhängenden unifarbenen Flächen oder für Bilder mit Transparenz am besten. WebP kombiniert die Vorteile von JPG und PNG und kann auch Animationen darstellen. Das zu wissen ist wichtig, wenn es darum geht, das beste Verhältnis zwischen Dateigröße und Qualität zu erhalten. 

SVG ist ein vektorbasiertes Format (Scalable Vector Graphics). Hier werden die Daten als Kurven abgespeichert. Das geht natürlich nur, wenn man es aus einer Vorlage erstellt, die aus Vektoren besteht, also Grafiken aus Illustrator zum Beispiel. Dann hat man mit SVG sehr kleine Dateigrößen, die sich verlustfrei riesig darstellen lassen. Also gut für z.B. Logos. Zudem kann man die Vektorpunkte per Skript bewegen, die Farben tauschen und so interaktive Grafiken erzeugen. 

Druckfarben kennt jeder vom Drucker zuhause oder vom Wasserfarbmalkasten. Wenn man alles zusammen mischt, ergibt das nicht weiß, sondern (fast) schwarz. Aus Gelb und Blau wird Grün, usw. Normale Drucker verwenden vier Farben: Cyan, Magenta, Yellow und Key (Schwarz). Das ist CMYK. Je nachdem, wie stark sie übereinander gedruckt werden, ergeben sich unterschiedliche Farben. Sie werden in Prozent angegeben. Das No Man’s Brand Pink mischt man aus 14 % Cyan, 95 % Magenta, kein Gelb und kein Schwarz. Und so muss das auch in einer druckfähigen Datei abgespeichert werden. Denn für den Druck werden diese Farben separat und nacheinander aufgedruckt. CMYK kann man u.a. in Photoshop und Illustrator-Dateien, Tiffs, EPS und PDFs hinterlegen. Am besten verwendet man PDF, denn dort bleiben Pixel Pixel und Vektoren Vektoren und man hat im Gegensatz zu EPS eine schöne Vorschau. 

Vereinfacht zusammengefasst: RGB für Bildschirm: JPG für Fotos, PNG für Grafiken, SVG für Vektoren, PDF für digitale Dokumente (ja, PDF kann auch RGB). CMYK für Druck als PDF-X. 

Warum ist das jetzt wichtig? Man kann nämlich auch Fotos sehr gut als PNG speichern und Pixelbilder in SVG einbetten. Aber wenn man exakte Druckergebnisse oder eine performante Website haben möchte, kann es nicht schaden zu wissen, was man tut.