uni/courses/223015b/slides/2026-01-09-termin-2-bild-audio-video.md

marp, theme, paginate, backgroundColor, header, footer, title

marp	theme	paginate	backgroundColor	header	footer	title
true	gaia	true		Dateiformate, Schnittstellen, Speichermedien & Distributionswege (223015b)	Michael Czechowski – HdM Stuttgart – WS 2025/26	Dateiformate, Schnittstellen, Speichermedien & Distributionswege

<style> :root { --color-foreground: #1a1a2e; --color-highlight: #1e5f8a; --color-dimmed: #4a4a6a; } section.invert { --color-foreground: #fff; } section { font-size: 1.7rem; } h1 { color: #1e5f8a; } section.invert h1 { color: #fff; } h2 { color: #1f2937; } pre { background: #0f0f23; color: #5fb3e4; border-radius: 8px; border-left: 3px solid #1e5f8a; } pre code { background: transparent; color: inherit; } code { background: #1a1a2e; color: #5fb3e4; padding: 0.15em 0.4em; border-radius: 4px; } a { color: var(--color-highlight); } section.klausur { background: repeating-linear-gradient( 135deg, #e3f2fd, #e3f2fd 40px, #fff 40px, #fff 80px ) !important; } section.klausur footer { display: none; } section.aufgabe { background: #e3f2fd !important; } section.aufgabe footer { display: none; } </style>

Dateiformate, Schnittstellen, Speichermedien & Distributionswege

223015b · Modul "Technik 1" · 1. Semester Digital- und Medienwirtschaft Hochschule der Medien Stuttgart

Wintersemester 2025/26

https://librete.ch/hdm/223015b/

---

---

Teil 1: Dateiformate

Bild-, Audio- & Videoformate

---

---

Was ist ein Bild?

Digital = Pixelraster

Beispiel: 1920×1080 (Full HD) = 2.073.600 Pixel

Jedes Pixel = 3 Bytes (RGB) 2.073.600 × 3 = 6,2 MB

Für EIN Foto!

---

Rastergrafiken (Bitmaps)

Aufbau: 2D-Array von Pixeln mit Farbwerten

Speicherbedarf (unkomprimiert): Breite × Höhe × Farbtiefe (in Bytes) → 1920×1080 × 3 Byte (RGB) = 6,2 MB

Farbtiefe:

• 1 Bit = 2 Farben (S/W)
• 8 Bit = 256 Farben (Graustufen/Palette)
• 24 Bit = 16,7 Mio. Farben (True Color)
• 32 Bit = True Color + Alpha (Transparenz)

Skalierung: Interpolation (Nearest Neighbor, Bilinear, Bicubic)

---

Vektorgrafiken

Speicherung als geometrische Primitive:

• Pfade (Bézierkurven mit Kontrollpunkten)
• Grundformen (Rechteck, Ellipse, Polygon)
• Text (Glyphen als Outlines)

SVG-Beispiel: <circle cx="50" cy="50" r="40" fill="#ff0000"/> → 3 Parameter statt 5.027 Pixel (r=40)

Rendering-Pipeline: Vektordaten → Rasterisierung → Framebuffer → Display

Auflösungsunabhängig: Gleiche Datei für Icon (32px) und Plakat (3m)

---

Raster vs. Vektor: Entscheidungskriterien

Kriterium	Raster	Vektor
Speicherung	Pixelmatrix	Geometrie + Attribute
Skalierung	Qualitätsverlust	Verlustfrei
Komplexität	O(Breite × Höhe)	O(Anzahl Objekte)
Bearbeitung	Pixelbasiert	Objektbasiert

Wann Raster? Fotos, Texturen, komplexe Farbverläufe Wann Vektor? Logos, Icons, Typografie, technische Zeichnungen

Konvertierung:

• Raster → Vektor: Tracing (verlustbehaftet, approximiert)
• Vektor → Raster: Rasterisierung (exakt, aber auflösungsgebunden)

---

Lossless: PNG

PNG = Portable Network Graphics (1996)

Funktionsweise:

• Vorhersage (Pixel ähneln Nachbarn)
• Differenz-Encoding
• DEFLATE-Algorithmus (wie ZIP)

Kompression: 20-50% Ersparnis

Gut für: Screenshots, Logos, Text Schlecht für: Fotos

---

Lossy: JPEG

JPEG = Joint Photographic Experts Group (1992)

Eigenschaften:

• Lossy Kompression
• 90%+ Platzersparnis möglich
• Artefakte bei hoher Kompression

6 MB → 500 KB (typisch)

---

---

Wie funktioniert JPEG? (1/2)

Schritt 1: RGB → YCbCr

• Y = Helligkeit (Luminanz)
• Cb/Cr = Farbe (Chrominanz)

Warum? Menschen sehen Helligkeit besser als Farbe

Schritt 2: Chroma Subsampling Farbauflösung reduzieren (4:2:0) → 50% Datenmenge weg, kaum sichtbar

---

Wie funktioniert JPEG? (2/2)

Schritt 3: DCT (Discrete Cosine Transform) Bild in 8×8-Blöcke → Frequenzspektrum

Schritt 4: Quantisierung Hohe Frequenzen (Details) stark reduzieren → Hier passiert Datenverlust!

Schritt 5: Huffman-Coding Lossless-Kompression der Restdaten

---

JPEG Qualität

Quality	Dateigröße	Artefakte
100	≈2-3 MB	Kaum
85-90	≈200-400 KB	Minimal
50	≈100 KB	Sichtbar

Sweet Spot: 85-90 10x Kompression, für Menschen kaum unterscheidbar

---

---

Die GIF-Geschichte

GIF = Graphics Interchange Format (1987) CompuServe (US-Online-Dienst)

Features:

• 256 Farben max (8-bit Palette)
• Lossless (für Palette)
• Animationen!

1994 Twist: Unisys hält Patent auf LZW-Kompression → Fordert Lizenzgebühren

→ "Burn All GIFs!" Kampagne

---

PNG vs. GIF

GIF: ✓ Animationen ✓ Breite Unterstützung ❌ Nur 256 Farben ❌ Patent-Probleme (bis 2003)

PNG: ✓ Millionen Farben ✓ Alpha-Transparenz ✓ Patent-frei ❌ Keine Animationen (bis APNG, 2004)

Ergebnis: PNG für Grafiken, GIF für Memes!

---

WebP & AVIF

WebP (Google, 2010):

• Lossy UND Lossless
• Animationen
• 25-35% kleiner als JPEG

AVIF (2019):

• Basiert auf AV1-Video-Codec
• 50% kleiner als JPEG
• HDR-Unterstützung
• Patent-frei

---

---

Warum Instagram eure Fotos "ruiniert"

Upload-Pipeline:

1. Dein Foto: 12 MP, 8 MB
2. Instagram skaliert: max. 1080px
3. Re-Kompression: JPEG Quality ~75
4. Endgröße: 200-400 KB

Warum?

• Speicherkosten (Milliarden Fotos!)
• Ladezeiten (Mobile)
• Bandbreite (günstiger)

---

Hands-On: Kompression vergleichen

Aufgabe (40 Min):

1. Hochauflösendes Foto (eigenes oder CC)
2. Exportiere:
   • PNG
   • JPEG Q100, Q85, Q50
   • WebP (optional)
3. Tool: Squoosh.app (Google-Tool)
4. Vergleiche: Dateigrößen, sichtbare Unterschiede
5. Wo werden Artefakte sichtbar?

---

Teil 2: Video

Kompression & Codecs

---

---

Das Problem: Videos sind RIIIIIIIESIG

1 Minute 4K-Video (3840×2160):

• 30 fps (Bilder/Sekunde)
• Jedes Bild: 24,8 MB (unkomprimiert)

Rechnung: 30 × 24,8 MB = 744 MB/Sekunde × 60 Sekunden = 44,6 GB/Minute

2-Stunden-Film: 5,3 TB!

---

Container: Das Dateiformat

Was ist ein Container? Das Dateiformat – eine "Box", die verschiedene Streams zusammenpackt:

• Video-Stream, Audio-Stream(s), Untertitel, Metadaten

Gängige Container:

• MP4 (.mp4) – Web, Streaming
• MKV (.mkv) – Archiv, viele Streams
• AVI (.avi) – Legacy (veraltet)
• MOV (.mov) – Apple-Ökosystem

---

Codec: Der Kompressionsalgorithmus

Was ist ein Codec? (Coder/Decoder) Entscheidet, WIE Video/Audio komprimiert wird

Video-Codecs:

Codec	Jahr	Verbreitung
H.264/AVC	2003	Universell, überall
H.265/HEVC	2013	4K, effizient, Lizenzen
VP9	2013	YouTube, Google
AV1	2018	Zukunft, lizenzfrei

Audio-Codecs: AAC, MP3, Opus, FLAC

---

Container + Codec = Video

Das Zusammenspiel:

┌─────────────────────────────┐
│  Container (z.B. MP4)       │
│  ┌────────────────────────┐ │
│  │ Video-Stream (H.264)   │ │
│  ├────────────────────────┤ │
│  │ Audio-Stream (AAC)     │ │
│  ├────────────────────────┤ │
│  │ Untertitel (SRT)       │ │
│  └────────────────────────┘ │
└─────────────────────────────┘

Häufiger Irrtum: "Das ist eine MP4-Datei" → Sagt nichts über den Codec aus!

---

---

Video-Kompression: Drei Prinzipien

1. Spatial Compression (Intra-Frame) Jedes Bild einzeln (wie JPEG) → I-Frames

2. Temporal Compression (Inter-Frame) Nur Änderungen zwischen Bildern → P-Frames, B-Frames

3. Motion Compensation "Ball bewegt sich von A nach B"

---

I-Frames, P-Frames, B-Frames

I-Frame (Intra): Vollständiges Bild (wie JPEG) Groß, aber unabhängig

P-Frame (Predicted): Referenziert vorherige Frames Viel kleiner

B-Frame (Bi-directional): Referenziert vorherige UND zukünftige Frames Am effizientesten

GOP: I - B - B - P - B - B - P - B - B - I

---

---

H.264 / AVC Codec (2003)

Der bisherige Platzhirsch

Warum dominant? ✓ Exzellente Kompression (100:1 möglich) ✓ Hardware-Support (jedes Gerät seit ~2010) ✓ YouTube, Netflix, Blu-ray – alles H.264

Features:

• Variable Block-Größen (16×16 bis 4×4)
• Deblocking-Filter
• CABAC-Coding

---

Das Patent-Problem

H.264 ist NICHT frei!

MPEG-LA (Patent Pool):

• 2.000+ Patente von ~30 Unternehmen
• Apple, Microsoft, Sony, Panasonic...

Lizenzgebühren:

• Hardware-Decoder: $0,20/Einheit
• Content-Distribution: Kostenlos für "Internet Broadcast"

Problem: Open-Source-Projekte in Grauzone

---

H.265 / HEVC Codec (2013)

50% bessere Kompression als H.264

ABER: Patent-Desaster

Drei (!) konkurrierende Patent-Pools:

• MPEG-LA
• HEVC Advance
• Velos Media

→ Viele bleiben bei H.264 oder suchen Alternativen

---

---

VP9: Googles Antwort

VP9 (2013): Entwickelt von Google (On2-Akquisition)

Eigenschaften: ✓ Ähnlich H.265-Kompression ✓ KOSTENLOS, patent-frei (laut Google) ✓ YouTube nutzt VP9 für 4K

Nachteile: ❌ Hardware-Support langsam ❌ Höherer CPU-Aufwand ❌ Nicht universell wie H.264

---

---

AV1: Die Open-Source-Revolution

AV1 (2018): Alliance for Open Media: Google, Netflix, Amazon, Microsoft, Apple, Mozilla...

Ziel: Patent-freier, moderner Codec

Features: ✓ 30% besser als H.265 ✓ Royalty-free, Open Source ✓ 8K, HDR, hohe Frame-Rates ✓ Erster Codec, der einen Grammy gewonnen hat (2025)

Stand 2025: YouTube, Netflix nutzen AV1 für 4K/8K

---

Adaptive Bitrate Streaming

Problem: Internet-Geschwindigkeit variiert

Lösung: Mehrere Qualitäten parallel

MPEG-DASH / HLS:

• 4K (20 Mbps)
• 1080p (5 Mbps)
• 720p (2,5 Mbps)
• 480p (1 Mbps)
• 240p (0,5 Mbps)

Segmente: 2-10 Sekunden (Player wählt dynamisch)

---

---

Container im Detail

MP4: Standard für Web/Mobile, DRM-fähig (H.264, H.265, AV1)

MKV: Open Source, beliebig viele Spuren (fast jeder Codec)

WebM: Google/Web-optimiert (nur VP9/AV1 + Opus/Vorbis)

---

Hands-On: Video analysieren

Aufgabe (40 Min):

Tools:

• Desktop: FFmpeg, HandBrake, MediaInfo
• Browser: Squoosh.app (Bilder), MediaInfo Online
• iOS/Android: MediaInfo App, VLC

1. Download: CC-Video (Big Buck Bunny, ~1 Min)
2. Analysiere: Container, Codec, Bitrate, Auflösung
3. Konvertiere: H.264 vs. H.265 (gleiche Qualität)
4. Vergleiche: Größen, Encoding-Zeit

---

Fragen & Diskussion

Kontakt: mail@librete.ch Folien: Online verfügbar unter https://librete.ch/hdm/223015b

---

Lizenz & Attribution

Diese Präsentation ist lizenziert unter Creative Commons Attribution-ShareAlike 4.0 International (CC BY-SA 4.0)

• Erlaubt Teilen & Anpassen mit Namensnennung
• Adaptionen müssen unter gleicher Lizenz geteilt werden

Vollständige Lizenz: https://creativecommons.org/licenses/by-sa/4.0/