Grafikformate

Es gibt verschiedene Dateiformate zur Speicherung von Bildern am Computer. Sie unterscheiden sich in Anwendungsgebiet (Braucht es höchste Qualität oder nimmt man gewisse Qualitätseinbussen in Kauf? Soll das Bild gedruckt werden oder nur am Bildschirm angezeigt (und in welcher Grösse)? Welches Programm soll mit dem Bild umgehen können? Braucht es Transparenz oder nicht?) und – oft im Zusammenhang mit der Anwendung – dem Speicherplatzbedarf. Nur wenn man zumindest grob versteht, wie die Grafikformate aufgebaut sind, kann man fundiert entscheiden, welches man in einem bestimmten Fall benutzen sollte.

Unterschiedliche Prinzipien

Für Grafikformate sind zwei verschiedene Prinzipien gebräuchlich, das Raster- und das Vektorprinzip.

Rastergrafik vs. Vektorgrafik

Erstellt von Seraina Hohl

Es gibt zwei grundsätzlich unterschiedliche Herangehensweisen für die binäre Repräsentation von Bildinformationen:

Rastergrafiken, bei denen schlicht für jedes Pixel eine Farbe angegeben wird. Wichtige Merkmale einer Rastergrafik sind die Auflösung (also die Dimensionen des Rasters, ausgedrückt als Breite x Höhe) sowie die Codierung der Farbangaben (z.B. Farbraum und Farbtiefe).
Vektorgrafiken, bei denen die grafischen Inhalte mithilfe geometrischer Formen (allgemeiner: Kurven bzw. Pfade) und zugehöriger Formeln beschrieben werden. Angegeben (meist als Text in einem XML-Format) wird jeweils die Art der Form (z.B. Kreis, Polygon oder Bezierkurve) und zugehörige Eigenschaften (z.B. Mittel- End- oder Ankerpunkte, Farben, Strichbreiten), ggf. können auch Transformationseigenschaften und damit Animationen beschrieben werden.

Je nach Bildinhalt und Einsatzzweck eignet sich die eine oder die andere Herangehensweise. Rastergrafiken können einfach (pixelweise) verändert und dargestellt werden – beispielsweise wird einem typischen Bildschirm mindestens 60 Mal pro Sekunde (=60 Hz) für jedes einzelne Pixel die Information geschickt, welche Farbe es anzeigen soll. Ein Nachteil von Rastergrafiken liegt im hohen Speicherplatzbedarf. Zur Kompensation dieses Problem gibt es komprimierte Grafikformate (z.B. JPG, GIF oder PNG), die verschiedene Techniken anwenden, um die pixelbasierten Bildinformationen effizienter zu beschreiben, dabei aber einen gewissen Informationsverlust in Kauf nehmen.
Rastergrafiken sind einfach zu erstellen, z.B. mit einer Digitalkamera oder einem Scanner, aber sie sind immer an eine Auflösung (die Anzahl der Pixel) gekoppelt. Wenn das Bild über diese Auflösung hinaus vergrössert wird, fehlen die Informationen für die zusätzlichen Bildpunkte, also wird das Bild oder der Ausdruck unscharf bzw. verpixelt.
Hier spielt der grosse Vorteil von Vektorgrafiken: Weil die Inhalte als Formeln beschrieben sind, kann die pixelweise Darstellung (z.B. für Bildschirm oder Drucker) für beliebige Auflösungen ausgerechnet werden, das Bild bleibt immer scharf. Wichtig ist das unter anderem für Schriftarten: Wenn die Form der Buchstaben als Vektorgrafik gespeichert ist, kann dieselbe Datei für beliebige Schriftgrössen verwendet werden. Allerdings bieten sich Vektorgrafiken nur an, wenn sich die grafischen Inhalte für eine solche “geometrische” Beschreibung eignen. Zur Erstellung braucht man spezielle Vektorgrafikprogramme.

Analogie

Die beiden Herangehensweisen entsprechen grob dem Unterschied zwischen einem Portraitfoto und einem Scherenschnitt der Silhouette.

Bekannte Formate

Für alleinstehende Bilder werden meist komprimierte Rastergrafikformate benutzt, die zusätzlich noch ein paar Tricks anwenden, um beim Beschreiben der vielen Pixel Speicherplatz zu sparen – und dabei ggf. die Bildqualität ein wenig reduzieren. Die üblichsten sind

JPG, bei dem LAB-Farbverläufe in kleinen quadratischen Flächen beschrieben werden.
Geeignet für fotorealistische Motive mit vielen feinen Farbabstufungen.
GIF, bei dem gleichfarbige Pixelblöcke mithilfe indizierter Farben beschrieben werden.
Geeignet für Bilder mit eher wenigen Farben, gleichfarbigen Flächen, scharfen Kanten und ggf. transparenten Pixeln.
PNG, eine moderne Weiterentwicklung der Ansätze von GIF, kann auch teilweise transparente Pixel speichern.
Eignung wie GIF, kann aber ein wenig besser mit Verläufen und Abstufungen umgehen – im Gegensatz zu GIF kann PNG allerdings nicht mehrere, wie ein Filmchen abspielbare Bilder speichern.

Bekannte reine Rastergrafikformate (mit sehr hohem Speicherplatzbedarf) sind

RAW, in dem die Sensordaten der Kamera direkt gespeichert sind (je nach Kamera unterschiedlich).
DNG, Adobes Versuch, ein herstellerübergreifendes RAW-Format durchzusetzen.
TIFF, für verlustfreies Speichern von qualitativ sehr hochwertigen Rastergrafiken, z.B. für farblich exakte Ausdrucke.
BMP bzw. PICT, einfache Rastergrafikformate von Microsoft bzw. Apple, ohne Tricks oder Vorteile, daher wenig benutzt.

In den meisten Bildbearbeitungsprogrammen kann man auswählen, in welchem Format man sein Bild gerne speichern möchte – oft gibt es noch ein paar genauere Einstellungen für die Komprimierung mit dem entsprechenden Format.

Aufgabe

Im Programm Photoshop (Express) kann man in einer Vorschau genau nachvollziehen, welchen Einfluss die Wahl des Formats und zugehöriger Kompressionseinstellungen auf Speicherplatzbedarf und Bildqualität haben. Die Anleitung FürWebSpeichern.pdf erklärt, wie das geht – am Beispiel der beiden Originalbilder BspJPG.bmp und BspGIF.bmp.

Praktische Einblicke

Aufgabe

Reine Rastergrafikformate sind sehr simpel. Mit dem Interactive pixel-viewer kann man so weit in ein Bild hineinzoomen, dass man die einzelnen Pixel (und deren hexadezimale RGB-Werte) sieht.

Aufgabe

Weil das Prinzip reiner Rastergrafiken so einfach ist, kann man im Interactive pixelation von Hand mit den in der Datei enthaltenen Bits experimentieren.

Im Arbeitsblatt RastergrafikManuell.pdf finden sich Anregungen zu sinnvollen Experimenten.

Aufgabe

Vektorgrafikformate sind auch nicht schwer zu verstehen – genau genommen enthalten sie einfach Text, der das Bild mithilfe geometrischer Formen beschreibt. Das kann man sich (als Text) anschauen – und auch abändern. Die Anleitung SVG_bearbeiten.pdf erklärt, wie man eine .svg-Datei (z.B. Raetsel.txt) hackt.

Damit der Texteditor auf dem Mac Quelltexte (bspw. HTML, RTF, SVG) bearbeitbar anzeigt, wählen Sie beim Öffnen die Option „Formatierungsbefehle ignorieren“.

Wie komplexere Bezier-Kurven in SVG notiert werden, kann man mit dem Interactive Bezier in SVG herausfinden.

Aufgabe

Echte Gif-Dateien sind schon etwas komplizierter, aber man kann ja selbst ein ähnliches Format erfinden: Das Aufgabenblatt GifManuell.pdf enthält zugehörige Beschreibungen und Aufgaben.

Aufgabe

Das JPG-Format ist am schwierigsten zu verstehen. Die Grundidee der Codierung von Pixel-Quadraten über die Gewichtung von vordefinierten Verläufen kann man mit dem Interactive jpg-compression gut nachvollziehen (gezeigt nur für den Luminanz-Kanal des LAB-Farbraums).

Dazu gehört auch ein puzzle Modus, in dem man selbst versuchen kann, die Gewichtungen einzustellen.

Aufgabe

Die Auswirkungen reduzierter Farbtiefe kann man mit dem Interactive image-bit-comparer nachvollziehen (ggf. an eigenen Bildern).

Dazu gehört auch ein interaktiver Modus, in dem man die Farbtiefe pro RGB-Kanal selbst wählen kann.