🖼️

Bildcodierung

Interaktive Visualisierung der Bildcodierung

Simulation Klasse 6 Codierung
🎯 Worum geht's? Klasse 6–9 · 1–2 Unterrichtsstunden

Nach dieser Seite kannst du …

  • ein Pixelbild in eine Ziffernfolge codieren
  • aus einem Code das Bild wieder herstellen (decodieren)
  • erklären, wie Schwarz-Weiß-, Graustufen- und Farbbilder gespeichert werden

Vorwissen: keines

Aufgabe: Lege ein Raster über das Bild und wähle die Farben. Klicke am Ende auf "➡️ An Decodierer", um die Ziffernfolge zu übertragen.
Tastaturkürzel: B Malen   F Füllen   E Radieren   I Aufnehmen   Strg+Z Rückgängig   Strg+Y Wiederholen
📁 Eigenes Bild oder mehrere Bilder gleichzeitig hierher ziehen oder klicken
50%
0

Vorlage mit Raster

Farbpalette

Pixelbild-Vorschau

📝 Ziffernfolge (Code)

Klicke auf Rasterbereiche, um Pixel zu setzen.
Aufgabe: Lies die Ziffernfolge, wähle die passende Farbe aus der Palette und male das Bild aus! (Oder lasse es automatisch decodieren).
📚 Beispiele laden:

Zeichenfläche

Farbpalette

Im Hintergrund geladen
0
-
Auflösung
-
Bit/Pixel

Pixelbild-Vorschau

📊 Fortschritt

Noch kein Code geladen 0%
0 / 0 Pixel ⏳ Warte auf Eingabe
🎉
Perfekt! Alle Pixel sind korrekt!
Du hast das Bild fehlerfrei decodiert. Großartig!

❓ Wie benutze ich die Bildcodierung?

💡 Tipp: Diese Anwendung hilft dir, zu verstehen, wie Computer Bilder speichern. Du kannst Bilder in Zahlencodes umwandeln (codieren) und Zahlencodes wieder in Bilder zurückverwandeln (decodieren)!

🎨 Teil 1: Ein Bild codieren (Bild → Code)

1 Bild auswählen

Wähle ein Vorlagenbild aus der Galerie oder lade dein eigenes Bild hoch:

  • Vorgefertigte Bilder: Klicke auf eines der kleinen Vorschaubilder
  • Eigenes Bild: Klicke auf den grauen Bereich oder ziehe Bilddateien hinein.
  • 💾 Gespeichert: Deine hochgeladenen Bilder werden im Browser gespeichert. Du kannst sie mit dem roten X (erscheint beim Hover) wieder löschen.

2 Raster und Farbtiefe einstellen

  • 📐 Raster: Wähle die Auflösung (z.B. 8×8 = 64 Pixel)
  • 🎨 Farbtiefe:
    • 1 Bit = 2 Farben (S/W)
    • 2 Bit = 4 Farben
    • 3 Bit = 8 Farben
    • 4 Bit = 16 Farben
    • 5 Bit = 32 Farben
  • 👁️ Transparenz: Wie durchsichtig das Originalbild sein soll
⚠️ Wichtig: Je höher die Auflösung und Farbtiefe, desto länger der Code!

3 Pixel setzen

  • 🖌️ Malen B: Klicke/ziehe über das Raster
  • 🪣 Füllen F: Füllt zusammenhängende Bereiche
  • 🧹 Radieren E: Entfernt Pixel
  • 💉 Aufnehmen I: Übernimmt Farbe eines Pixels
  • 🪄 Auto-Füllen: Füllt automatisch basierend auf dem Originalbild
  • ↩️ Undo Strg+Z / ↪️ Redo Strg+Y

4 Code erzeugen & exportieren

  • 📋 Kopieren: Kopiert den Code in die Zwischenablage
  • ➡️ An Decodierer: Überträgt den Code zum Decoder
  • 💾 PNG: Exportiert das Pixelbild als PNG-Datei

🔢 Teil 2: Einen Code decodieren (Code → Bild)

1 Code eingeben oder Beispiel wählen

Format: 0,1,2,3,A,B,C,D,...
Zahlen 0–9, Buchstaben A–V für Farben 10–32

2 Decodieren

  • ✨ Automatisch: Klicke auf den Button
  • Manuell: Farben wählen und Pixel setzen (gut zum Lernen!)

📖 Wie funktioniert Bildcodierung? – Einfach erklärt

Jedes digitale Bild besteht aus winzigen Bausteinen: Pixeln (Bildpunkten). Weil ein Computer keine "Farben" versteht, muss er sich jedes Pixel als Zahl merken.

📌 Merksatz: Bildcodierung
Bilder werden im Computer als ein langes Raster aus Pixeln gespeichert. Jedes Pixel erhält eine Zahl, die für eine bestimmte Farbe steht.

1. Die Auflösung

Die Auflösung beschreibt, aus wie vielen Pixeln ein Bild besteht. Je feiner das Gitter, desto mehr Details.

4×4 Pixel
Extrem grob.
16 Pixel gesamt.
8×8 Pixel
Erkennbares Symbol.
64 Pixel gesamt.
16×16 Pixel
Deutliche Details.
256 Pixel gesamt.
📌 Merksatz: Auflösung
Je höher die Auflösung, desto schärfer das Bild – aber auch mehr Speicherplatz nötig.

2. Die Farbtiefe

Die Farbtiefe gibt an, wie viele Farben ein Pixel annehmen kann (gemessen in Bit).

1 Bit (S/W)
2 Farben:
Schwarz oder Weiß.
2 Bit (Grau)
4 Farben:
Graustufen.
4 Bit (Farbe)
16 Farben:
Bunte Vielfalt.
Speicherplatz Mathematik Mögliche Farben Beispiel
1 Bit 2¹ 2 0, 1
2 Bit 2² 4 0–3
3 Bit 2³ 8 0–7
4 Bit 2⁴ 16 0–F
8 Bit 2⁸ 256 Retro-Spiele
24 Bit 2²⁴ 16,7 Mio. Moderne Fotos
📌 Merksatz: Farbtiefe
Je höher die Farbtiefe, desto natürlicher das Bild – aber auch mehr Speicherbedarf.

3. Wie wird daraus ein Code?

Zeile für Zeile, von links nach rechts, von oben nach unten – jede Farbe bekommt eine Nummer.

Palette: 0=Weiß, 1=Rot, 2=Grün

Zeile 1: → 0,2,0,0

Zeile 2: → 0,1,1,0

Zeile 3: → 1,1,1,1

Zeile 4: → 0,1,1,0

Gespeichert als: 0,2,0,0,0,1,1,0,1,1,1,1,0,1,1,0