Du denkst, GIF ist die leckerste Erdnussbutter, die es gibt? Und AI war dieser komische Science-Fiction-Film mit Haley Joel Osment? Nun, du liegst nicht falsch. Aber heute reden wir über Bilddateiformate und all diese kleinen lästigen Dateien, die wir benutzen, um visuelle Inhalte für Druck und Web zu erstellen.

Jede Grafik, die du online siehst, ist eine Bilddatei. So ziemlich alles, was du gedruckt auf Papier, Plastik oder einem T-Shirt siehst, kommt von einer Bilddatei. Diese Dateien kommen in einer Vielzahl von Formaten und jedes ist für einen bestimmten Zweck optimiert. Den richtigen Typ für den richtigen Job zu verwenden, bedeutet, dass dein Design so perfekt sein wird, wie du es dir vorgestellt hast. Das falsche Format kann zu einem schlechten Druck oder Web Bild, einem riesigen Download oder einer fehlenden Grafik in einer E-Mail führen.

Also erklären wir sie mal genauer. Willkommen zum Einmaleins der Bilddateiformate. Tauchen wir ein in die Grundkenntnisse jeden Dateityps!

Bilddateiformate

Die meisten Bilddateien passen in eine von zwei allgemeinen Kategorien – Rasterformate und Vektorformate – und jede Kategorie hat ihren bestimmten Zweck. Diese Unterteilung ist nicht perfekt. Zum Beispiel können bestimmte Formate tatsächlich Elemente beider Typen enthalten. Aber es ist ein guter Anfang, wenn du darüber nachdenkst, welches Format du für deine Projekte verwenden musst.

Inhaltsverzeichnis

  1. Rastergrafiken
    1. JPEG
    2. GIF
    3. PNG
    4. TIFF
    5. RAW
    6. PSD
  2. Vektorgrafiken
    1. PDF
    2. EPS
    3. AI

Rastergrafiken

Rastergrafiken bestehen aus einem Gitter aus Punkten, genannt Pixel, bei dem jedem Pixel eine Farbe zugeordnet ist. Im Gegensatz zu einer Vektorgrafik sind Rastergrafiken abhängig von der Auflösung, was bedeutet, sie existieren in einer Größe. Wenn man eine Rastergrafik transformiert, streckt man die Pixel selbst, was zu einem verpixelten oder verschwommenen Bild führen kann. Wenn man ein Bild vergrößert, errät die Software im Grunde anhand der umliegenden Pixel, welche Bilddaten fehlen. Meistens sind die Ergebnisse nicht sonderlich gut.

Fotos vom Autoren bereitgestellt

Rastergrafiken werden in der Regel für Fotografien, Digital Artworks und Webgrafiken (wie Banner, Werbungen, Social Media Content und E-Mail-Grafiken) verwendet. Adobe Photoshop ist in der Branche das Standardbearbeitungsprogramm, das benutzt wird, um Rastergrafiken zu erstellen, designen und bearbeiten, ebenso um bestehenden Designs Effekte, Schatten und Texturen hinzuzufügen.

CMYK vs. RGB

Alle Rastergrafiken können in zwei grundlegenden Farbmodellen gespeichert werden: CMYK und RGB.

CMYK – von Owley
RGB – von A&V

CMYK ist ein vierfarbiger Druckprozess, der für Cyan, Magenta, Yellow und Key (schwarz) steht. Diese Farben repräsentieren die vier Druckfarben, die während des Druckprozesses kombiniert werden. Dateien, die in diesem Format gespeichert werden, sind optimiert für den physischen Druck.

RGB ist ein lichtbasiertes Farbmodell und steht für Rot, Grün und Blau. Dies sind die drei Hauptfarben des Lichts, die kombiniert die anderen Farben ergeben. Dateien in diesem Format sind optimiert für das Internet, Mobiltelefone, Filme und Videos – alles, was auf dem Bildschirm erscheint.

Verlustreich vs. verlustfrei

Jede Rastergrafik ist entweder verlustfrei oder verlustreich, abhängig davon, wie das Format mit deiner Bilddatei umgeht.

Verlustfreie Bildformate erfassen alle Daten deiner Originaldatei. Nichts von Originaldatei, Foto oder Kunstwerk geht verloren – daher die Bezeichnung „verlustfrei“. Die Datei mag zwar komprimiert sein, aber alle verlustfreien Formate sind in der Lage, dein Bild im Original zu rekonstruieren.

Verlustreiche Bildformate entsprechen ungefähr deinem Originalbild. Ein verlustreiches Bild reduziert beispielsweise die Menge der Farbe in deinem Bild oder durchsucht es nach unnötigen Daten. Diese cleveren technischen Tricks reduzieren in der Regel die Dateigröße, reduzieren möglicherweise aber auch die Qualität deines Bildes.

Typischerweise sind verlustreiche Dateien viel kleiner als verlustfreie und daher ideal für das Internet, wo Dateigröße und Downloadgeschwindigkeit entscheidend sind.

JPEG/JPG

JPEG ist ein verlustreiches Rasterformat und steht für Joint Photographic Experts Group –  Das ist das Team, welches es entwickelt hat. Es ist eines der am weitesten verbreiteten Formate im Internet, normalerweise für Fotos, E-Mail-Grafiken und große Web Bilder wie Bannerwerbungen. JPEG Bilder sind komprimiert, wodurch die Dateigröße ungemein abnimmt, allerdings werden sie verpixelt und zeigen mehr Artefakte, je mehr man sie komprimiert.

Du solltest JPEG nutzen, wenn…

  • ….du es mit Onlinebildern und/oder Illustrationen zu tun hast. JPEGs bieten die größte Flexibilität bei der Rasterbearbeitung und Komprimierung und machen sie zum idealen Format für Web Bilder, die man schnell runterladen können muss.
  • …du Bilder und/oder Illustrationen drucken willst. Mit einer hohen Auflösung bei geringer Komprimierung sind JPEGs perfekt für das Bearbeiten und Drucken.
  • …du schnell ein Vorschaubild an einen Kunden schicken musst. JPEGs können stark verkleinert werden, was sie ideal für E-Mails macht.

Nutze JPEG nicht, wenn…

  • ….du eine Webgrafik mit Transparenz brauchst. JPEGs haben keinen Alphakanal und müssen einen Hintergrund haben. GIF und PNG eignen sich am besten für Transparenz.
  • …du ein editierbares Bild mit Ebenen benötigst. JPEGs sind ein flaches Bildformat, was bedeutet, dass alle Bearbeitungen in einer Bildebene gespeichert werden und dies nicht rückgängig gemacht werden kann. Ziehe dafür eine PSD (Photoshop) Datei oder ein komplett editierbares Bild in Betracht.

GIF

GIF ist ein verlustfreies Rasterformat und steht für Graphics Interchange Format. Die große Frage: Wie spricht man es richtig aus? Der Entwickler des GIF sagt, man spricht das G wie das J in „Jelly Beans“ aus, also „JIF“. Der Autor dieses Artikels (und die meisten anderen Menschen) sagen GIF, da es mit einem „G“ beginnt. Aber wir überlassen das ganz euch. GIF ist ebenfalls ein weit verbreitetes Format für Web Bilder und wird in der Regel für animierte Grafiken wie Bannerwerbung, E-Mail Bilder und Social Media Memes verwendet. Obwohl GIFs verlustfrei sind, können sie die Menge der Farb- und Bildinformationen stark reduzieren, wodurch sich wiederum die Dateigröße verringert.  

giphy

Du solltest GIF nutzen, wenn…

  • …du eine Web Animation erstellen willst. GIFs enthalten alle animierten Frames und Zeitinformationen in einer einzigen Datei. Bildbearbeitungsprogramme wie Photoshop machen es leicht, eine kurze Animation zu erstellen und diese als GIF zu exportieren.
  • …du Transparenz benötigst. GIF Bilder haben einen Alphakanal, der transparent sein kann. So kannst du dein Bild auf jedem beliebigen farbigen Hintergrund platzieren.
  • …du eine kleine Datei brauchst. Die Komprimierungstechnik im GIF Format erlaubt es, Bilddateien erheblich zu verkleinern. Für jedes einfache Icon und jede Webgrafik ist GIF das beste Dateiformat.

Nutze GIF nicht, wenn…

  • …du ein Bild in Fotoqualität benötigst. Obwohl GIFs hochauflösend sein können, sind sie auf 256 Farben beschränkt (es sei denn, du kennst ein paar Tricks). Fotos enthalten normalerweise tausende Farben und wirken kontrastlos und weniger lebendig (und manchmal komisch wegen der Farbänderungen) aus, wenn man sie in GIF konvertiert.
  • …du ein Bild drucken musst. Aufgrund der begrenzten Farben fehlt den meisten gedruckten Fotos Tiefe. Wenn du Fotos drucken musst, schau dir TIFF, PSD und JPG an.
  • …du ein editierbares Bild mit Ebenen brauchst. GIFs sind ein flaches Bildformat, was bedeutet, dass alle Bearbeitungen in einer Bildebene gespeichert werden und dies nicht rückgängig gemacht werden kann. Ziehe dafür eine PSD (Photoshop) Datei oder ein komplett editierbares Bild in Betracht.

PNG

PNG ist ein verlustloses Rasterformat und steht für Portable Network Graphics. PNGs sind die GIFs der neuen Generation. Dieses Format hat eine eingebaute Transparenz, kann aber auch höhere Farbtiefen anzeigen und somit Millionen von Farben. PNGs sind ein Web Standard und entwickeln sich rasend schnell zum gängigsten Bildformat im Internet.

Du solltest PNG nutzen, wenn…

  • …du hochqualitative transparente Webgrafiken benötigst. PNG Bilder haben einen variablen Alphakanal, der jeden Grad an Transparenz haben kann (im Gegensatz zu GIF, bei denen man die Transparenz lediglich ein- und ausschalten kann). Außerdem hat man durch die größere Farbtiefe ein lebendigeres Bild als bei GIF.
  • …du Illustrationen mit begrenzten Farben hast. Obwohl jedes Bild gehen würde, eignen sich PNGs am besten für Bilder mit einer kleinen Farbpalette.
  • du eine kleine Datei brauchst. PNG Dateien können unglaublich klein werden – besonders Bilder, die aus einfachen Farben, Formen oder Text bestehen. Damit sind sie das ideale Format für Webgrafiken.

Nutze PNG nicht, wenn…

  • …du mit Bildern und Illustrationen arbeitest. Dank der hohen Farbtiefe von PNG kann das Format locker mit hochauflösenden Fotos umgehen. Allerdings, da es ein verlustfreies Format ist, können die Dateien sehr groß werden. Wenn du mit Fotos im Internet arbeitest, entscheide dich lieber für JPEG.
  • du es mit einem Druckprojekt zu tun hast. PNG Grafiken sind für den Bildschirm optimiert. Man kann ein PNG definitiv drucken, aber mit einem JPEG (verlustreich) oder TIFF bist du besser dran.

TIFF/TIF

TIFF ist ein verlustfreies Rasterformat und steht für Tagged Image File Format. Wegen seiner extrem hohen Qualität wird dieses Format hauptsächlich in der Fotografie und dem Desktop-Publishing verwendet. Dir werden TIFF Dateien wahrscheinlich begegnen, wenn du ein Dokument scannst oder ein Foto mit einer professionellen Kamera schießt. Beachte dass TIFF Dateien auch als „Container“ für JPEG Bilder dienen können. Diese Dateien werden sehr viel kleiner als traditionelle TIFF Dateien, welche normalerweise sehr groß sind.

Du solltest TIFF nutzen, wenn…

  • …du hochqualitative Grafiken für den Druck brauchst. Zusammen mit RAW sind TIFF Dateien das Grafikformat mit der höchsten Qualität. Wenn du Fotos druckst – besonders bei riesigen Größen – nutze dieses Format.
  •  …du etwas in hoher Qualität scannst. TIFF für Scans von Dokumenten und Bildern zu nutzen stellt sicher, dass du die bestmögliche Datei erhältst, mit der du arbeiten kannst.

Nutze TIFF nicht, wenn…

  • du mit Webgrafiken arbeitest. Während viele Webbrowser das Format unterstützen, sind TIFF Dateien doch für den Druck optimiert. Entscheide dich für JPEG oder PNG, wenn du Bilder in hoher Qualität im Internet brauchst.

RAW

RAW Bilder enthalten alle unverarbeiteten Daten, die von einer Digitalkamera oder einem Scanner aufgenommen werden. Normalerweise werden Bilder verarbeitet (Farben, Weißabgleich, Belichtung usw. werden angepasst) und dann in ein anderes Format konvertiert und komprimiert (z. B. JPEG oder TIFF). RAW Bilder bewahren die unverarbeiteten und verarbeiteten Daten in zwei getrennten Dateien auf. Somit hast du ein Bild in der höchstmöglichen Qualität, das du mit einem Programm wie Photoshop ohne Verluste bearbeiten kannst. Es gibt dutzende RAW Formate, aber die gängigsten sind CRW (Canon), NEF (Nikon) und DNG (Adobe).

acr-screenshot
via Adobe

Du solltest RAW nutzen, wenn…

  • …du Bilder aufnimmst und bearbeitest. Vergewissere dich, dass deine Kamera auf RAW gestellt ist, um das vielseitigste Bild aufnehmen kannst. Nutze dann ein kompatibles Bildbearbeitungsprogramm, um dein Bild anzupassen.

Nutze RAW nicht, wenn…

  • …du mit Webgrafiken arbeitest. RAW wurde für Bildbearbeitung entwickelt. Wenn du bereit bist, deine Bilder ins Netz zu stellen, konvertiere sie zu JPEG.
  • …du bereit bist, sie auszudrucken. Viele Drucker akzeptieren keine RAW Dateien, also konvertiere sie zuerst in JPEG oder TIFF.

PSD

PSD ist ein proprietäres Bildformat mit Ebenen und steht für Photoshop Document. Dies sind originale Designdateien, die in Photoshop erstellt werden und komplett bearbeitbar sind mit mehreren Ebenen und Bildkorrekturen. PSD Dateien werden hauptsächlich verwendet, um Rastergrafiken zu erstellen und zu bearbeiten, aber können ebenfalls Vektorebenen enthalten und sind daher extrem flexibel für eine ganze Reihe von Projekten. Eine PSD Datei kann in eine Vielzahl von Bildformaten exportiert werden, einschließlich aller oben aufgeführten Rasterformate.

screen-shot-2016-10-19-at-3-10-07-pm

Du solltest PSD nutzen, wenn…

  • …du Fotos retuschieren musst. Du musst die Farben eines Bildes korrigieren? Oder eine Textebene hinzufügen? PSD = Fotos.
  • …du Illustrationen für Digital oder Druck bearbeiten musst. Das kann ein Foto sein, ein Bild, eine Zeichnung oder sonst was. Photoshop ist das richtige Werkzeug, um sicherzustellen, dass jede Linie, jeder Schatten und jede Textur an der richtigen Stelle ist.
  • …du digitale Bilder fürs Internet, wie Bilder in sozialen Medien, Bannerwerbung, E-Mail-Header, Videos etc. benötigst. Das Erstellen dieser Bilder mit Photoshop stellt sicher, dass sie die richtige Größe haben und fürs Internet optimiert sind.
  • du eine Website oder Mock-up einer App erstellen musst. Die Ebenen machen es leicht, die UI-Elemente zu verschieben.
  • du schicke Animationen und Videos erstellen willst. Photoshop macht es leicht, einfache Videoclips zusammenzuschneiden und Grafiken, Filter, Text, Animationen und weiteres hinzuzufügen.

Nutze PSD nicht, wenn…

  • …du ein Foto online posten willst oder eine Vorschau an einen Kunden schicken willst. Konvertiere erst, um sicher zu sein, dass der Empfänger das Bild auch sehen kann (und es nicht mehrere Minuten dauert, es herunterzuladen).
  • …du bereit bist, deine Bilder drucken zu lassen. Viele Drucker akzeptieren das PSD Format nicht, also konvertiere sie erst in JPEG oder TIFF.

Vektorgrafiken

Vektorgrafiken sind im Grunde gigantische mathematische Gleichungen und jeder Punkt, jede Linie und Form wird durch seine eigene Gleichung dargestellt. Jeder „Gleichung“ kann eine Farbe, eine Kontur oder Dicke (zusammen mit weiteren Stilen) zugeordnet werden, um diese Formen in Kunst umzuwandeln. Im Gegensatz zu Rastergrafiken sind Vektorgrafiken unabhängig von der Auflösung. Wenn du eine Vektorgrafik verkleinerst oder vergrößerst, werden die Formen größer, aber verlieren keine Details oder werden verpixelt. Da dein Bild immer identisch wiedergegeben wird, unabhängig von der Größe, gibt es so etwas wie eine verlustreiche oder verlustfreie Vektorgrafik nicht.

Walk for life Poster von Adwindesign für Salam_h
Kinderbuchfigur von RVST® for soccerpoet
Logo Design von spoon design

Vektorgrafiken werden in der Regel für Logos, Icons, Schriftsetzen und digitale Illustrationen benutzt. Adobe Illustrator ist in der Branche das Standardbearbeitungsprogramm, welches benutzt wird, um Vektorgrafiken zu erstellen, zu gestalten und zu bearbeiten (obwohl es auch mit Rastergrafiken umgehen kann).

PDF

PDF steht für Portable Document Format und ist ein Bildformat, das dazu verwendet wird, Dokumente und Grafik korrekt anzuzeigen, unabhängig von Gerät, Anwendung, Betriebssystem oder Webbrowser. Im Kern haben PDF Dateien ein leistungsstarkes Vektorgrafik-Fundament, können aber auch alles von Rastergrafiken über Formularfelder bis hin zu Tabellen darstellen. Da es ein beinahe universeller Standard ist, werden PDF Dateien oft von Druckern verlangt, um das finale Design in die Produktion zu geben. Sowohl Adobe Photoshop als auch Illustrator können Dateien direkt als PDF exportieren, was es leicht macht, mit deinem Design anzufangen und es für den Druck vorzubereiten.

Oakland Poster von Martis Lupus
Yoga Poster von Trisixtin für yogawithleo

Du solltest PDF nutzen, wenn…

  • …du bereit für den Druck bist. Wie erwähnt bevorzugen viele Drucker PDF Dateien, da es so allgegenwärtig ist. Besprich dich mit deinem Drucker, um zu erfahren, wie er deine Datei haben will.
  • …du Dokumente im Internet darstellen willst. Man würde PDF nicht für ein einzelnes Logo oder Icon verwenden, aber es eignet sich hervorragend für Poster, Flyer, Magazine und Booklets. PDFs enthalten dein komplettes Design in einem Paket, wodurch es sich ohne Probleme anschauen, downloaden und drucken lässt.

Nutze PDF nicht, wenn…

  • …du dein Design bearbeiten musst. PDFs sind großartige Container, aber nutze andere Anwendungen für die Inhalte. Du kannst Rastergrafiken mit Photoshop und Vektorgrafiken mit Illustrator bearbeiten. Wenn du fertig bist, kannst du sie in einer PDF Datei bündeln, um sie anzusehen.

EPS

EPS ist ein Bildformat, das für Encapsulated PostScrip steht. Obwohl es hauptsächlich als Vektorformat verwendet wird, kann eine EPS Datei sowohl Vektor- als auch Rastergrafiken enthalten. In der Regel enthält eine EPS Datei ein einziges Designelement, welches in größeren Designs benutzt werden kann.

Du solltest EPS nutzen, wenn…

  • …du ein Vektorlogo an einen Kunden, Designer oder Drucker schicken musst. Mit einer EPS Datei musst du dir keine Sorgen darum machen, wo das Logo platziert oder gedruckt wird. Egal wie groß es ist, es wird immer in der korrekten Auflösung dargestellt.

Nutze EPS nicht, wenn…

  • …du es mit Fotografien oder Illustrationen zu tun hast. EPS kann mit Rastergrafiken umgehen, aber ist hauptsächlich für Vektorgrafiken. Arbeite mit PSD, TIF oder JPEG, wenn du ein Fotoprojekt hast.
  • …du ein Bild fürs Internet brauchst. Exportiere es erst als JPEG, PNG oder GIF.

AI

AI ist ein proprietäres Vektorgrafikformat und steht für Adobe Illustrator. Das Format basiert sowohl auf EPS als auch PDF Standards, die von Adobe entwickelt wurden. Ebenso wie diese Formate sind AI Dateien vornehmlich ein Vektor-basiertes Format, obwohl sie auch eingebettete oder verlinkte Rastergrafiken enthalten können. AI Dateien können sowohl als PDF als auch EPS Dateien exportiert werden (für einfaches Ansehen und Drucken) und ebenso als JPEG, PNG, GIF, TIFF und PSD (für Verwendung im Internet und weitere Bearbeitung).

screen-shot-2016-10-19-at-3-41-15-pm

Du solltest AI nutzen, wenn…

  • …du ein Vektordesign bearbeiten musst. AI Dateien ermöglichen es dir, einzelne Elemente mit nur einem oder zwei Klicks zu bewegen und zu verändern.
  • …du ein Logo, Icon oder Marken-Maskottchen erstellen musst. Jede Vektorform und Linie, die in Illustrator erstellt wird, kann beliebig vergrößert werden und eignet sich daher ideal für Bilder, die auf viele unterschiedliche Arten verwendet werden.
  • …du eine einseitige Drucksache willst. Illustrator ist perfekt für Poster, Visitenkarten, Flyer und Postkarten, die mit anderen Rastergrafiken kombiniert werden können.
  • …du eine Schrift für ein Logo setzen musst. Die Funktionen zum Schriftsetzen in Illustrator sind unglaublich leistungsstark und ermöglichen es, Text auf jede erdenkliche Art zu dehnen, verzerren und transformieren.

Nutze AI nicht, wenn…

  • …du Bilder bearbeiten musst. Wenn eine Rastergrafik (Foto oder Illustration) in einer Komposition verwendet wird, verfügt Illustrator nur über eine begrenzte Anzahl an Werkzeugen, um dieses Bild direkt zu bearbeiten. Photoshop (PSD) kann umfangreichere Anpassungen wie Farbe, Kontrast und Helligkeit vornehmen.