Files
uni/slides/223015b/02-bild-audio-video.md
Michael Czechowski 512fbd9d3d add erklaerung slides to 223015b course files
- 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
2026-02-02 14:25:04 +01:00

38 KiB
Raw Blame History

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
<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; } @media print { section.klausur { background: #e3f2fd !important; } } section.aufgabe { background: #e3f2fd !important; } section.aufgabe footer { display: none; } section.erklaerung { font-size: 1.1rem; background: linear-gradient(180deg, #f8fbff 0%, #e8f4fc 100%) !important; border-left: 6px solid #1e5f8a; } section.erklaerung h1 { font-size: 1.6rem; color: #1e5f8a; margin-bottom: 0.5rem; } section.erklaerung h2 { font-size: 1.3rem; color: #1f2937; margin-top: 0; } section.erklaerung ul, section.erklaerung ol { font-size: 1.0rem; line-height: 1.4; } section.erklaerung p { font-size: 1.05rem; line-height: 1.5; } section.erklaerung table { font-size: 0.95rem; } </style>

bg cover opacity:0.2

Dateiformate, Schnittstellen, Speichermedien & Distributionswege

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

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


bg fit


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 PDF
Animation/Video GIF
Skalierbarkeit SVG PDF

bg


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)

bg contain 50%


bg contain right:34%

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 23 MB Minimal
8590 200400 KB Kaum sichtbar
60 ~100 KB Bei genauem Hinsehen
30 ~50 KB Deutlich sichtbar

Sweet Spot: 8590 ~10× Kompression, für Menschen kaum unterscheidbar


JPEG-Kompression

Sechs Schritte im Detail


bg right:20%

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


bg contain 70%


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 1015 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 515 übrig Rest wird zu Nullen → extrem gut komprimierbar

Quality-Einstellung: Hoch = mehr Werte behalten = größere Datei Niedrig = mehr Nullen = kleinere Datei, mehr Artefakte


bg fit


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



bg


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
  • 2535% 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

bg


Warum Instagram eure Fotos "ruiniert"

Die Upload-Pipeline:

  1. Euer Foto: 12 MP, 8 MB
  2. Instagram skaliert: max. 1080px Breite
  3. Re-Kompression: JPEG Quality ~75
  4. Ergebnis: 200400 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


bg fit


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)"


bg fit


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


bg contain right:28%

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)


bg contain


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/


bg contain right:25%

Selbstlernen: Bildkompression

  1. Öffne squoosh.app
  2. Lade ein Foto hoch
  3. Vergleiche: JPEG (verschiedene Quality) vs. WebP vs. AVIF
  4. 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

  1. Video herunterladen (z.B. Big Buck Bunny)
  2. Mit MediaInfo analysieren: Container, Codec, Bitrate
  3. Optional: Mit HandBrake konvertieren
  • H.264 vs. H.265 bei gleicher Qualität
  • Größe und Encoding-Zeit vergleichen

Tools: