Einleitung
In der heutigen digitalen Welt spielen Bilder eine zentrale Rolle in unserer täglichen digitalen Umwelt und der Kommunikation. Um Bilder in digitalen Medien darzustellen, werden verschiedene Arten von Grafikformaten und Codierungen verwendet. In diesem Teil des Themas werden wir uns mit Rastergrafiken, digitaler Farbdarstellung und Vektorgrafiken beschäftigen.
Rastergrafiken
Definition
Eine Rastergrafik, auch Pixelgrafik (englisch raster graphics image), ist eine Form der Beschreibung eines Bildes in Form von computerlesbaren Daten. Rastergrafiken bestehen aus einer rasterförmigen Anordnung von so genannten Pixeln (Bildpunkten), denen jeweils eine Farbe zugeordnet ist. Die Hauptmerkmale einer Rastergrafik sind daher die Bildgröße (Breite und Höhe gemessen in Pixeln, umgangssprachlich auch Bildauflösung genannt) sowie die Farbtiefe.
Die einfachste Form einer Rastergrafik ist ein Schwarz/Weiss Bild, bei welchem jeder Pixel durch eine 0 (schwarz) oder eine 1 (weiss) dargestellt werden kann.
Etwas moderner, aber noch immer etwas veraltet aussehend sind Graustufenbilder: 
Der Inhalt dieser Datei als Text angezeigt, könnte in etwa so aussehen:
P2
24 36
255
129 156 178 157 181 205 205 207 209 212 217 59 34 90 193 219 221 224 226 228 229 229 226 223
168 174 182 85 66 181 209 211 213 215 209 28 34 31 70 217 221 223 225 227 228 228 226 222
202 204 207 179 53 94 215 220 220 222 223 76 41 48 49 157 224 228 228 228 227 227 225 220
218 219 222 225 110 39 119 221 224 225 227 111 48 37 58 84 228 232 232 230 231 231 229 224
225 226 227 228 183 56 59 116 211 224 221 122 45 32 56 55 205 236 235 234 235 235 234 232
228 228 230 229 225 96 38 64 105 200 223 147 57 38 47 48 135 235 235 233 231 229 228 230
232 232 233 232 231 160 51 44 64 92 182 194 55 51 34 42 102 233 231 228 225 224 223 226
236 237 235 234 235 225 85 52 43 52 58 165 81 50 29 49 89 232 233 230 228 228 228 230
235 235 233 234 234 233 185 66 62 38 36 100 100 86 42 58 79 173 206 230 230 231 233 234
233 233 231 232 234 232 231 158 62 43 57 77 86 117 43 66 63 105 141 191 231 224 232 232
230 233 232 232 233 233 231 208 78 79 82 49 50 98 49 73 49 79 60 161 218 198 215 224
231 231 232 233 234 234 233 228 130 87 66 50 36 48 69 77 26 87 56 89 156 105 149 209
232 232 233 233 234 233 232 215 83 62 55 68 58 44 42 62 38 95 86 82 90 74 66 136
235 234 233 233 234 231 229 138 58 51 61 55 64 58 47 57 41 84 108 91 69 77 75 64
237 235 231 232 232 230 191 70 59 66 83 81 76 77 75 55 50 63 74 97 72 61 67 67
235 234 233 231 230 229 147 77 78 70 54 62 78 84 74 86 50 60 59 78 82 55 64 58
231 230 231 228 226 209 106 75 63 73 70 69 70 77 74 76 63 59 35 54 71 56 63 48
229 230 230 228 226 185 96 65 64 65 43 63 68 69 69 48 57 61 37 39 34 47 60 58
228 231 230 227 224 217 101 66 52 28 99 50 47 58 30 38 55 59 53 36 32 38 52 70
228 228 226 222 219 216 91 77 42 63 90 109 106 76 43 41 58 56 51 33 31 38 48 59
229 229 226 224 220 203 104 75 52 70 59 71 66 64 55 64 55 64 58 20 29 24 37 50
235 235 231 229 228 201 94 66 51 51 60 60 71 64 56 61 55 57 50 31 25 27 30 54
236 237 235 235 234 202 91 73 52 62 70 69 63 53 53 66 57 68 48 37 22 26 26 44
230 230 230 233 234 187 101 84 60 59 57 60 51 49 47 65 58 56 40 41 29 20 30 46
223 223 224 228 229 226 176 191 111 49 55 64 53 53 60 61 51 33 25 32 33 23 33 41
221 223 223 225 227 238 246 243 219 93 49 50 50 41 61 69 194 68 21 30 31 32 25 34
226 228 226 226 227 243 244 236 233 184 71 42 43 65 65 200 228 222 63 31 32 36 33 26
231 231 229 227 225 235 199 221 214 166 129 58 62 69 206 232 230 229 95 42 37 30 30 19
226 226 224 224 230 191 136 115 177 148 147 57 69 184 228 230 232 237 163 36 35 31 26 21
218 225 225 231 237 139 70 49 112 152 90 44 188 233 234 231 230 230 226 104 31 24 22 18
225 233 230 229 235 207 64 51 67 92 124 175 235 237 237 232 230 228 226 224 91 21 20 19
221 224 220 213 219 217 193 86 91 211 227 230 234 235 230 226 223 227 233 232 219 58 29 25
215 216 217 219 221 222 221 223 227 226 226 227 227 218 221 222 217 223 228 225 226 119 32 30
223 222 224 224 228 225 221 220 223 221 218 216 217 212 214 218 215 216 219 220 222 146 37 28
211 213 211 212 225 225 223 218 216 213 208 207 216 217 219 220 221 224 225 222 223 181 43 28
210 206 165 143 192 214 222 217 216 211 215 213 215 218 222 222 223 221 219 217 220 221 57 32Schau dir den Text im Vollbildmodus genau an. Was erkennst du? welche Zahlen bedeuten wohl hell/dunkel?
Farbdarstellung am Computer
Für die digitale Verarbeitung müssen Farben in Zahlen umgewandelt werden. Das geschieht, indem die Farben in verschiedene Komponenten, sogenannte Farbkanäle aufgeteilt werden. Pro Pixel kann so die Intensität je Farbkanal als Zahl bestimmt werden. Eine einzelne Farbe eines Pixels ist also im Grunde genommen immer eine Farbmischung.
Die zwei wichtigsten Ansätze, wie diese Aufteilung in verschiedene Kanäle erfolgt, werden unten vorgestellt.
RGB-Farbmodell
Das RGB-Farbmodell basiert auf der Funktionsweise des menschlichen Auges. Dieses nimmt Farben mit Hilfe von drei Arten von sogenannten Zäpfchen wahr, die für Licht unterschiedlicher Wellenlängen empfindlich sind. So werden vom Menschen die Grundfarben Rot, Grün und Blau wahrgenommen.
Bild: Sgbeer, Wikimedia Commons
Diese Eigenschaft des Auges wird bei der additiven Farbdarstellung ausgenutzt, indem sich überlagernde Lichtquellen in den drei Grundfarben Rot, Grün und Blau verwendet werden. Durch die Regulierung der Helligkeit der einzelnen Lichtquellen können sämtliche Farben erzeugt werden.
Dieses Farbmodell kommt überall dort zum Einsatz, wo Licht verwendet wird, um ein Bild zu erzeugen, insbesondere bei Bildschirmen und Videoprojektoren («Beamer»). Die Farben auf einem Bildschirm werden erzeugt, indem drei nahe beieinanderliegende Leuchtdioden in den Farben Rot, Grün und Blau in unterschiedlicher Helligkeit leuchten. Ein solches Trio von Leuchtdioden wird Pixel genannt.
Bild: 10binary, Openclipart
Bild: Kallerna, Wikimedia Commons. Hier sieht man eine sehr stark vergrösserte Aufnahme eines Monitors. Die drei Lämpchen (RGB) nebeneinander ergeben jeweils ein Pixel, also ein Farbpunkt auf dem Monitor.
Umgekehrt kann man bei einem Bild die Rot-, Grün- und Blauanteile jedes Bildpunkts bestimmen. Man sagt, dass man das Bild in Rot-, Grün- und Blaukanal aufteilt:
Bild: mygymer
Im RGB-Farbsystem wird eine Farbe definiert, indem die Helligkeit der Rot-, Grün- und Blauanteils durch eine Zahl zwischen 0 und 255 ausgedrückt wird.
Um eine Farbe binär darzustellen, werden die binären Darstellungen der Zahlen für Rot, Grün und Blau nacheinander aufgeschrieben. So hat beispielsweise die Farbe mit den RGB-Werten 255, 220, 150 und die binäre Darstellung 11111111 11011100 10010110.
Auf der folgenden Seite kann mit RGB Farben gespielt und gemischt werden: https://www.w3schools.com/colors/colors_rgb.asp
Farbbilder
Bei farbigen Bildern im RGB-Farbmodell werden pro Pixel die Werte der drei Farbkanäle Rot, Grün und Blau gespeichert.
Dabei stehen für jeden Farbkanal (Rot, Grün, Blau) 8 Bit, also ein Byte zur Verfügung. Eine Farbe besteht also aus 3 Byte: `111100 001100 1111000
Wir erinnern uns an das Binärsystem und merken, dass mit 8 Bit eine Zahl zwischen 0 und 255 dargestellt werden kann. Ein Farbpunkt im RGB-Modell kann also auch so dargestellt werden:
(60, 12, 240)
(R, G, B)Wobei eine höhe Zahl in einem Kanal bedeutet, dass die Farbe einen hohen Anteil dieses Kanals hat.
Dateiformate
Um ein Bild zu speichern könnte man nun also für jeden Pixel einfach die drei Zahlen für Rot, Grün und Blau als Binärzahl speichern und alle diese Zahlen aller Pixel aneinanderreihen. Bei Bildern mit grosser Auflösung würde dies aber extrem viel Speicher benötigen. Hier kommen Dateiformate oder auch Bildcodierungen ins Spiel. Diese verwenden schlaue Programmierungen um Bilder mit weniger Speicherplatz zu speichern.
Codierungen können z.B. die Datenmenge reduzieren, in dem Sie grosse Flächen der selben Farbe zusammenfassen.
Typische Rastergrafikformate/Bildcodierungen sind:
- JPEG: Ideal für Fotos, unterstützt Komprimierung, aber verliert Details.
- PNG: Unterstützt Transparenz, verlustfreie Komprimierung, gut für Grafiken und Logos.
- GIF: Unterstützt Animationen und Transparenz, hat jedoch eine begrenzte Farbpalette (256 Farben).
Komprimierung
Die meisten Dateiformate komprimieren die Daten. Das bedeutet, dass die Datenmenge reduziert wird. Wir unterscheiden dabei zwischen verlustfreier und verlustbehafteter Komprimierung.
Verlustbehaftete Komprimierung
Bei dieser Art der Komprimierung verliert das Bild an Qualität, es gibt einen Qualitätsverlust. Je nach Grösse des Bildes und Bildschirm, ist dieser für betrachtende Menschen jedoch kaum sichtbar und durch diese Art der Komprimierung kann normalerweise die Datenmenge erheblich reduziert werden.
Für die verlustbehaftete Speicherung von Pixelgrafiken wird meist das Format der Joint Photographic Experts Group (JPEG) verwendet, welches an den Dateiendungen .jpg oder .jpeg erkennbar ist.
Dazu wird ein komplexer mathematischer Algorithmus verwendet, welcher bewirkt, dass das ursprüngliche Bild nicht mehr genau Pixel für Pixel rekonstruiert werden kann. Der Algorithmus kann durch die Angabe der Qualität in Prozent beeinflusst werden. Affinity Foto kennt vier vordefinierte Qualitätsstufen. Die folgenden Bildausschnitte illustrieren, wie die Qualität und die Speichergrösse zusammenhängen:
Bild: mygymer
Verlustfreie Komprimierung
Für die verlustfreie Speicherung von Pixelgrafiken gibt es verschiedene Formate mit unterschiedlichen Eigenschaften. Das Portable Network Graphics (PNG)-Format ist im Internet am meisten verbreitet. Es eignet sich beispielsweise für Bildschirmfotos und Grafiken für Webseiten oder Computerspiele.
Das folgende Beispiel zeigt links einen Baum als PNG-Grafik mit Transparenz gespeichert. Rechts ist das gleiche Bild als JPG-Grafik mit hoher Qualität gespeichert.
Bild: mygymer, Durch die Speicherung als JPG-Grafik geht die Transparenz verloren, das Bild kann z.B. nicht mehr auf farbigen Folien verwendet werden.
Das veraltete Graphics Interchange Format (GIF)-Format kann nur 256 unterschiedliche Farben darstellen, ist aber weiterhin beliebt, weil es die Speicherung von mehreren Bildern pro Datei erlaubt, die von Browsern als Animation abgespielt werden.
Das Tagged Image File Format (TIFF) ist besonders bei Verlagen und Druckereien beliebt, da es das CMYK-Farbmodell unterstützt.
Datenmengen berechnen
Um die Datenmenge einer Rastergrafik zu berechnen, werden die folgenden Angaben benötigt:
| Wert | Zeichen | |
|---|---|---|
| Breite des Bildes in Pixel | b | |
| Höhe des Bildes in Pixel | h | |
| Farbtiefe in Byte | f |
Die Anzahl der Pixel, auch Auflösung genannt, wird aus der Breite $b$ und Höhe $h$ des Bildes in Pixel berechnet. Die Farbtiefe gibt an, welche Datenmenge für die Darstellung der Farbe eines Pixels benötigt wird.
Die benötigte Datenmenge zur Darstellung eines Bildes ergibt sich folglich aus der Multiplikation dieser drei Werte: $$
b⋅h⋅f
$$ Beispiel: Ein Bild mit einer Auflösung von 1920×1080 Pixel (FullHD Auflösung, normaler Bildschirm) und der Farbtiefe 3 Byte (1 Byte pro Farbkanal) benötigt einen Speicherplatz von $$
1920 * 1080 * 3 = 6'220'800 Byte = 6.2MB
$$
Vektorgrafiken
Definition
Bei einer Vektorgrafik wird das darzustellende Bild aus geometrischen Objekten wie Linien, Kreise oder Rechtecken zusammengesetzt. Die einzelnen Objekte können einfarbig sein oder einen Farbverlauf haben, sowie teilweise transparent sein. 
Bild: https://informatik.mygymer.ch/base/?page=code/4-graphics/4-vector-graphics/
Wichtig: Es wird nun also nicht, wie bei einer Rastergrafik, jeder Pixel eingefärbt, sondern jede Form. Mehr dazu und Beispiele gleich.
Vorteile von Vektorgrafiken
- Skalierbarkeit: Vektorgrafiken können ohne Verlust der Bildqualität vergrößert oder verkleinert werden.
- Dateigröße: Sie haben in der Regel eine kleinere Dateigröße im Vergleich zu Rastergrafiken, da sie keine Pixelinformationen speichern.
Einsatz
Vektorgrafiken werden deshalb inarsbesondere für folgende Anwendungen eingesetzt:
- Logos
- Illustrationen
- Symbole & Icons
- Schriftarten
- Strassen- und Landkarten
Formate und Beispiele
Das am meisten verbreitete Format für Vektorgraphiken ist .svg. Eine solche Datei enthält "Befehle", wie Formen angezeigt werden sollen:
Erkennst du am Code, welche Flagge diese Vektorgraphik anzeigt? Tipp: <rect> zeigt ein Rechteck an, x/y sind die Position, fill die Füllfarbe. <svg> ... </svg> teilt dem Programm mit, dass der Inhalt eine Vektorgrafik ist.
Vektorgrafiken eignen sich also nicht für Fotos und Fotorealistische Darstellung, da mann alle Inhalte aus Formen und geometrischen Objekten darstellen muss.
Fazit
Die Codierung von Bildern und die Wahl des richtigen Grafikformats sind entscheidend für die Qualität und die Anwendung von Bildern in digitalen Medien. Rastergrafiken sind ideal für detailreiche Bilder, während Vektorgrafiken sich hervorragend für skalierbare Designs eignen. Das Verständnis von Farbdarstellung ist ebenfalls wichtig, um sicherzustellen, dass die Farben sowohl auf Bildschirmen als auch im Druck korrekt wiedergegeben werden.****