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.
Klausurrelevant
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

Klausurrelevant
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
4
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
Klausurrelevant
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).

Frage

Wie lautet 39 (dezimal) im Binärsystem?

Antwort

100111₂. Rechnung: 32+4+2+1 = 39. Also: 2⁵+2²+2¹+2⁰ = 100111.

Frage

Was bedeutet 0xFF0000 als Farbe?

Antwort

Reines Rot. FF (hex) = 255 (dez) für Rot, 00 für Grün, 00 für Blau → rgb(255, 0, 0).

Frage

Wie viele Zeichen hat ASCII, und warum fehlen Umlaute?

Antwort

ASCII hat 128 Zeichen (7 Bit). Es wurde 1963 in den USA entwickelt — Umlaute (ä, ö, ü) kommen im Englischen nicht vor und wurden daher nicht berücksichtigt.

Frage

Was ist der Unterschied zwischen JPEG und PNG?

Antwort

JPEG: verlustbehaftet komprimiert, ideal für Fotos, kleinere Datei. PNG: verlustfrei, unterstützt Transparenz, besser für Logos und Grafiken mit klaren Kanten.

Frage

Was ist ein Nibble?

Antwort

4 Bit = halbes Byte. Ein Nibble entspricht genau einer Hexadezimalziffer (0–F).

Frage

Warum ist das Hexadezimalsystem in der IT so beliebt?

Antwort

Weil 4 Binärziffern (1 Nibble) genau einer Hexziffer entsprechen. Lange Binärzahlen lassen sich so viel kompakter schreiben: 11110000 → F0.

Frage

Was ist der Unterschied zwischen einer Pixelgrafik und einer Vektorgrafik?

Antwort

Pixelgrafiken bestehen aus einem festen Raster von Bildpunkten und verpixeln beim Vergrößern. Vektorgrafiken basieren auf mathematischen Formeln und lassen sich unendlich ohne Qualitätsverlust skalieren.

Frage

Wie wird eine negative Zahl im Zweierkomplement gebildet?

Antwort

Alle Bits der positiven Zahl werden invertiert (Einerkomplement) und anschließend wird eine 1 addiert.

Übungsfragen

Welche Farbe ergibt der Hex-Code #00FF00?

Wie viel Byte hat 1 Kilobyte (KB)?

Was bedeutet 'Abtastrate' bei digitaler Musik?

Welcher Dezimalwert entspricht der Binärzahl 1010?

Welches Bildformat eignet sich am besten für ein Logo mit transparentem Hintergrund?

Welcher Vorteil ergibt sich aus der variablen Byte-Länge bei UTF-8?