INFORMATIK · Daten & Codierung

Bilder
codieren

Wie wird aus einem Foto eine Folge von 0 und 1?

11111111 11011100 10010110

01 · Das Problem

Ein Bild besteht aus Millionen Punkten

Text haben wir schon codiert. Aber ein Bild? Der erste Trick: Wir zerlegen es in ein feines Raster aus winzigen Punkten – Pixel – und geben jedem Punkt eine Farbe als Zahl.

Eine Rastergrafik ist ein Raster aus Pixeln, jeder Pixel eine Farbe als Zahl.

02 · Rastergrafik

Jeder Pixel ist eine Zahl

Beim einfachsten Bild ist jeder Pixel schwarz (0) oder weiss (1) – also genau 1 Bit. Klick ins Raster:

Schwarz = 0
Weiss = 1

Graustufen:
0 … 255 (8 Bit)

03 · Farbe

Farben aus Rot, Grün, Blau

Ein Bildschirm mischt jede Farbe aus drei Lichtern: Rot, Grün und Blau, je 0–255 (8 Bit). Eine Farbe = 3 Byte. Misch selbst:

04 · Farbtiefe

Mehr Bits → mehr Farben

Die Farbtiefe sagt, wie viele Bits pro Kanal ein Pixel bekommt. Mehr Bits bedeuten feinere Abstufungen. Zieh am Regler und beobachte, wie aus groben Streifen weiche Verläufe werden:

Farbtiefe2 Bit
Stufen je Kanal:
Bit pro Pixel:
Farben insgesamt:

05 · Datenmenge

Wie gross wird ein Bild? b · h · f

Breite × Höhe × Farbtiefe. Ein unkomprimiertes Full-HD-Foto (1920 × 1080, 3 Byte pro Pixel):

1920× 1080× 3 Byte= 6,2 MB

Über 6 Megabyte für ein Bild – darum wird fast jedes Bild komprimiert.

06 · Kompression

Kleiner speichern: JPEG und PNG

JPEG · verlustbehaftet
Lässt Details weg, die kaum auffallen. Sehr klein – ideal für Fotos. Das Original ist nicht mehr exakt rekonstruierbar.
PNG · verlustfrei
Exakt wiederherstellbar, unterstützt Transparenz. Ideal für Grafiken, Logos, Screenshots.

Bei JPEG bestimmt die Qualität den Kompromiss: weniger Qualität → kleiner, aber sichtbare Artefakte.

07 · Vektorgrafik

Formen statt Pixel: verlustfrei skalierbar

Eine Vektorgrafik speichert nicht Pixel, sondern Formen (Kreise, Linien). Deshalb bleibt sie beim Vergrössern scharf. Zieh am Zoom:

Zoom4×
Raster (Pixel)
Vektor (Formen)

08 · Zusammengefasst

Pixel, Farbe, Formen – alles wird zu Zahlen

Rastergrafik
Raster aus Pixeln. Ideal für Fotos.
RGB
Farbe = Rot + Grün + Blau, 3 Byte.
Kompression
JPEG (verlustbehaftet) / PNG (verlustfrei).
Vektorgrafik
Formen statt Pixel. Verlustfrei skalierbar.
→ Interaktive Applets auf der Kurs-Website
01 / 09
← → zum Blättern