--- marp: true theme: gaia paginate: true backgroundColor: #fff header: "Dateiformate, Schnittstellen, Speichermedien & Distributionswege" footer: "Michael Czechowski – HdM Stuttgart – WS 2025/26" title: Dateiformate, Schnittstellen, Speichermedien & Distributionswege --- ![bg fit opacity:0.4](./assets/digital-landscape.png) # 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/](https://librete.ch/hdm/223015b/) --- ![bg fit](./assets/qr/slides-223015b.png) --- # Termin 2 – 09.01.2026 ## Bild-, Audio- & Videoformate --- ![bg](./assets/photo-comparison.png) --- # 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:** `` → 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) --- ![bg](./assets/jpeg-artifacts.png) --- # 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 Quality | 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 --- ![bg](./assets/gif-animation.png) --- # 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 --- ![bg](./assets/instagram-quality-loss.png) --- # 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 --- ![bg](./assets/netflix-4k.png) --- # Das Problem: Video ist RIESIG **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 vs. Codec **Container = Die Box** Verpackt Video, Audio, Untertitel, Metadaten **Beispiele:** MP4, MKV, AVI, MOV **Codec = Kompressionsalgorithmus** Entscheidet, WIE Daten komprimiert werden **Video-Codecs:** H.264, H.265, VP9, AV1 **Audio-Codecs:** AAC, MP3, Opus --- ![bg](./assets/container-codec-diagram.png) --- # 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 --- ![bg](./assets/iframe-pframe-diagram.png) --- # H.264: Der König **H.264 / AVC (2003)** **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 **H.265 (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 --- ![bg](./assets/youtube-vp9.png) --- # 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 --- ![bg](./assets/av1-logo.png) --- # 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 **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) --- ![bg](./assets/streaming-quality-switch.png) --- # 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](https://mediaarea.net/MediaInfoOnline) - Browser: [Squoosh.app](https://squoosh.app) (Bilder), [MediaInfo Online](https://mediaarea.net/MediaInfoOnline) - 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/