diff --git a/courses/223015b/slides/2026-01-09-termin-2-bild-audio-video.md b/courses/223015b/slides/2026-01-09-termin-2-bild-audio-video.md index 2dd8d58..0df5bf7 100644 --- a/courses/223015b/slides/2026-01-09-termin-2-bild-audio-video.md +++ b/courses/223015b/slides/2026-01-09-termin-2-bild-audio-video.md @@ -138,13 +138,11 @@ Rechts: Stark komprimiert (JPEG-Artefakte sichtbar) # Was ist ein digitales Bild? -**Rasterbild = Pixelraster** +Ein digitales Bild ist ein Raster aus Farbpunkten (Pixel). +Jeder Pixel speichert einen RGB-Farbwert (3 Bytes). **Beispiel: Full HD (1920×1080)** -= 2.073.600 Pixel - -**Jedes Pixel = 3 Bytes (RGB)** -2.073.600 × 3 = **6,2 MB** += 2.073.600 Pixel × 3 Bytes = **6,2 MB** + + + +![bg contain 50%](./assets/Felis_silvestris_silvestris_small_gradual_decrease_of_quality_-_JPEG_compression.jpg) + +--- + +![bg contain right:34%](./assets/Posterization_example.jpg) + +# Grenzen der Kompression: JPEG-Artefakte + +**Bei hoher Kompression sichtbar:** + +* **Posterization:** + Farbverläufe werden stufig + +* **"Blocking":** + 8×8-Blöcke werden sichtbar (Block-Grenzen) + +* **Ringing:** + "Ghosting" an scharfen Kanten (Gibbs’sches Phänomen) + + + +--- + +# JPEG-Qualität in der Praxis + +| Quality¹ | Typische Größe (12 MP) | Artefakte | +|--------:|----------------------:|-----------| +| 100 | 2-3 MB | Minimal | +| 85-90 | 200-400 KB | Kaum sichtbar | +| 60 | ~100 KB | Bei genauem Hinsehen | +| 30 | ~50 KB | Deutlich sichtbar | + +**Sweet Spot: 85-90** +~10× Kompression, für Menschen kaum unterscheidbar. + +¹ je nach Programm andere Einstellungen beim Kodieren + + + +--- + # JPEG: Schritt 1 – Farbraum **RGB → YCbCr** (auch 3 Werte pro Pixel, nur anders aufgeteilt) @@ -327,7 +384,7 @@ Der Clou: Jetzt können wir Helligkeit und Farbe getrennt behandeln. -![bg contain](./assets/Common_chroma_subsampling_ratios_YCbCr_CORRECTED.svg.png) +![bg contain 70%](./assets/Common_chroma_subsampling_ratios_YCbCr_CORRECTED.svg.png) --- @@ -458,52 +515,6 @@ Color Banding (Verläufe werden "treppig") --- -# JPEG-Artefakte - -**Bei hoher Kompression sichtbar:** - -**Blocking:** -8×8-Blöcke werden sichtbar (Block-Grenzen) - -**Ringing:** -"Geister" um scharfe Kanten (Gibbs-Phänomen) - -**Color Banding:** -Farbverläufe werden stufig - - - ---- - -# JPEG-Qualität in der Praxis - -| Quality | Typische Größe (12 MP) | Artefakte | -|--------:|----------------------:|-----------| -| 100 | 2-3 MB | Minimal | -| 85-90 | 200-400 KB | Kaum sichtbar | -| 60 | ~100 KB | Bei genauem Hinsehen | -| 30 | ~50 KB | Deutlich sichtbar | - -**Sweet Spot: 85-90** -~10× Kompression, für Menschen kaum unterscheidbar. - - - ---- - # Andere Bildformate @@ -804,70 +815,110 @@ P/B-Frames speichern nur Unterschiede # Drei Kompressionsprinzipien -**1. Spatial Compression (Intra-Frame)** -Jedes Bild einzeln komprimieren (wie JPEG) +* **1. Spatial Compression (Intra-Frame)** + Jedes Bild einzeln komprimieren (wie JPEG) -**2. Temporal Compression (Inter-Frame)** -Nur Änderungen zwischen Bildern speichern +* **2. Temporal Compression (Inter-Frame)** + Nur Änderungen zwischen Bildern speichern -**3. Motion Compensation** -Bewegung beschreiben statt Pixel kopieren +* **3. Motion Compensation** + Bewegung beschreiben statt Pixel kopieren --- -# I-Frames, P-Frames, B-Frames +# 1. Spatial Compression (Intra-Frame) -**I-Frame (Intra):** -Vollständiges Bild, unabhängig komprimiert -Groß, aber Ankerpunkt für Navigation +**Jedes Bild einzeln komprimieren – wie JPEG** -**P-Frame (Predicted):** -Referenziert vorherige Frames -Speichert nur Unterschiede +Analysiert Redundanz *innerhalb* eines Frames: +- DCT (Frequenzanalyse) +- Quantisierung (Details entfernen) +- Entropie-Coding -**B-Frame (Bi-directional):** -Referenziert vorherige UND zukünftige Frames -Beste Kompression, aber komplexer +**→ I-Frame (Keyframe)** +Vollständiges Bild, unabhängig dekodierbar. --- -# Motion Compensation +# 2. Temporal Compression (Inter-Frame) -**Idee:** Bewegung beschreiben statt Pixel kopieren. +**Nur Änderungen zwischen Bildern speichern** -**Beispiel:** -Frame 1: Ball bei Position (100, 200) -Frame 2: Ball bei Position (120, 200) +| Frame-Typ | Referenziert | Größe | +|-----------|--------------|-------| +| **I-Frame** (Intra) | Keine Referenz (Keyframe) | 100% | +| **P-Frame** (Predicted) | Vorherige Frames | ~30% | +| **B-Frame** (Bi-directional) | Vorherige + zukünftige | ~15% | -**Statt 2 komplette Frames:** -"Ball bewegt sich 20 Pixel nach rechts" - -**Enormer Effizienzgewinn bei Video mit Bewegung.** +**GOP (Group of Pictures):** I - B - B - P - B - B - P - B - B - I + +--- + +# 3. Motion Compensation + +**Bewegung beschreiben statt Pixel kopieren** + +**Beispiel:** Ein 16×16 Pixel-Block + +Frame 1: Block an Position (100, 200) +Frame 2: Block an Position (120, 200) + +**Statt Block zweimal speichern:** +→ Motion Vector: "verschiebe um (+20, 0)" + + + + +--- + + + + +![bg fit](./assets/ipb-compression-canon.jpg) + + --- diff --git a/courses/223015b/slides/assets/Asterisk_with_jpg-artefacts.png b/courses/223015b/slides/assets/Asterisk_with_jpg-artefacts.png new file mode 100644 index 0000000..1b45f34 Binary files /dev/null and b/courses/223015b/slides/assets/Asterisk_with_jpg-artefacts.png differ diff --git a/courses/223015b/slides/assets/Felis_silvestris_silvestris_small_gradual_decrease_of_quality_-_JPEG_compression.jpg b/courses/223015b/slides/assets/Felis_silvestris_silvestris_small_gradual_decrease_of_quality_-_JPEG_compression.jpg new file mode 100644 index 0000000..0d3573b Binary files /dev/null and b/courses/223015b/slides/assets/Felis_silvestris_silvestris_small_gradual_decrease_of_quality_-_JPEG_compression.jpg differ diff --git a/courses/223015b/slides/assets/Posterization_example.jpg b/courses/223015b/slides/assets/Posterization_example.jpg new file mode 100644 index 0000000..c539e08 Binary files /dev/null and b/courses/223015b/slides/assets/Posterization_example.jpg differ