- add erklaerung css class and 6 explanation slides to 01-grundlagen-text-audio.md - add erklaerung css class and 9 explanation slides to 02-bild-audio-video.md - add erklaerung css class and 2 explanation slides to 03-speichermedien-schnittstellen.md - regenerate klausurfolien.md with updated content
38 KiB
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 | Dateiformate, Schnittstellen, Speichermedien & Distributionswege |
Dateiformate, Schnittstellen, Speichermedien & Distributionswege
223015b · Modul "Technik 1" · 1. Semester Digital- und Medienwirtschaft Hochschule der Medien Stuttgart
https://librete.ch/hdm/223015b/
Teil 2: Bild- & Videoformate
Warum verschiedene Dateiformate?
Ein Dateiformat definiert:
- Ob und wie Daten komprimiert werden
- Welche Metadaten enthalten sind
- Wie Daten codiert und decodiert werden (Co·dec)
| Ziel | Bild | Audio | Dokument |
|---|---|---|---|
| Kleine Dateien | JPEG | MP3 | — |
| Perfekte Qualität | PNG, RAW | FLAC | |
| Animation/Video | GIF | — | — |
| Skalierbarkeit | SVG | — |
Digitale Bilder
Raster- und Vektorgrafiken
Was ist ein digitales Bild?
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 × 3 Bytes = 6,2 MB
Rastergrafiken
Aufbau: Liste von Pixeln mit Farbwerten (2D-Array)
Speicherbedarf (unkomprimiert): Breite × Höhe × Farbtiefe (in Bytes)
Beispiele: JPEG, PNG, WebP
| Bits (Farbtiefe) | Farben | Anwendung |
|---|---|---|
| 1 | 2 | Schwarz/Weiß (Fax) |
| 8 | 256 | Graustufen, GIF |
| 24 | 16,7 Mio. | True Color (Standard) |
| 32 | 16,7 Mio. + Alpha | Transparenz |
Rastergrafiken: Erklaerung
Definition: Bilder als zweidimensionales Raster (Array) von Pixeln mit Farbwerten.
Speicherberechnung (unkomprimiert):
Breite × Hoehe × (Farbtiefe ÷ 8) = Bytes
Beispiel: 1920×1080 bei 24 Bit
- 1920 × 1080 × 3 = 6.220.800 Bytes ≈ 6,2 MB
| Farbtiefe | Farben | Anwendung |
|---|---|---|
| 1 Bit | 2 | S/W, Fax |
| 8 Bit | 256 | Graustufen, GIF |
| 24 Bit | 16,7 Mio | True Color (RGB) |
| 32 Bit | 16,7 Mio + Alpha | Transparenz |
Merkhilfe: "24 Bit = 3 Bytes = RGB" (8+8+8)
Das Problem der Skalierung
Vergrößern: Fehlende Pixel müssen erfunden werden (Interpolation)
Verkleinern: Pixel müssen zusammengefasst werden
Interpolationsverfahren:
- Nearest Neighbor: Schnell, pixelig
- Bilinear: Glättet, Standardverfahren
- Bicubic: Hohe Qualität, rechenintensiv
- Lanczos: Beste Qualität, mathematisch komplex
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"/>
SVG beschreibt WAS gezeichnet werden soll, nicht WIE jeder Pixel aussieht.
Vektorgrafiken: Erklaerung
Definition: Bilder als mathematische Beschreibung geometrischer Formen (Pfade, Kurven, Formen).
| Eigenschaft | Raster | Vektor |
|---|---|---|
| Speicherung | Pixel-Array | Geometrie-Anweisungen |
| Skalierung | Qualitaetsverlust | Verlustfrei |
| Ideal fuer | Fotos | Logos, Icons |
| Formate | JPEG, PNG | SVG, PDF, AI |
SVG-Beispiel:
<circle cx="50" cy="50" r="40" fill="red"/>
→ Beschreibt WAS, nicht WIE (deklarativ)
Konvertierung:
- Vektor → Raster: Einfach (Rasterisierung)
- Raster → Vektor: Schwierig (Tracing)
Raster- und Vektorgrafiken
| Raster | Vektor | |
|---|---|---|
| Optimal für | Fotos, komplexe Bilder | Logos, Icons, Illustrationen |
| Skalierung | Qualitätsverlust | Verlustfrei |
| Dateigröße | Abhängig von Auflösung | Abhängig von Komplexität |
| Formate | JPEG, PNG, WebP | SVG, PDF, AI |
| Bearbeitung | Pixel-basiert | Objekt-basiert |
Menschliche Wahrnehmung
Psychovisuelle Kompression
Die Schwächen des Auges
Menschen sehen:
- Helligkeit besser als Farbe
- Große Flächen besser als feine Details
- Niedrige Frequenzen besser als hohe
JPEG nutzt das aus:
- Farbauflösung reduzieren (Helligkeit behalten)
- Glatte Flächen effizient speichern
- Hohe Frequenzen (feine Details) verwerfen
Psychovisuelle Wahrnehmung: Erklaerung
Definition: Das menschliche Auge hat Schwaechen, die Kompressionsverfahren gezielt ausnutzen.
Was Menschen schlecht sehen:
| Eigenschaft | Wahrnehmung | JPEG-Strategie |
|---|---|---|
| Farbe vs. Helligkeit | Helligkeit besser | Farbaufloesung reduzieren |
| Hohe Frequenzen | Schlechter | Feine Details verwerfen |
| Kleine Unterschiede | Kaum merkbar | Quantisierung |
Raeumliche Frequenz:
- Niedrig: Langsame Aenderung = grosse Flaechen
- Hoch: Schnelle Aenderung = feine Details, Kanten
Biologische Grundlage:
- Mehr Staebchen (Helligkeit) als Zapfen (Farbe) im Auge
- Aehnlich: Psychoakustik bei MP3 (Maskierungseffekte)
Grenzen der Kompression: JPEG-Artefakte
Bei starker Kompression sichtbar:
-
Posterization: Farbverläufe werden stufig
-
Blocking: 8×8-Blöcke werden sichtbar
-
Ringing: "Geister" an scharfen Kanten
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
JPEG-Kompression
Sechs Schritte im Detail
JPEG Schritt 1: Farbraumkonversion
RGB → Y'CbCr
- Y = Helligkeit (Luminanz)
- Cb = Blau-Gelb-Anteil (Chrominanz)
- Cr = Rot-Grün-Anteil (Chrominanz)
Warum? Y (Helligkeit) behält volle Auflösung Cb/Cr (Farbe) kann reduziert werden
JPEG Farbraumkonversion: Erklaerung
Definition: Umwandlung von RGB (Rot-Gruen-Blau) in YCbCr (Helligkeit + Farbdifferenzen).
| Kanal | Bedeutung | Behandlung |
|---|---|---|
| Y | Luminanz (Helligkeit) | Volle Aufloesung behalten |
| Cb | Blau-Gelb-Differenz | Kann reduziert werden |
| Cr | Rot-Gruen-Differenz | Kann reduziert werden |
Warum diese Trennung?
- Menschliches Auge: empfindlicher fuer Helligkeit als Farbe
- Y behaelt volle Aufloesung → Schaerfe erhalten
- Cb/Cr reduziert (Chroma Subsampling) → Daten sparen
Chroma Subsampling 4:2:0:
- 4 Pixel teilen sich einen Farbwert
- Jeder Pixel behaelt eigene Helligkeit
- = 50% Datenreduktion bei kaum sichtbarem Verlust
JPEG Schritt 2: Chroma Subsampling
Notation J:a:b (bezogen auf 4×2 Pixel-Block):
- J = Referenzbreite (immer 4)
- a = Farbsamples in Zeile 1
- b = Farbsamples in Zeile 2
| Schema | Bedeutung | Farbdaten |
|---|---|---|
| 4:4:4 | Volle Farbauflösung | 100% |
| 4:2:2 | Halbe horizontale Auflösung | 50% |
| 4:2:0 | Viertel Auflösung (2×2 teilt Farbe) | 25% |
4:2:0 ist JPEG-Standard
JPEG Schritt 3: Block-Aufteilung
Das Bild wird in 8×8-Pixel-Blöcke zerlegt
Jeder Block wird unabhängig verarbeitet. Bei 1920×1080: 240 × 135 = 32.400 Blöcke
Level Shift: Pixelwerte um −128 verschieben
- Vorher: 0 bis 255
- Nachher: −128 bis +127
Warum? DCT arbeitet besser mit Werten um Null
JPEG Schritt 4: DCT (Discrete Cosine Transform)
Jeder 8×8-Block wird transformiert: 64 Pixelwerte → 64 Frequenzkoeffizienten
Die 64 Koeffizienten:
| Position | Name | Bedeutung |
|---|---|---|
| (0,0) | DC | Durchschnittshelligkeit |
| Rest | AC | Helligkeitsänderungen |
Energy Compaction: 90% der Information in den ersten 10–15 Koeffizienten DCT selbst ist verlustfrei und reversibel!
JPEG Schritt 5: Quantisierung
Hier passiert der Datenverlust!
Die DCT hat sortiert – jetzt wird aufgeräumt:
- Wichtige Werte (niedrige Frequenz) → präzise behalten
- Unwichtige Werte (hohe Frequenz) → vergröbern oder Null setzen
Ergebnis: Von 64 Werten pro Block bleiben oft nur 5–15 übrig Rest wird zu Nullen → extrem gut komprimierbar
Quality-Einstellung: Hoch = mehr Werte behalten = größere Datei Niedrig = mehr Nullen = kleinere Datei, mehr Artefakte
JPEG Schritt 5b: Zigzag & RLE
Nach Quantisierung: Viele Nullen (v.a. bei hohen Frequenzen)
Zigzag-Scan: Matrix diagonal durchlaufen → Nullen sammeln sich am Ende
┌────────────────┐
│ 1 2 6 7 ... │ Niedrig → Hoch
│ 3 5 8 ... │ (diagonal)
│ 4 9 ... │
└────────────────┘
RLE (Run-Length Encoding):
0 0 0 0 0 0 0 0 → (8, 0) = "acht Nullen"
JPEG Schritt 6: Huffman-Coding
Verlustfreie Kompression der Restwerte
Idee: Variable Bitlänge statt fester 8 Bit Häufige Werte → kurze Codes
| Zeichen | Häufigkeit | Code |
|---|---|---|
| e | 40% | 0 (1 Bit) |
| a | 25% | 10 (2 Bit) |
| i | 20% | 110 (3 Bit) |
| o | 10% | 1110 (4 Bit) |
| u | 5% | 1111 (4 Bit) |
Huffman-Coding: Erklaerung
Definition: Verlustfreie Kompression durch variable Codelaengen basierend auf Zeichenhaeufigkeit.
Prinzip:
- Haeufige Zeichen → kurze Codes
- Seltene Zeichen → lange Codes
- Praefix-frei: Kein Code ist Anfang eines anderen
Beispiel ABRACADABRA:
| Zeichen | Haeufigkeit | Code |
|---|---|---|
| A | 5× | 0 (1 Bit) |
| B | 2× | 10 (2 Bit) |
| R | 2× | 110 (3 Bit) |
Kompression: 88 Bit → 23 Bit = 74% gespart
Einsatz: JPEG, ZIP, PNG, MP3, DEFLATE
Andere Bildformate
PNG, GIF, WebP, AVIF
15:33 Uhr weiter
PNG: Verlustfrei mit Transparenz
PNG = Portable Network Graphics (1996)
Entstehung: GIF-Patent-Streit → Community entwickelt Alternative
Features:
- Verlustfrei (Lossless)
- Alpha-Transparenz (8-Bit, 256 Stufen)
- Millionen Farben (24/48 Bit)
- Patent-frei
Ideal für: Grafiken, Screenshots, Text, Logos
GIF: Der Meme-Veteran
GIF = Graphics Interchange Format (1987)
Features:
- 256 Farben (8-Bit Palette)
- Verlustfrei (innerhalb der Palette)
- Animationen
Das Patent-Drama (1994): Unisys fordert Lizenzgebühren für LZW-Kompression → "Burn All GIFs!"-Kampagne → PNG als Alternative
Heute: Kulturell unsterblich (Memes, Reaktionen)
WebP & AVIF: Moderne Alternativen
WebP (Google, 2010):
- Lossy und Lossless
- Transparenz und Animationen
- 25–35% kleiner als JPEG
AVIF (2019):
- Basiert auf AV1-Video-Codec
- 50% kleiner als JPEG
- HDR-Unterstützung, patent-frei
Browser-Support 2025: WebP universell, AVIF wächst
WebP & AVIF: Erklaerung
Definition: Moderne Bildformate mit besserer Kompression als JPEG.
| Format | Jahr | Basis | Vorteil |
|---|---|---|---|
| WebP | 2010 | VP8 (Google) | 25-35% kleiner als JPEG |
| AVIF | 2019 | AV1 | 50% kleiner als JPEG |
WebP Features:
- Lossy und Lossless
- Transparenz (Alpha)
- Animationen (ersetzt GIF)
AVIF Features:
- HDR-Unterstuetzung
- Patent-frei (Alliance for Open Media)
- Beste Kompression, aber langsamer
Browser-Support 2025: WebP universell, AVIF waechst Realitaet: JPEG bleibt dominant (Kompatibilitaet)
Formatwahl in der Praxis
| Anwendung | Format |
|---|---|
| Fotos fürs Web | JPEG (85), WebP |
| Screenshots | PNG |
| Logos, Icons | SVG, PNG |
| Animationen | GIF, WebP, APNG |
| Archivierung | TIFF, PNG, RAW |
| Social Media | Was die Plattform erlaubt |
Warum Instagram eure Fotos "ruiniert"
Die Upload-Pipeline:
- Euer Foto: 12 MP, 8 MB
- Instagram skaliert: max. 1080px Breite
- Re-Kompression: JPEG Quality ~75
- Ergebnis: 200–400 KB
Warum?
- Speicherkosten (Milliarden Fotos)
- Ladezeiten (Mobile-First)
- Bandbreite (günstiger für alle)
Video
Bilder + Zeit + Audio
Das Größenproblem bei Video
4K-Video (3840×2160), unkomprimiert:
3840 × 2160 × 3 Bytes = 24,8 MB pro Frame
× 30 fps = 744 MB/Sekunde
× 60 Sekunden = 44,6 GB pro Minute
Ein 2-Stunden-Film: über 5 Terabyte
Container und Codec
Container = Dateiformat (z.B. MP4) Die "Box", die verschiedene Streams zusammenpackt:
- Video-Stream
- Audio-Stream(s)
- Untertitel
- Metadaten
Codec = Kompressionsalgorithmus (z.B. H.264) Bestimmt, WIE komprimiert wird
Container vs. Codec: Erklaerung
Definition: Container und Codec sind zwei verschiedene Konzepte bei Videodateien.
| Begriff | Bedeutung | Beispiele |
|---|---|---|
| Container | Dateiformat/"Box" | MP4, MKV, WebM, MOV |
| Codec | Kompressionsalgorithmus | H.264, H.265, VP9, AV1 |
Container enthaelt:
- Video-Stream (komprimiert mit Codec)
- Audio-Stream(s)
- Untertitel
- Metadaten (Kapitel, Thumbnail)
Wichtig: Gleiche Endung ≠ gleicher Inhalt!
- film.mp4 kann H.264, H.265 oder AV1 enthalten
- Tool-Tipp: MediaInfo zeigt beides an
Merkhilfe: "Container = Schachtel, Codec = Verpackungsart"
Gängige Container
| Container | Verwendung |
|---|---|
| MP4 (.mp4) | Web, Streaming, universell |
| MKV (.mkv) | Archiv, viele Streams, offen |
| MOV (.mov) | Apple-Ökosystem |
| WebM (.webm) | Web, nur VP9/AV1 + Opus |
| AVI (.avi) | Legacy, veraltet |
Video-Codecs im Überblick
| Codec | Jahr | Status |
|---|---|---|
| H.264/AVC | 2003 | Universal, überall |
| H.265/HEVC | 2013 | Effizienter, Patent-Chaos |
| VP9 | 2013 | YouTube, patent-frei |
| AV1 | 2018 | Zukunft, patent-frei |
Container + Codec = Video
┌─────────────────────────────┐
│ Container (z.B. MP4) │
│ ┌────────────────────────┐ │
│ │ Video-Stream (H.264) │ │
│ ├────────────────────────┤ │
│ │ Audio-Stream (AAC) │ │
│ ├────────────────────────┤ │
│ │ Untertitel (SRT) │ │
│ ├────────────────────────┤ │
│ │ Metadaten │ │
│ └────────────────────────┘ │
└─────────────────────────────┘
Video-Kompression
Raum und Zeit nutzen
Drei Kompressionsprinzipien
1. Spatial Compression (Intra-Frame) Jedes Bild einzeln komprimieren (wie JPEG)
2. Temporal Compression (Inter-Frame) Nur Änderungen zwischen Bildern speichern
3. Motion Compensation Bewegung beschreiben statt Pixel kopieren
Spatial Compression (Intra-Frame)
Jedes Bild einzeln komprimieren – wie JPEG
Analysiert Redundanz innerhalb eines Frames:
- DCT (Frequenzanalyse)
- Quantisierung
- Entropie-Coding
→ I-Frame (Keyframe) Vollständiges Bild, unabhängig dekodierbar
Temporal Compression (Inter-Frame)
Nur Änderungen zwischen Bildern speichern
| Frame-Typ | Referenziert | Typische Größe |
|---|---|---|
| I-Frame | Nichts (Keyframe) | 100% |
| P-Frame | Vorherige Frames | ~30% |
| B-Frame | Vorherige + zukünftige | ~15% |
GOP (Group of Pictures): I - B - B - P - B - B - P - B - B - I
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)"
H.264 / AVC
Advanced Video Coding (2003)
Warum dominant?
- Exzellente Kompression (~100:1 möglich)
- Hardware-Decoder in jedem Gerät seit ~2010
- YouTube, Netflix, Blu-ray – alles H.264
Features:
- Variable Block-Größen (16×16 bis 4×4)
- Deblocking-Filter (reduziert Artefakte)
H.264/AVC: Erklaerung
Definition: Der dominierende Video-Codec seit 2003, der modernes Video-Streaming erst ermoeglichte.
Warum so erfolgreich?
| Eigenschaft | Bedeutung |
|---|---|
| Kompression | ~100:1 moeglich |
| Hardware | Decoder in jedem Geraet seit ~2010 |
| Verbreitung | YouTube, Netflix, Blu-ray |
Technische Features:
- Variable Block-Groessen (16×16 bis 4×4)
- Deblocking-Filter (reduziert Blocking-Artefakte)
- I-, P-, B-Frames (temporale Kompression)
Patent-Situation:
- MPEG-LA Pool: 2000+ Patente
- "Internet Broadcast" fuer Endnutzer kostenlos
- Hardware-Decoder: ~$0,20/Geraet
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 pro Einheit
- "Internet Broadcast": Kostenlos (YouTube etc.)
Problem: Open-Source-Projekte in Grauzone
H.265 / HEVC: Effizienter, aber...
High Efficiency Video Coding (2013)
50% bessere Kompression als H.264
Das Problem: Patent-Chaos
Drei konkurrierende Patent-Pools:
- MPEG-LA
- HEVC Advance
- Velos Media
Unklare Kosten, rechtliche Unsicherheit → Viele bleiben bei H.264 oder wechseln zu AV1
VP9: Googles Antwort
VP9 (2013)
Google kaufte On2 Technologies (2010, $133M) VP8 → VP9 → AV1
Eigenschaften:
- Ähnliche Effizienz wie H.265
- Patent-frei (laut Google)
- YouTube nutzt VP9 für 4K
Nachteil: Höherer CPU-Aufwand als H.264
AV1: Die offene Zukunft
AV1 (2018)
Alliance for Open Media: Google, Netflix, Amazon, Microsoft, Apple, Mozilla...
Eigenschaften:
- 30% besser als H.265
- Royalty-free, Open Source
- 8K, HDR, hohe Frame-Rates
Stand 2025: YouTube, Netflix nutzen AV1 für 4K/8K Hardware-Encoder in aktuellen GPUs
AV1: Erklaerung
Definition: Der offene, lizenzfreie Video-Codec der Zukunft, entwickelt von der Alliance for Open Media.
Alliance for Open Media (AOM):
- Gegruendet 2015: Google, Netflix, Amazon, Microsoft, Apple, Mozilla
- Ziel: Patent-freier Standard nach H.265-Chaos
| Eigenschaft | AV1 |
|---|---|
| Effizienz | 30% besser als H.265 |
| Lizenz | Royalty-free, Open Source |
| Features | 8K, HDR, hohe Frame-Rates |
Stand 2025:
- YouTube, Netflix nutzen AV1 fuer 4K/8K
- Hardware-Encoder in aktuellen GPUs
- Emmy-Gewinner 2024 fuer technische Innovation
Nachteil: Encoding sehr langsam (Hardware loest das)
Fragen & Diskussion
Kontakt: lb-czechowski@hdm-stuttgart.de Folien: 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: creativecommons.org/licenses/by-sa/4.0/
Selbstlernen: Bildkompression
- Öffne squoosh.app
- Lade ein Foto hoch
- Vergleiche: JPEG (verschiedene Quality) vs. WebP vs. AVIF
- Beobachte: Dateigröße, Artefakte, Ladezeit
Fragen zum Erkunden:
- Ab welcher Quality werden Artefakte sichtbar?
- Wie viel kleiner ist WebP bei gleicher Qualität?
Selbstlernen: Video analysieren
- Video herunterladen (z.B. Big Buck Bunny)
- Mit MediaInfo analysieren: Container, Codec, Bitrate
- Optional: Mit HandBrake konvertieren
- H.264 vs. H.265 bei gleicher Qualität
- Größe und Encoding-Zeit vergleichen
Tools:













