THM Notes
WebP 1
VorlesungSoSe 26CodierungZahlensystemeBinärHexadezimalASCIIRGB

WebP 1 – Information und Codierung

14. April 2026WebP 1

Zusammenfassung

Ein Computer kennt nur zwei Zustände: Strom an (1) und Strom aus (0). Trotzdem kann er Fotos, Musik, Videos und Texte verarbeiten — weil all das in Zahlen codiert wird. In dieser Vorlesung lernen wir, wie Farben, Bilder, Musik, Zahlen und Texte in computerlesbare Formate umgewandelt werden. Dazu verstehen wir zuerst die wichtigsten Zahlensysteme (Dezimal, Binär, Hexadezimal, Oktal) und dann, wie man zwischen ihnen umrechnet.

Schlüsselbegriffe

Codierung

Die Abbildung von Informationen (z. B. Buchstaben, Farben) auf ein anderes Zeichensystem (z. B. Zahlen, Bits). Ziel: Maschinen können die Information verarbeiten.

Dekodierung

Die Umkehrung der Codierung — aus der codierten Form wird wieder die ursprüngliche Information rekonstruiert.

Bit

Kleinste Informationseinheit (binary digit). Kann nur 0 oder 1 sein. Entspricht elektrisch: Strom aus / Strom an.

Byte

8 Bit. Ein Byte kann 2⁸ = 256 verschiedene Werte darstellen (0–255).

Nibble

4 Bit = halbes Byte. Kann genau eine hexadezimale Ziffer darstellen (0–F).

RGB-Farbmodell

Additives Farbmodell: Rot, Grün und Blau werden in Anteilen von 0–255 gemischt. 256³ ≈ 16,8 Millionen Farben möglich.

Pixelgrafik (Rastergrafik)

Bild aufgebaut aus einem Raster von farbigen Bildpunkten (Pixel). Qualität hängt von Auflösung und Farbtiefe ab.

Abtastrate

Wie oft pro Sekunde ein analoges Signal (z. B. Schall) gemessen wird. CD-Qualität: 44.100 Hz (44,1 kHz).

ASCII

American Standard Code for Information Interchange. Zeichensatz aus 128 Zeichen (7 Bit), der Buchstaben, Zahlen und Sonderzeichen auf Zahlen abbildet.

Unicode / UTF-8

Erweiterter Zeichensatz mit über 159.000 Zeichen (Version 17.0, 2025). Enthält Buchstaben aller Sprachen, Emojis u.v.m. Die ersten 128 Einträge sind identisch zu ASCII.

Hexadezimalsystem

Zahlensystem mit Basis 16. Ziffern: 0–9 und A–F. Vier Binärziffern (1 Nibble) entsprechen genau einer Hexziffer — deshalb im IT-Bereich sehr beliebt.

Zweierkomplement

Methode zur Darstellung negativer ganzer Zahlen im Binärsystem. Ermöglicht, dass ein Prozessor subtrahieren kann, indem er addiert.

Vektorgrafik

Eine Grafik, die nicht aus Bildpunkten (Pixeln) aufgebaut ist, sondern aus mathematisch definierten geometrischen Formen (Linien, Kurven, Kreise). Lässt sich verlustfrei skalieren (z. B. SVG).

Farbtiefe

Die Anzahl der Bits, die zur Speicherung der Farbinformation eines einzelnen Pixels verwendet werden. Sie bestimmt, wie viele verschiedene Farben ein Pixel annehmen kann (z. B. 24-Bit-Farbtiefe für RGB).

Kernkonzepte

Warum brauchen Computer Codierungen?

Computer arbeiten intern ausschließlich mit Bits — also mit 0 und 1. Eine Farbe, einen Buchstaben oder einen Ton „versteht" ein Computer nicht direkt. Erst durch eine festgelegte Codierung — eine Abbildungsvorschrift — wird aus einer Information eine Bitfolge, die gespeichert und verarbeitet werden kann.
Info
René Magritte malte ein Bild einer Pfeife mit dem Text „Ceci n'est pas une pipe" (Das ist keine Pfeife). Das Bild zeigt eine Pfeife, ist aber keine. Genauso ist das Bitmuster für den Buchstaben „A" nicht der Buchstabe A — es ist nur seine Repräsentation. Codierung ist immer eine Abbildung, kein Ding selbst.

Codierung von Farben

RGB-Farbmodell (additiv, für Bildschirme):
  • Drei Grundfarben: Rot, Grün, Blau
  • Jede Farbe hat einen Anteil von 0 (gar nicht) bis 255 (volle Intensität)
  • 256 × 256 × 256 = 16.777.216 Farben möglich
  • Darstellung als Triple: rgb(255, 0, 0) = Rot, oder als Hex: #FF0000
FarbeRGBHex
Rot255, 0, 0#FF0000
Grün0, 255, 0#00FF00
Blau0, 0, 255#0000FF
Weiß255, 255, 255#FFFFFF
Schwarz0, 0, 0#000000
THM-Grün128, 186, 36#80BA24
CMYK-Farbmodell (subtraktiv, für Drucker):
  • Grundfarben: Cyan, Magenta, Gelb + Schwarz (Key)
  • Wird bei Druckern verwendet; Farbwerte meist in Prozent angegeben
HSV / HSL: Farbe über Farbton (Hue), Sättigung (Saturation) und Helligkeit (Value/Lightness) beschrieben — näher an menschlicher Wahrnehmung.

Codierung von Bildern

Ein digitales Bild ist ein Raster aus Pixeln (Picture Cells). Jeder Pixel hat einen Farbwert.
Wichtig
Dateiformate im Web:
  • JPEG — für Fotos, verlustbehaftet komprimiert, kleine Dateigröße
  • PNG — verlustfrei, unterstützt Transparenz (Alpha-Kanal), für Logos/Grafiken
  • SVG — Vektorgrafik (keine Pixel, sondern mathematische Pfade), skalierbar ohne Qualitätsverlust
  • GIF — animierte Bilder, nur 256 Farben
  • WebP — modernes Format (2010), besser komprimiert als JPEG/PNG
Größenvergleich für ein 33-Megapixel-Foto (typisches Smartphone):
  • Als BMP (unkomprimiert): ~90 MB
  • Als JPEG (komprimiert): ~10 MB
  • Als stark komprimiertes JPEG: ~0,5 MB (mit sichtbaren Artefakten)

Codierung von Musik

Schall ist eine physikalische Welle (Luftdruckschwankung). Um sie digital zu speichern, wird sie in regelmäßigen Abständen gemessen (Abtastung).
  • Abtastrate: Wie oft pro Sekunde wird gemessen?
    • Telefon: 7.000–8.000 Hz
    • CD (verlustfrei): 44.100 Hz (= 44,1 kHz)
  • Audioformate:
    • WAV: Rohdaten, verlustfrei, sehr groß
    • FLAC: verlustfrei komprimiert
    • MP3: verlustbehaftet (für Menschen kaum wahrnehmbare Töne werden entfernt), sehr klein

Zahlensysteme

Wichtig
Im IT-Bereich begegnen dir vier Zahlensysteme ständig. Du musst sie kennen und zwischen ihnen umrechnen können.
Alle Zahlensysteme funktionieren nach demselben Stellenwertprinzip — wie das Dezimalsystem aus der Grundschule, nur mit einer anderen Basis.
SystemBasisZiffernBeispiel: 1999
Dezimal100–91999₁₀
Binär20, 111111001111₂
Oktal80–73717₈
Hexadezimal160–9, A–F7CF₁₆
Wie funktioniert ein Stellwertsystem?
Dezimal: 1999 = 1×10³ + 9×10² + 9×10¹ + 9×10⁰ = 1000 + 900 + 90 + 9
Binär: 1999 = 1×2¹⁰ + 1×2⁹ + 1×2⁸ + 1×2⁷ + 1×2⁶ + 0×2⁵ + 0×2⁴ + 1×2³ + 1×2² + 1×2¹ + 1×2⁰
Warum Hexadezimal? 4 Binärziffern (1 Nibble) = genau 1 Hexziffer. Dadurch lassen sich lange Binärzahlen kompakt schreiben:
1111 0000 (binär) → F0 (hex) — viel kürzer und lesbarer!
Hexadezimalzahlen werden in der Informatik oft mit 0x (z. B. 0x07CF) oder # (z. B. #FF0000 für Farben) geschrieben.

Zahlensystem-Konvertierung

Dezimal → Binär (Intuitivmethode)
Suche die größte Zweierpotenz, die noch in die Zahl passt. Subtrahiere sie. Wiederhole mit dem Rest.
Beispiel: 39₁₀ umrechnen:
39 - 32 (=2⁵) = 7    → Stelle 5: 1
 7 -  4 (=2²) = 3    → Stelle 4: 0, Stelle 3: 0, Stelle 2: 1
 3 -  2 (=2¹) = 1    → Stelle 1: 1
 1 -  1 (=2⁰) = 0    → Stelle 0: 1

Ergebnis: 100111₂
Zweierpotenz-Tabelle (auswendig lernen bis 2¹⁰):
PotenzWert
2⁰1
2¹2
2²4
2³8
2⁴16
2⁵32
2⁶64
2⁷128
2⁸256
2⁹512
2¹⁰1024
Tipp
Merkhilfe: Mit 4 Bit → 16 Werte (2⁴), mit 8 Bit → 256 Werte (2⁸), mit 32 Bit → ~4 Milliarden Werte (2³²). Diese Zahlen begegnen dir überall in der Informatik.

Zahldarstellung im Computer

Bit und Byte:
  • 1 Bit: Kleinste Einheit (0 oder 1)
  • 1 Byte = 8 Bit → 256 Werte
  • 1 Kilobyte (KB) = 1.024 Byte
  • 1 Megabyte (MB) = 1.024 KB
Negative Zahlen — Zweierkomplement: Da es kein „Minus"-Bit gibt, werden negative Zahlen im Zweierkomplement dargestellt. Das ermöglicht, dass Subtraktion als Addition funktioniert — Prozessoren brauchen so nur einen Rechentyp.
Fließkommazahlen — IEEE 754: Mit 32 Bit lassen sich nur 2³² ≈ 4 Milliarden Werte exakt darstellen. Für sehr große oder kleine Zahlen gibt es den IEEE 754 Standard: Die Zahl wird in Vorzeichen, Mantisse (Ziffernfolge) und Exponent aufgeteilt — ähnlich der wissenschaftlichen Schreibweise (z. B. 3,14 × 10⁵).

Codierung von Texten

Um Texte digital zu speichern, werden Buchstaben auf Zahlen abgebildet.
ASCII (American Standard Code for Information Interchange, 1963):
  • 128 Zeichen, codiert mit 7 Bit
  • Enthält: lateinische Buchstaben (A=65, a=97), Ziffern (0=48), Satzzeichen, Steuerzeichen
  • Kein Umlaut (ä, ö, ü), kein Sonderzeichen anderer Sprachen
Unicode / UTF-8 (heute Standard):
  • Aktuelle Version 17.0: 159.801 Zeichen
  • Enthält alle Schriftsysteme der Welt + Emojis
  • Die ersten 128 Zeichen sind identisch zu ASCII (Abwärtskompatibilität)
  • UTF-8: Variable Byte-Länge (1–4 Byte pro Zeichen), ASCII-Zeichen bleiben 1 Byte
Wichtig
Merke: #FF0000 ist Rot im RGB-Hex-Code. 65 ist „A" in ASCII. 1 + 1 = 10 ist richtig — im Binärsystem. Codierungen sind die unsichtbare Grundlage jeder digitalen Information.

Lernkarten

Frage

Wie viele Farben kann das RGB-Modell darstellen?

Antwort

256 × 256 × 256 = 16.777.216 ≈ 16,8 Millionen Farben. Jeder der drei Kanäle (R, G, B) hat 256 Stufen (0–255).

1 / 9

Übungsfragen

Welche Farbe ergibt der Hex-Code #00FF00?

1 / 6