Bilder als Tensoren

Wie RGB-Bilder zu Zahlen werden und warum alle Bilder gleich groß sein müssen.

👋 Hi! HerrKI hier - heute erkläre ich dir Bilder!

🧭 Einfach gesagt: Dein Selfie ist für den Computer nur ein Würfel aus Zahlen: für jedes Pixel ein Rot-, Grün- und Blau-Wert von 0 bis 255.

Stell dir vor: Du machst ein Foto mit deinem Handy - ein Selfie, deine Katze, eine Landschaft. Für dich ist das ein Bild. Aber für den Computer? Nur ein Haufen Zahlen!

Heute zeige ich dir, wie Computer Bilder "sehen": Jedes Foto wird in einen 3D-Tensor (Rank 3 aus Kapitel „Was sind Tensoren?") umgewandelt - eine riesige Tabelle voller RGB-Werte (Rot-Grün-Blau). Das ist die Grundlage für alles: Gesichtserkennung, Instagram-Filter, selbstfahrende Autos - alles basiert darauf!

🎯 Was du hier lernst:

✅ Wie Bilder in RGB-Zahlen (0-255) umgewandelt werden
✅ Warum Bilder 3D-Tensoren sind (Höhe × Breite × 3 Farben)
✅ Wie du mit TensorFlow.js Bilder einliest und verarbeitest
✅ Warum neuronale Netze gleich große Bilder brauchen

Das Coole daran: Sobald du verstehst, wie Bilder zu Tensoren werden, kannst du eigene Bilderkennungs-Modelle bauen - ob Katzen vs. Hunde erkennen, Hausnummern lesen oder Gesichter identifizieren. Alles startet mit RGB-Zahlen! 🎨

💡 HerrKI-Tipp: Ein Bild ist ein 3D-Würfel aus Zahlen! Höhe × Breite × 3 RGB-Kanäle. Ein 200×200 Pixel Foto = 120.000 Zahlen. Krass, oder? 🤯

🎥 Video-Erklärung von HerrKI

Schau dir dieses Video an, um Bilder als Tensoren noch besser zu verstehen:

🔬 Runter zum Tensor: RGB-Bild → Tensor

Lass uns ein echtes Bild in einen Tensor umwandeln! Hier siehst du Schritt für Schritt, wie ein RGB-Farbbild in Zahlen (Tensor) verwandelt wird.

1️⃣ Original-Bild

pflanze.png

2️⃣ Als Tensor

Klicke auf "Bild analysieren" um die Tensor-Daten zu sehen...

💻 TensorFlow.js Code:

// 1. Bild-Element holen
const img = document.getElementById('pflanzeImg');

// 2. Bild in Tensor umwandeln
const tensor = tf.browser.fromPixels(img);

// 3. Tensor-Informationen
console.log('Shape:', tensor.shape);
// Ausgabe: [height, width, 3]
// 3 = RGB-Kanäle (Rot, Grün, Blau)

// 4. Datentyp und Werte
console.log('DType:', tensor.dtype);  // 'int32'
console.log('Werte:', tensor.min(), tensor.max());  // 0-255

// 5. Tensor verwenden
const normalized = tensor.div(255.0);  // Normalisieren auf 0-1
model.predict(normalized.expandDims(0));  // Vorhersage

🎯 Was passiert bei der Umwandlung?

Jedes Pixel wird zu 3 Zahlen (R, G, B)
Wertebereich: 0-255 für jeden Farbkanal
Shape: (Höhe, Breite, 3) → z.B. (200, 200, 3) = 120.000 Zahlen!
Normalisierung: Oft werden Werte durch 255 geteilt → 0.0 bis 1.0
Batch: Mehrere Bilder → (Anzahl, Höhe, Breite, 3)

⚠️ Einheitliche Bildgröße für Neuronale Netze

🔒 Warum brauchen neuronale Netze gleich große Bilder?

Ein neuronales Netz hat eine feste Architektur mit einer festgelegten Anzahl von Eingabe-Neuronen. Wenn das erste Layer z.B. inputShape: [224, 224, 3] erwartet, dann müssen ALLE Bilder exakt diese Größe haben.

❌ Funktioniert NICHT

Unterschiedliche Bildgrößen:

Bild 1: 300 × 200 = 180.000 Werte
Bild 2: 400 × 400 = 480.000 Werte
Bild 3: 150 × 150 = 67.500 Werte

→ Netz kann unterschiedliche Shapes nicht verarbeiten!

✅ Funktioniert!

Einheitliche Bildgröße:

Bild 1: 224 × 224 = 150.528 Werte
Bild 2: 224 × 224 = 150.528 Werte
Bild 3: 224 × 224 = 150.528 Werte

→ Alle Bilder haben die gleiche Shape!

🔧 Wie macht man Bilder gleich groß?

Option 1: Resize (Skalieren)

// Bild auf 224x224 skalieren
const resized = tf.image.resizeBilinear(tensor, [224, 224]);
// Shape: [224, 224, 3] ✅

→ Bild wird gestreckt oder gestaucht auf die gewünschte Größe

Option 2: Crop (Zuschneiden)

// Bild auf 224x224 zuschneiden (mittig)
const cropped = tf.image.cropAndResize(
  tensor.expandDims(0),  // Batch dimension
  [[0.1, 0.1, 0.9, 0.9]], // Crop-Bereich
  [0], // Batch-Index
  [224, 224] // Zielgröße
);
// Shape: [1, 224, 224, 3] ✅

→ Schneide den relevanten Bereich aus dem Bild aus

Option 3: Pad (Auffüllen)

// Bild mit schwarzen Rändern auffüllen
const padded = tf.pad(tensor, [[top, bottom], [left, right], [0, 0]]);
// Shape: [224, 224, 3] ✅

→ Füge Ränder hinzu, um die gewünschte Größe zu erreichen

🎓 Beliebte Bildgrößen in der Praxis:

224 × 224: VGG16, ResNet, MobileNet (ImageNet Standard)
299 × 299: Inception v3, Xception
512 × 512: Hochauflösende Bildverarbeitung
28 × 28: MNIST Handschrift-Erkennung (Graustufenbilder)
32 × 32: CIFAR-10 Objekt-Erkennung

💡 Tipp: Kleinere Bilder = schnelleres Training, aber weniger Details. Größere Bilder = mehr Details, aber langsameres Training.

🔙 Zurück zur Anwendung

Und damit schließt sich der Kreis: Wenn Instagram deinem Foto einen Filter verpasst oder dein Handy „Katze“ in deine Galerie schreibt, läuft genau diese Kette — Foto → Zahlen-Würfel (H × B × 3) → Mathe auf dem Tensor → Ergebnis. Der Filter ist dabei nichts anderes als Rechnen auf den 120.000 Zahlen deines Selfies, und „Katze“ ist die größte Zahl, die am Ende aus dem Netz fällt. Und DESHALB will jede Bild-KI deine Fotos zuerst auf eine feste Größe bringen: Erst wenn alle Würfel dieselbe Shape haben, passen sie in dasselbe Netz.

Als Nächstes nehmen wir uns den Datentyp vor, aus dem die meisten echten Projekte bestehen: Excel- und CSV-Tabellen — deutlich weniger Zahlen, dafür mit Bedeutung in jeder Spalte.

📚 Zum Weiterlesen

Die Vorlesung dazu: Stanford CS231n, Image Classification — cs231n.github.io/classification — erklärt, warum „Katze erkennen“ für einen Zahlen-Würfel so viel schwerer ist, als es aussieht (auf Englisch)
Woher die Pixel kommen: MDN, ImageData — developer.mozilla.org/de/docs/Web/API/ImageData — das RGBA-Array des Browsers, aus dem TensorFlow.js den Tensor baut (auf Deutsch)
Die Funktion im Original: TensorFlow.js-API, tf.browser.fromPixels — js.tensorflow.org/api/latest/#browser.fromPixels — alle Parameter der einen Zeile, die aus deinem Bild einen Tensor macht

🧠 Kurzer Check — hast du es?

Drei schnelle Fragen, dann bist du durch — klick einfach deine Antwort an:

1. Warum ist ein Farbbild ein 3D-Tensor?

Richtig: Ein 100×100-Farbbild hat die Shape [100, 100, 3] — für jedes der 10.000 Pixel je ein Rot-, Grün- und Blau-Wert. Zusammen 30.000 Zahlen!

2. Welche Werte kann ein einzelner Farbkanal eines Pixels annehmen?

Genau: 0 = ganz dunkel, 255 = volle Intensität. Mit tensor.div(255.0) quetscht man die Werte auf 0–1 — damit trainiert das Netz stabiler.

3. Warum müssen alle Bilder für ein neuronales Netz gleich groß sein?

✅ Das nimmst du mit

Ein Bild ist ein Zahlen-Würfel. Shape (Höhe, Breite, 3) — ein 200×200-Foto sind 120.000 Zahlen.
Jedes Pixel bringt drei Werte mit: Rot, Grün, Blau — jeder von 0 (dunkel) bis 255 (volle Intensität).
Eine Zeile macht den Tensor: tf.browser.fromPixels(img) — Bild-Element rein, Tensor raus.
Normalisieren heißt „durch 255“. tensor.div(255.0) bringt alle Werte auf 0.0–1.0, damit das Training stabil läuft.
Alle Bilder müssen gleich groß sein. Die inputShape des Netzes steht fest — also vorher skalieren oder zuschneiden (224×224, 28×28, 32×32).

📎 So zitierst du dieses Kapitel

HerrKI: Bilder als Tensoren. herrki.de/020_bilder_als_tensoren, ein privates Hobbyprojekt von Terragon.de, abgerufen am 4. November 2026.

Lizenz: CC BY 4.0 — frei nutzen, teilen, anpassen. Nennung: „HerrKI (herrki.de), ein privates Hobbyprojekt von Terragon.de“.

📄 Handout als PDF (für Lehrkräfte, mit Lösungen)