Document ID: /fineweb-2-swissfilter-quality_10-filterrobots/filtered/03220.jsonl.gz/2391

JPG, PNG, PDF, EPS, GIF, AI, SVG, PSD oh mann…
Zunächst einmal ist es wichtig zu verstehen, dass es viele unterschiedliche Datei-Formate gibt. Einige davon sind Textdokumente (DOCX), Tabellenkalkulationen (XSLX), Programmiercode (CS), Bilder (wie oben), Musik (MP3), Videos (MOV), usw. Auf dieser Seite konzentrieren wir uns auf grafische und bildbezogene Dateiformate, die wir alle wissentlich (oder unwissentlich) verwenden.
Einfach ausgedrückt – Grafik- und Bildformate sind in eine von zwei Kategorien unterteil:
- Bitmap– oder “Raster“-Formate, die für das Web oder ein Textdokument genutz werden
- Vektor-Formate, die für den Druck sind.
Alle Bild-Formate, ob JPG, PNG, PDF, EPS, usw., sind entweder eine Bitmap- oder ein Vektor-Format, und es gibt einen grossen Unterschied zwischen den beiden.
Bitmap-Formate sind die, die als Raster aufgebaut sind. Also zum Beispiel 800 x 600 Pixel. Diese sehen grossartig aus, bis sie skaliert (vergrössert oder verkleinert) werden. Den beim skalieren werden sie pixelig und unscharf.
Vektor-Formate sind die Formate, die ohne Qualitätsverlust skaliert werden können. Vektor-Formate werden innerhalb mathematischer Linien statt in Pixeln erstellt, so dass sie, wie das Bild in diesem Abschnitt zeigt, immer scharf bleiben und nicht wie Bitmap-Formate auf eine bestimmte Breite oder Höhe beschränkt sind. Somit sehen Vektro-Grafiken immer optimal aus.
Hattest du schon einmal ein Bild oder ein Design, das im Web grossartig aussah, aber schrecklich aussah, wenn du es vergrössert oder gedruckt hast? Genau das ist der Unterschied. Wichtig zu wissen ist, dass Programme wie Adobe Photoshop “Bitmap”- oder “Raster”-Programme sind, während Adobe Illustrator, In Design und einige weitere Anwendungen “vektorbasierte” Programme sind.
Bitmap-Formate
Bitmap-Formate sind auf eine bestimmte Grösse eingestellt und «pixelig», wenn sie skaliert werden.
Dateiformat: Bitmap (oder Raster)
Farbraum: RGB (Rot, Grün, Blau)
Auflösung: Zum Beispiel 800 x 600 Pixel
Dateigrösse: Je mehr Pixel ein Bild hat, desto mehr Speicherplatz braucht das Bild. (Einfach ausgedrückt)
Beliebte Bitmap-Formate sind:
JPEG oder JPG - Joint Photographic Experts Group
Das wohl häufigste verwendete Bildformat. Es kann für das Web sehr klein oder für den Druck sehr hochauflösend gespeichert werden.
PNG - Portable Network Graphics
Dieses Bildformat kann einen transparenten Hintergrund haben. Es ist ideal für das Web, aber nicht für den Druck.
GIF - Graphics Interchange Format
GIF’s sind animierte Bildformate, die häufig über soziale Medien oder Messaging-Systeme versendet werden.
PSD - Photoshop File
Bei einem PSD handelt es sich um eine Datei die von Photoshop erstellt wird. Dieses Format sollte im Photshop zu einem JPG oder PNG exportiert werden, bevor du es online stellst.
RAW - Bildformat von einer Kamera
Beliebtes Bildformat von Fotografen. Im Gegensatz zu JPG sind im RAW-Bildformat Daten der Kamera, wie z.B. Informationen zur verwendeten Kamere-Linse oder Kamera-Sensor, gespeichert. Ausserdem werden in diesem Format mehr Informationen zum Farbraum gespeichert.
Es gibt weitere Bildformate wie z.B. TIFF und BMP, aber die oben beschriebenen Formate sind die, die am häufigsten verwendet werden, und mit denen du vertraut sein solltest.
Vektor-Formate
Vektor-Formate wurden erstellt, um ohne Qualitätsverlust skaliert zu werden. Sie werden mit hilfe von mathematischen Linien berechnet. Vektor-Formate lassen sich einfach in Bitmap-Formate exportieren. Umgekehrt funktioniert dies aber nicht!
Dateiformat: Vektor
Farbraum: CMYK (Cyan, Magenta, Yellow, Black)
Auflösung: Wird autoamtisch auf die richtige Grösse skaliert
Dateigrösse: Dies ist stark von dem jeweiligen Dateityp abhängig. Ausserdem spielt es eine grosse Rolle wie viel Inhalt eine solche Datei beinhaltet
Beliebte Vektor-Formate sind:
PDF - Portable Document Format
PDF ist wohl der beliebteste Dateityp zum drucken und versenden. Ein grosser Vorteil an diesem Format ist, dass die Dokumente nach der Erstellung nicht einfach abgeändert werden können.
EPS - Encapsulated Postscript
Ideal für Logos. Oft handelt es bei den Grafiken die in EPS erstellt werden um Grafiken die ein- oder zweifarbig sind, oder, die eine oder mehrere Verläufe haben.
AI - Adobe Illustrator file
Kann für den Druck verwendet werden, sollte aber vor dem Druck in der Regel als PDF oder EPS exportiert werden. Kann auch als JPG oder PNG exportiert werden.
INDD - Adobe Indesign file
Dieses Bildformat wird meistens für Broschüren und Dokumente die zum Druck gedacht sind, verwendet.
SVG - Scalable Vector Graphics
Das SVG-Format eignet sich perfekt für Logos im Web. Da dieses Dateiformat von allen Web-Browsern unterstützt wird, ohne das man dies zuerst in eine andere Datei umformatieren muss.
Auch hier gibt es weitere Vektorbasierte-Formate. Aber die, die hier aufgeführt sind, sind die, mit denen am häufigsten garbeitet wird und mit denen du vertraut sein solltest.
Der Farbraum
Den meisten Menschen ist nicht bewusst, dass es zwei verschiedene Farbräume gibt. Zum einen ist das der RGB-Farbraum (Rot, Grün, Blau) und zum anderen ist das der CMYK-Farbraum (Cyan, Magenta, Yellow, Black). Der Hauptunterschied ist der Anwendungszweck.
Monitoren wie bei PC’s, Notebooks und Smartphones bauen auf dem RGB-Farbraum auf. Das heisst, diese Monitore besitzen für jeden Pixel, den sie darstellen, drei kleine LED’s (oder eine andere Technologie) die Rot, Grün oder Blau sind. Durch das Einschalten oder das Dimmen der jeweiligen LED’s und das Verstärken durch eine Hintergrundbeleuchtung (Backlight), lassen sich Farben beliebig mischen.
Ein Drucker baut hingegen auf dem CMYK-Farbraum auf. Der grosse Unterschied ist, dass ein Blatt Papier ja keine Hintergrundbeleuchtung hat! Um eine Farbe darzustellen, müssen Farben aus dem jeweiligen Toner oder Tinten zusammengemischt werden. Der Nachteil dieser Methode ist, dass nicht so viele Farben wie auf einem Monitor dargestellt werden können. Daher können Bilder die du online gesehen und danach ausgedruckt hast, auf dem Papier ganz anders aussehen.
Stelle also immer sicher, dass du den richtigen Farbraum für den richtigen Anwendungszweck verwendest.
Die Auflösung
Ein sehr wichtiger Aspekt einer Grafik ist die Auflösung. Besonders bei einem Bitmap-Format, da es sich dabei ja um ein Raster-Format handelt. Dieses Raster ist dann in Pixel angegeben. Zum Beispiel 800 x 600 Pixel. Das heisst, es befinden sich 800 Pixel in der Breite und 600 Pixel in der Höhe.
Ein weiterer wichtiger Aspekt der Auflösung ist, auf was für einer Fläche die jeweilige Auflösung dargestellt wird. Der Unterschied siehst du, wenn du zwei PC-Monitore miteinander vergleichst. Ein Monitor mit FullHD-Auflösung (1920 x 1280 Pixel) und ein Monitor mit 4K-Auflösung (3840 x 2160 Pixel), die Beide eine Bildschirm-Diagonale von 27 Zoll haben, sind von der Qualität ganz anders. Auf dem 4K-Monitor ist die Schrift viel klarer, da im Gegensatz zum FullHD-Monitor, auf der geleichen Fläche 4 Mal so viel Inhalt angezeigt wird!
Die Dateigrösse
Die Dateigrösse ist sehr stark mit der Auflösung verknüpft. Bei einer Grafik im Vektor-Format spielt dies aber keine grosse Rolle. Hast du die Datei einmal, verändert sich die Dateigrösse nicht, wenn du die Grafik auf eineren grösseren Auflösung darstellen möchtest. Bei Bitmap-Formaten ist dies jedoch anders. Wenn du die Auflösung einer Grafik änderst wird sich die Dateigrösse automatisch mitanpassen.
Im Normalfall heisst das, dass eine Grafik mit mehr Pixel automatisch mehr Speicherplatz benötigt. Mehr Speicherplatz heisst, es dauert länger bis diese Grafik über das Internet geladen ist.
In den meisten Fällen müssen Bitmap-Bilder nicht grösser als 1920 Pixel (Breit) sein. Diese 1920 Pixel sind schon sehr hoch. Besonders für die Mobile-Ansicht. Da diese ja auch auf einer kleineren Fläche dargestellt wird! Grafiken für den Druck können hingegen 3000, 5000 oder noch mehr Pixel haben. Wenn du z.B. mit deinem Smartphone oder einer Digitalkamera fotografierst, sind die RAW- oder JPG-Dateien sehr gross. Manchmal sind diese Bilder tausende von Pixeln breit und hoch. Und das gleiche gilt für Webseiten, die dir Bilder verkaufen. Wenn du ein Foto kaufst, ist es oft sehr gross, mit einer tatsächlichen Dateigröße von mehreren MB (Megabytes).
Dateigrössen werden in KB (Kilobyte), MB (Megabyte), GB (Gigabyte) oder TB (Terabyte) angegeben. Es gibt auch niedrigere und höhere Dateigrössen, aber diese vier sind die häufigsten, die du sehen wirst. Bitmap-Formate sollten IMMER so klein wie möglich sein (KB). Bei Grafiken für den Druck und hochauflösende Bilder wirst du meistens Dateigrössen in MB sehen.
Wenn du zum Beispiel ein Bild mit deiner Digitalkamera aufnimmst und auf deinen Computer lädst, um es auf deiner Webseite zu veröffentlichen, könnte es 4000 Pixel breit und 6,5 MB gross sein. Das ist eine riesige Datei, die deine Webseite dramatisch verlangsamt und die vor der veröffentlcihung oder dem Versand per E-Mail optimiert werden muss. Hier gilt also: Stelle sicher, dass du deine Bilder “optimierst” und “für das Web speicherst”, bevor du sie versendest, als E-Mail anhängst oder irgendetwas damit online machst.
Zur Erinnerung:
- Stelle sicher, dass dein Logo als Vektordatei erstellt wurde. (Denke daran, dass Vektordateien als Bitmap / Raster-Formate wie JPG, PNG usw. gespeichert werden können, aber nicht umgekehrt!)
- Alle Bilder, die von einer Kamera aufgenommen werden, werden riesig sein und müssen für das Web optimiert werden, BEVOR du sie auf deiner Webseite veröffentlichst oder an eine E-Mail anhängst.
- Wenn du Bilder anhängst oder Dateien versendest, achte auf den Dateityp, die Grösse und die Auflösung, um zu sehen, ob sie vor dem Versenden optimiert werden müssen.
- Schicke kein kleines JPG-Logo an einen Drucker, da es sich um ein Bitmap-Format handelt, das verpixelt und verzerrt wird wenn es sakaliert wird. Sende es im Vektor-Format.