Bildcodierung

In der heutigen digitalen Welt spielen Bilder eine zentrale Rolle in unserer Kommunikation. Um Bilder digital darzustellen, werden verschiedene Grafikformate und Codierungen verwendet. In diesem Kapitel beschäftigen wir uns mit Rastergrafiken, der digitalen Farbdarstellung und Vektorgrafiken.

💡 Zum Einstieg gibt es eine Präsentation zum Durchklicken.

Rastergrafiken

Eine Rastergrafik, auch Pixelgrafik (englisch raster graphics image), beschreibt ein Bild als rasterförmige Anordnung von Pixeln (Bildpunkten), denen jeweils eine Farbe zugeordnet ist. Die Hauptmerkmale einer Rastergrafik sind daher die Bildgrösse (Breite und Höhe in Pixeln, umgangssprachlich auch Auflösung genannt) sowie die Farbtiefe (wie viele Bits pro Pixel für die Farbe zur Verfügung stehen).

Die einfachste Form ist ein Schwarz/Weiss-Bild, bei dem jeder Pixel durch eine 0 (schwarz) oder eine 1 (weiss) dargestellt wird. Etwas feiner sind Graustufenbilder, bei denen jeder Pixel eine Zahl von 0 (schwarz) bis 255 (weiss) ist.

Probier es selbst aus: Zeichne im Raster und schalte «Zahlen anzeigen» ein – so siehst du, dass hinter jedem Bild einfach Zahlen stecken.

Zahlen anzeigen

144 Pixel × 1 Bit = 144 Bit = 18 Byte. Jeder Pixel ist einfach eine Zahl.

Ein echtes Graustufenbild als Text (jede Zahl ist ein Pixel, 0 = schwarz, 255 = weiss) sieht zum Beispiel so aus:

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

Schau dir solche Zahlen genau an: Kleine Zahlen sind dunkle Pixel, grosse Zahlen helle. Aus lauter Zahlen entsteht ein Bild.

Farbdarstellung am Computer

Für die digitale Verarbeitung müssen Farben in Zahlen umgewandelt werden. Das geschieht, indem eine Farbe in mehrere Farbkanäle aufgeteilt wird. Pro Pixel wird für jeden Kanal die Intensität als Zahl gespeichert. Eine einzelne Pixelfarbe ist also im Grunde immer eine Farbmischung.

Das RGB-Farbmodell

Das RGB-Farbmodell basiert auf der Funktionsweise des menschlichen Auges. Dieses nimmt Farben mit Hilfe von drei Arten von Zäpfchen wahr, die für Licht unterschiedlicher Wellenlängen empfindlich sind – für Rot, Grün und Blau.

Bei der additiven Farbmischung überlagern sich Lichtquellen in diesen drei Grundfarben. Durch das Regeln der Helligkeit jeder Lichtquelle lassen sich (fast) alle Farben erzeugen. Genau so funktioniert ein Bildschirm: Jeder Pixel besteht aus drei winzigen Leuchtdioden in Rot, Grün und Blau, die unterschiedlich hell leuchten.

Im RGB-Farbsystem wird jeder Kanal durch eine Zahl von 0 bis 255 (also 8 Bit) ausgedrückt. Eine Farbe besteht damit aus 3 Byte = 24 Bit. Misch selbst eine Farbe und beobachte ihre Binärdarstellung:

rgb(255, 220, 150)

#FFDC96

Rot25511111111

Grün22011011100

Blau15010010110

24 Bit = 3 Byte: 11111111 11011100 10010110

Additive Mischung: Rot + Grün ergibt Gelb, alle drei zusammen Weiss – so mischt ein Bildschirm Farben aus Licht.

Um eine Farbe binär darzustellen, schreibt man die drei 8-Bit-Zahlen für Rot, Grün und Blau nacheinander. Die Farbe mit den RGB-Werten (60, 12, 240) ergibt zum Beispiel:

00111100 00001100 11110000

Eine hohe Zahl in einem Kanal bedeutet einen hohen Anteil dieser Farbe. Du kannst auch beliebigen Text, Zahlen oder Farben in ihre Bits zerlegen lassen:

Schreibe etwas (auch Umlaute oder Emojis 🙂):

H

U+0048 · 72

01001000

i

U+0069 · 105

01101001

!

U+0021 · 33

00100001

Jedes Zeichen wird über Unicode/UTF-8 zu einem oder mehreren Bytes – und jedes Byte sind 8 Bit (0 oder 1).

Farbtiefe: wie viele Bits pro Farbe?

Die Farbtiefe gibt an, wie viele Bits pro Farbkanal (und damit pro Pixel) zur Verfügung stehen. Sie entscheidet, wie viele verschiedene Farben ein Bild überhaupt darstellen kann: Mit $n$ Bit pro Kanal sind es $2^n$ Helligkeitsstufen je Kanal – bei drei Kanälen also $2^{3n}$ Farben insgesamt.

Verschieb den Regler und beobachte, wie das Bild von groben Farbstreifen (wenig Bits) zu weichen Verläufen (viele Bits) wird:

Farbtiefe: 2 Bit pro Kanal

Stufen je Kanal4

Bit pro Pixel6

Farben insgesamt64

Je mehr Bits pro Kanal, desto feiner die Abstufungen. Bei 1 Bit gibt es nur 8 Farben – die Farbverläufe zerfallen in grobe Streifen. Bei 8 Bit (das gewohnte «True Color») sind es über 16 Millionen Farben.

Bei nur 1 Bit pro Kanal gibt es gerade einmal $2^3=8$ Farben – Verläufe zerfallen in sichtbare Streifen. Die heute übliche Farbtiefe von 8 Bit pro Kanal (24 Bit pro Pixel, «True Color») ermöglicht über 16 Millionen Farben, was das Auge kaum mehr von einem echten Verlauf unterscheiden kann.

Dateiformate und Kompression

Man könnte ein Bild speichern, indem man für jeden Pixel einfach die drei RGB-Zahlen aneinanderreiht. Bei grossen Auflösungen bräuchte das aber sehr viel Speicher. Hier kommen Dateiformate (Bildcodierungen) ins Spiel: Sie speichern Bilder mit cleveren Verfahren platzsparender. Man nennt das Komprimierung. Dabei unterscheidet man zwei Arten:

• Verlustbehaftet (z.B. JPEG, .jpg): Es werden Details weggelassen, die kaum auffallen. Das spart sehr viel Platz, aber das Original lässt sich nicht mehr exakt rekonstruieren. Ideal für Fotos.
• Verlustfrei (z.B. PNG): Die Daten werden platzsparend, aber exakt wiederherstellbar gespeichert. PNG unterstützt zudem Transparenz und eignet sich für Grafiken, Logos und Bildschirmfotos.

Bei JPEG kann man die Qualität einstellen. Je tiefer die Qualität, desto kleiner die Datei – aber desto stärker die sichtbaren Artefakte (Blöcke, Unschärfe an Kanten). Probier es aus:

JPEG-Qualität: 80 %

Original (verlustfrei)

PNG: 0 Byte

JPEG bei 80 %

JPEG: 0 Byte

JPEG lässt Details weg, die kaum auffallen – das spart viel Speicher. Bei niedriger Qualität werden aber Blöcke und Artefakte sichtbar, besonders an scharfen Kanten und Schrift.

Weitere bekannte Formate:

• GIF: unterstützt Animationen und Transparenz, kann aber nur 256 Farben darstellen.
• TIFF: bei Verlagen und Druckereien beliebt, unterstützt das CMYK-Farbmodell (für den Druck).

Datenmenge einer Rastergrafik berechnen

Die Datenmenge eines unkomprimierten Bildes ergibt sich aus Breite, Höhe und Farbtiefe:

$$\text{Datenmenge}=b\cdot h\cdot f$$

Dabei ist $b$ die Breite in Pixel, $h$ die Höhe in Pixel und $f$ die Farbtiefe in Byte pro Pixel.

Beispiel: Ein Full-HD-Bild (1920 × 1080 Pixel) mit 3 Byte pro Pixel braucht

$$1920\cdot 1080\cdot 3=6^{\prime }{220}^{\prime }800\text{ Byte}\approx 6,2\text{ MB.}$$

Rechne selbst mit verschiedenen Auflösungen und Farbtiefen:

Breite (Pixel)Höhe (Pixel)Farbtiefe 1 Bit · Schwarz/Weiss1 Byte · Graustufen3 Byte · Farbe (RGB)4 Byte · Farbe + Transparenz (RGBA)

1'920 × 1'080 × 3 Byte = 6'220'800 Byte

2'073'600

Pixel

6'220.8

Kilobyte

6.2

Megabyte

Ein unkomprimiertes Bild braucht Breite × Höhe × Farbtiefe an Speicher. Darum sind Dateiformate, die die Daten komprimieren, so wichtig.

Vektorgrafiken

Bei einer Vektorgrafik wird das Bild nicht aus Pixeln, sondern aus geometrischen Objekten wie Linien, Kreisen und Rechtecken zusammengesetzt. Statt jeden Pixel einzeln zu speichern, wird also jede Form beschrieben.

Der grosse Vorteil: Vektorgrafiken lassen sich beliebig vergrössern, ohne unscharf zu werden. Verschieb den Zoom-Regler und vergleiche:

Zoom: 4×

Rastergrafik (Pixel)

wird beim Vergrössern pixelig

Vektorgrafik (Formen)

bleibt immer scharf

Dieselbe Smiley-Grafik. Die Rastergrafik speichert feste Pixel – beim Vergrössern werden die Blöcke sichtbar. Die Vektorgrafik speichert die Formen (Kreise, Kurven) und lässt sich beliebig skalieren.

Vorteile von Vektorgrafiken

• Skalierbarkeit: verlustfrei vergrössern und verkleinern – immer scharf.
• Dateigrösse: meist kleiner als Rastergrafiken, da keine Pixel, sondern nur Formen gespeichert werden.

Vektorgrafiken werden deshalb insbesondere für Logos, Illustrationen, Symbole/Icons, Schriftarten sowie Strassen- und Landkarten verwendet.

Das SVG-Format

Das verbreitetste Vektorformat ist .svg. Eine SVG-Datei enthält «Befehle», wie die Formen angezeigt werden sollen. Dieses Beispiel zeigt eine bekannte Flagge:

Erkennst du am Code, welche Flagge das ist? (Tipp: <rect> ist ein Rechteck, x/y die Position, fill die Füllfarbe.) Ändere die Werte im Editor und schau, wie sich die Grafik verändert – versuch zum Beispiel, eine andere Flagge zu bauen:

SVG-Flagge selbst gestalten

HTML-Code

Live-Vorschau

Vektorgrafiken eignen sich also nicht für Fotos oder fotorealistische Darstellungen, da man alle Inhalte aus Formen zusammensetzen müsste.

Fazit

Die Codierung von Bildern und die Wahl des richtigen Formats sind entscheidend für Qualität und Anwendung. Rastergrafiken sind ideal für detailreiche Bilder wie Fotos, Vektorgrafiken eignen sich hervorragend für skalierbare Designs wie Logos. Das Verständnis der Farbdarstellung hilft, damit Farben auf Bildschirmen und im Druck korrekt wiedergegeben werden.

Teste dich selbst

Selbsttest: Bildcodierung

Frage 1 von 5

Woraus besteht eine Rastergrafik?

Aufgaben

Löse die Aufgaben und überprüfe erst danach deine Lösung im Dropdown.

Aufgabe 1: Wie viele Byte braucht ein unkomprimiertes Farbbild (3 Byte pro Pixel) mit 800 × 600 Pixeln?

Lösung anzeigen

$800\cdot 600\cdot 3=1^{\prime }{440}^{\prime }000\text{ Byte}\approx 1,44\text{ MB}.$

Aufgabe 2: Wie viele Bit braucht ein einzelner Graustufen-Pixel (Werte 0–255)?

Lösung anzeigen

8 Bit (= 1 Byte), denn mit 8 Bit lassen sich $2^8=256$ Werte (0–255) darstellen.

Aufgabe 3: Wie sieht die Farbe RGB(255, 0, 128) in binärer Darstellung aus?

Lösung anzeigen

11111111 00000000 10000000 — denn 255 = 11111111, 0 = 00000000 und 128 = 10000000.

Aufgabe 4: Warum ist ein Firmenlogo als Vektorgrafik besser aufgehoben als als Rastergrafik?

Lösung anzeigen

Ein Logo muss in vielen Grössen scharf sein (Visitenkarte bis Plakat). Eine Vektorgrafik skaliert verlustfrei und bleibt immer scharf, während eine Rastergrafik beim Vergrössern pixelig wird. Zudem ist die Datei meist kleiner.

Aufgabe 5: Ein Schwarz/Weiss-Bild ist 100 × 100 Pixel gross (1 Bit pro Pixel). Wie viele Byte braucht es?

Lösung anzeigen

$100\cdot 100={10}^{\prime }000$ Pixel × 1 Bit = 10'000 Bit $=1^{\prime }250$ Byte (10'000 ÷ 8).