# Kapitel 3 — Inhalte: Bild, Audio, Video

**Bedient Klausur-Blöcke:** 4 (Bilder) + 5 (Audio) + 6 (Video)
**Slide-Budget:** ~49 (das umfangreichste Kapitel, ggf. 2 Vorlesungstermine)

## Bogen

Eine längere Sitzung (oder zwei), eine Linie: **„Drei Modalitäten — Bild, Audio, Video — drei Pipelines, drei Format-Politiken. Was passiert technisch und was politisch, und wie wählt man im Alltag?"**

1. Wir öffnen damit, dass *alle drei* Modalitäten Lossy-Kompression nutzen — und dass diese Lossy-Kompression nur funktioniert weil sie Wahrnehmungs-Lücken ausnutzt. Brücke zu Kapitel 2 (Psychoakustik/Psychovisualität).
2. **Bilder** zuerst — am stärksten visualisierbar, JPEG-Pipeline ist die didaktische Königsdisziplin. Alle 6 Schritte durchspielen.
3. **Audio** als zweite Modalität — MP3-Trick konkret, Spotify-Stufen am Handy, Format-Wahl-Matrix.
4. **Video** als „Bild + Zeit". Container/Codec-Trennung als entscheidendes Konzept. I/P/B-Frames. Patent-Politik (AV1 vs HEVC) als Industrie-Geschichte.

## Advance Organizer

```
                Wahrnehmung als Hebel (aus Kap 2)
                          │
              ┌───────────┼───────────┐
              ▼           ▼           ▼
            BILD        AUDIO       VIDEO
              │           │           │
       Raster/Vektor   Sampling    Container
       JPEG-Pipeline   MP3-Trick   + Codec
       Format-Wahl     Format-Wahl I/P/B
              │           │           │
              └───────────┴───────────┘
                          │
                 Patent · Adoption · Politik
                  (JPEG XL · WebP · AV1)
```

→ neue Demo-Datei: `kap03-modalitäten-bogen.html`

## Folien-Skelett

### Eröffnung (3 Slides)

| # | Typ | Titel/Kern | Lernziel | Berührungspunkt | Visualisierung |
|---|-----|-----------|---------|-----------------|----------------|
| 1 | Cover | Kapitel 3 — Inhalte: Bild, Audio, Video | — | — | reuse |
| 2 | Lead | Drei Modalitäten, ein Prinzip | Hook | Instagram · Spotify · YouTube | NEU collage |
| 3 | Advance Organizer | Wahrnehmung als gemeinsamer Hebel | Roter Faden | — | **NEU kap03-bogen** |

### Sub-Sektion A — Bilder (18 Slides, bedient Block 4)

| # | Typ | Titel/Kern | Lernziel | Berührungspunkt | Visualisierung |
|---|-----|-----------|---------|-----------------|----------------|
| 4 | Lead | Bilder | — | — | — |
| 5 | Inhalt | Pixel — ein Bild als Zahlen-Gitter | L4.1 | Smartphone-Foto-Auflösung | NEU pixel-gitter |
| 6 | Inhalt | Rastergrafik: viele Pixel | L4.1 | Smartphone-Foto | NEU raster-zoom |
| 7 | Inhalt | Vektorgrafik: mathematische Anweisungen | L4.1 | Logo · Icon | NEU vektor-skalierung |
| 8 | Klausur | Raster vs Vektor (Tabelle + Skalierung) | L4.1 | — | reuse vergleichs-tabelle |
| 9 | Inhalt | Wann welches? | L4.1, L4.4 | Logo (V), Foto (R), Icon (V) | — |
| 10 | Lead | JPEG: das Foto-Workhorse seit 1992 | — | — | — |
| 11 | Inhalt | JPEG-Pipeline-Übersicht (6 Schritte) | L4.2 | — | NEU pipeline-übersicht |
| 12 | Inhalt | Schritt 1: RGB → Y'CbCr (Farbraumkonversion) | L4.2 | — | reuse yuv-zerlegung |
| 13 | Inhalt | Schritt 2: Chroma-Subsampling 4:2:0 | L4.2 | — | NEU chroma-subsampling-grafik |
| 14 | Inhalt | Schritt 3: 8×8 Blöcke | L4.2 | — | NEU block-aufteilung |
| 15 | Inhalt | Schritt 4: DCT (Diskrete Kosinus-Transformation) | L4.2, L4.3 | — | NEU dct-frequenzraum |
| 16 | Inhalt | Schritt 5: Quantisierung | L4.2, L4.3 | — | NEU quantisierungstabelle |
| 17 | Inhalt | Schritt 6: Huffman-Coding | L4.2 | — | NEU huffman-zip |
| 18 | Klausur | Die 6 Schritte als Memo-Liste | L4.2 | — | NEU |
| 19 | Demo | JPEG-Artefakte sichtbar machen | L4.2, L4.3 | Squoosh im Browser | reuse jpeg-artifacts |
| 20 | Lead | Andere Bildformate | — | — | — |
| 21 | Inhalt | PNG · GIF · WebP · AVIF · SVG | L4.4 | — | reuse format-grid |
| 22 | Klausur | Wann-welches-Format-Matrix | L4.4 | Logo · Foto · Screenshot · Icon · Animation | NEU entscheidungsmatrix |
| 23 | Inhalt | Patent-Politik: warum WebP > JPEG XL | L4.5 | Chrome-Adoption · Apple | NEU patent-zeitleiste |

### Sub-Sektion B — Audio (8 Slides, bedient Block 5)

| # | Typ | Titel/Kern | Lernziel | Berührungspunkt | Visualisierung |
|---|-----|-----------|---------|-----------------|----------------|
| 24 | Lead | Audio | — | — | — |
| 25 | Inhalt | Sampling + Bittiefe Recap | L5.1 | aus Kap 1 | — |
| 26 | Inhalt | MP3-Trick: Maskierung | L5.1 | — | NEU maskierung-grafik |
| 27 | Inhalt | MP3-Trick: Hörschwelle | L5.1 | — | NEU hörschwelle-grafik |
| 28 | Inhalt | Bitrate-Stufen 128/192/320 kbit/s | L5.2 | Spotify-Setting | NEU bitrate-vergleich |
| 29 | Inhalt | Audio-Format-Landschaft | L5.3 | WAV · MP3 · FLAC · AAC · OGG · Opus | NEU format-tabelle |
| 30 | Klausur | Format-Wahl: Stream · Master · Sprachnachricht · Podcast | L5.3 | — | NEU entscheidungsmatrix-audio |
| 31 | Demo | Spotify-Stream-Bitrate live anhören | L5.2 | Spotify-App | — |

### Sub-Sektion C — Video (14 Slides, bedient Block 6)

| # | Typ | Titel/Kern | Lernziel | Berührungspunkt | Visualisierung |
|---|-----|-----------|---------|-----------------|----------------|
| 32 | Lead | Video — Bild plus Zeit | — | — | — |
| 33 | Inhalt | Pixel × Pixel × Hz = Datenflut | L6.4 | 4K@60fps roh | NEU datenflut-rechnung |
| 34 | Klausur | **Container ≠ Codec** | L6.1 | .mp4 öffnen | NEU container-codec-trennung |
| 35 | Inhalt | Was ist ein Container | L6.1 | MP4 · MKV · WebM | NEU container-anatomie |
| 36 | Inhalt | Was ist ein Codec | L6.1 | H.264 · H.265 · VP9 · AV1 | — |
| 37 | Inhalt | Inter-Frame-Kompression — die zentrale Idee | L6.2 | — | NEU inter-frame-diagram |
| 38 | Klausur | I- · P- · B-Frames | L6.2 | — | reuse IPB-frame-diagram |
| 39 | Inhalt | Motion Compensation | L6.2 | — | NEU motion-compensation |
| 40 | Lead | Die Codec-Landschaft | — | — | — |
| 41 | Inhalt | H.264 / AVC — der Workhorse | L6.3 | YouTube · Zoom | reuse h264-folie |
| 42 | Inhalt | H.265 / HEVC — Patent-Chaos | L6.3 | Apple-Adoption | reuse h265-folie |
| 43 | Inhalt | VP9 + AV1 — Antwort von Google + Alliance | L6.3 | YouTube-Streaming | reuse av1-folie |
| 44 | Klausur | Patent vs Open: warum AV1 | L6.3 | Netflix · YouTube · Twitch | NEU patent-vergleich |
| 45 | Inhalt | 4K-Stream-Bitrate vs Heim-Bandbreite | L6.4 | 25 Mbit/s eigener Anschluss | NEU bandbreite-vergleich |

### Selbstlernen + Zusammenfassung (4 Slides)

| # | Typ | Titel/Kern | Lernziel | Berührungspunkt | Visualisierung |
|---|-----|-----------|---------|-----------------|----------------|
| 46 | Selbstlernen | Bild in Squoosh.app komprimieren | L4.2, L4.4 | Squoosh im Browser | — |
| 47 | Selbstlernen | MP3 vs FLAC unterscheidbar? | L5.1, L5.2 | Spotify HiFi-Test | — |
| 48 | Selbstlernen | mediainfo auf eine Videodatei | L6.1, L6.2 | mediainfo CLI | — |
| 49 | Zusammenfassung | Drei Modalitäten, gleiches Prinzip | alle | — | NEU summary |

## Streichungs-Liste

Aus dem aktuellen `02-bild-audio-video.md` (~70 Slides):
- Diverse Vertiefungs-Slides die Hauptfolien wörtlich wiederholen — raus (Mayer Redundancy)
- DCT-Math-Tiefe in einer eigenen Folie — eindampfen auf Schritt 4 (Slide 15)
- Doppelte „Container vs Codec"-Folien — eine reicht (Slide 34)
- AV1-Emmy-Award als eigene Folie — als Speaker-Note in Slide 43

Aus dem aktuellen `01-grundlagen-text-audio.md` werden Bilder/Audio/Video-Folien hierher verschoben:
- MP3-Psychoakustik-Slides
- Sampling-Recap nur als Vorgriff (Recap statt Vollerklärung — die kam in Kap 1)

## Visualisierungen — neu zu bauen

| Demo-Datei | Was zeigt sie |
|------------|---------------|
| `kap03-modalitäten-bogen.html` | Advance Organizer drei Modalitäten |
| `pixel-gitter.html` | Bild als Zahlen-Gitter |
| `raster-zoom.html` | Rasterbild beim Skalieren pixelig |
| `vektor-skalierung.html` | Vektorbild bleibt scharf |
| `pipeline-übersicht.html` | JPEG 6 Schritte als Pipeline |
| `chroma-subsampling-grafik.html` | 4:4:4 vs 4:2:0 visuell |
| `dct-frequenzraum.html` | Bildblock im Frequenzraum |
| `quantisierungstabelle.html` | Tabelle + Effekt |
| `huffman-zip.html` | Huffman als finale Kompression |
| `entscheidungsmatrix-bildformate.html` | Wann-welches-Bildformat |
| `patent-zeitleiste.html` | JPEG XL vs WebP Adoption |
| `maskierung-grafik.html` | Lauter-Ton-überdeckt-leisen |
| `hörschwelle-grafik.html` | Hörschwelle im Frequenzraum |
| `bitrate-vergleich.html` | 128/192/320 kbit/s mit Größenvergleich |
| `format-tabelle-audio.html` | WAV/MP3/FLAC/AAC/OGG/Opus |
| `entscheidungsmatrix-audio.html` | Wann-welches-Audio-Format |
| `datenflut-rechnung.html` | 4K@60fps roh: Datenrate |
| `container-codec-trennung.html` | MP4-Hülle, drinnen verschiedene Codecs |
| `container-anatomie.html` | MP4-Container-Aufbau |
| `inter-frame-diagram.html` | Inter-Frame als Konzept |
| `motion-compensation.html` | Block aus vorigem Frame verschieben |
| `patent-vergleich.html` | H.264/H.265/AV1 Patent-Politik |
| `bandbreite-vergleich.html` | 4K-Bitrate vs Internet-Bandbreite |
| `summary-kap03.html` | Zusammenfassung |

Reuse: yuv-zerlegung, jpeg-artifacts, format-grid, IPB-frame-diagram, h264/h265/av1-Slides, vergleichs-tabelle (alle Bestand in `slides/223015b/assets/`).

## Hinweis Zeitlich

50 Slides für 90 Min ist eng (~1,8 min pro Slide inkl Erklärung). Optionen:
- **Variante A:** Als zwei Termine planen (Termin 1: Bilder, Termin 2: Audio+Video). Sauberster pädagogischer Schnitt.
- **Variante B:** In einem Termin durchziehen, Selbstlernens als Hausaufgabe.
- **Variante C:** Audio kürzen (Sub-Sektion B als reduzierte Vertiefungs-Stunde mit Verweis auf Kap 1).

Entscheidung Dozent.

## Validierungs-Status

- [x] Bogen formuliert
- [x] Advance Organizer skizziert
- [x] Folien-Skelett (3 Sub-Sektionen)
- [x] Selbstlernen in jeder Sub-Sektion
- [x] Streichungs-Liste
- [x] Visualisierungs-TODO
- [x] Zeit-Hinweis für Dozent
- [ ] Dozent-Review und Lock