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	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.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

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 (Co·dec)

Ziel	Bild	Audio	Dokument
Kleine Dateien	JPEG	MP3	—
Perfekte Qualität	PNG, RAW	FLAC	PDF
Animation/Video	GIF	—	—
Skalierbarkeit	SVG	—	PDF

---

---

Digitale Bilder

Raster- und Vektorgrafiken

---

Was ist ein digitales Bild?

Rasterbild = Pixelraster

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

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

---

Rastergrafiken

Aufbau: Liste von Pixeln mit Farbwerten (2D-Array)

Speicherbedarf (unkomprimiert): Breite × Höhe × Farbtiefe (in Bytes)

Farbtiefe:

Bits	Farben	Anwendung
1	2	Schwarz/Weiß (Fax)
8	256	Graustufen, GIF
24	16,7 Mio.	True Color (Standard)
32	16,7 Mio. + Alpha	Transparenz

---

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: Standard, glättet
• Bicubic: Hohe Qualität, rechenintensiv
• Lanczos: Beste Qualität

---

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 nicht jeden einzelnen Pixel im Raster, sondern deklariert wie Farben und Formen gesetzt werden.

---

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
Kompression	Verlustbehaftet	Verlustfrei

---

JPEG

Psychovisuell komprimieren

---

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 (aber Helligkeit behalten)
• Glatte Flächen effizient speichern
• Hohe Frequenzen (Details) verwerfen

---

JPEG: Schritt 1 – Farbraum

RGB → YCbCr (auch 3 Werte pro Pixel, nur anders aufgeteilt)

• Y = Helligkeit (Luminanz) – Was das Auge am besten sieht
• Cb = Blau-Gelb-Anteil (Chrominanz)
• Cr = Rot-Grün-Anteil (Chrominanz)

Warum diese Trennung? Y (Helligkeit) behält volle Auflösung. Cb/Cr (Farbe) kann reduziert werden – Auge merkt es kaum.

---

---

JPEG: Schritt 2 – Chroma Subsampling

Die Notation J:a:b (bezogen auf einen 4×2 Pixel-Block):

• J = Referenzbreite (immer 4)
• a = Farbsamples in Zeile 1
• b = Farbsamples in Zeile 2

Schema	Bedeutung	Farbdaten
4:4:4	Jedes Pixel hat Farbinfo	100%
4:2:2	Jedes 2. Pixel horizontal	50%
4:2:0	Jedes 4. Pixel (2×2 Block teilt sich Farbe)	25%

4:2:0 ist JPEG-Standard – kaum sichtbarer Unterschied.

---

JPEG: Schritt 3 – DCT

Discrete Cosine Transform: Bild in 8×8-Pixel-Blöcke aufteilen. Jeden Block in räumliche Frequenzen zerlegen.

Räumliche Frequenz = Wie schnell ändern sich Pixelwerte?

• Niedrig: Große, gleichmäßige Flächen (Himmel)
• Hoch: Schnelle Wechsel, feine Details (Haare, Kanten)

Vorteil: Die meiste Bildinformation steckt in niedrigen Frequenzen.

---

JPEG: Schritt 4 – Quantisierung

Hier passiert der Datenverlust.

Hohe räumliche Frequenzen (Details) → grob speichern oder weglassen Niedrige Frequenzen (Flächen) → erhalten

Der Quality-Schieberegler steuert das:

• Quality 100: Minimale Quantisierung
• Quality 50: Aggressive Quantisierung

---

JPEG: Schritt 5 – Zigzag & RLE

Nach Quantisierung: Viele Werte sind 0 (v.a. hohe Frequenzen).

Zigzag-Scan: Matrix diagonal durchlaufen → Nullen sammeln sich am Ende

┌────────────────┐
│ 1  2  6  7 ... │   Niedrig → Hoch
│ 3  5  8 ...    │   (diagonal)
│ 4  9 ...       │
└────────────────┘

RLE: 0 0 0 0 0 0 0 0 → (8, 0) = "8 Nullen"

---

JPEG: Schritt 6 – Huffman-Coding

Verlustfreie Kompression der Restwerte

Idee: Statt fester 8 Bit pro Wert → variable Bitlänge Häufige Werte bekommen kurze Bit-Sequenzen.

Zeichen	Häufigkeit	Code (Bit-Sequenz)
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)

---

---

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

PNG, GIF, WebP, AVIF

---

PNG: Verlustfrei mit Transparenz

PNG = Portable Network Graphics (1996)

Entstehung: GIF-Patent-Streit → Community entwickelt Alternative

Features:

• Verlustfrei (Lossless)
• Alpha-Transparenz (8-Bit)
• 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 (für die gewählte Palette)
• Animationen

Das Patent-Drama: 1994 fordert Unisys 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, patent-frei

Browser-Support 2025: WebP fast universell, AVIF wächst.

---

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:

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

× 60 Sekunden = 44,6 GB pro Minute

Ein 2-Stunden-Film: über 5 Terabyte

---

Container und Codec

Container = Das Dateiformat (Beispiel: MP4) Die "Box", die verschiedene Streams zusammenpackt:

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

Codec = Der Kompressionsalgorithmus (Beispiel: AV1) Entscheidet, WIE komprimiert wird.

---

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

Codec	Jahr	Status
MPEG-4	1999	Passender Codec zu .mp4
H.264/AVC	2003	Universal, überall
H.265/HEVC	2013	Effizienter, aber Patente
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

---

I-Frames, P-Frames, B-Frames

I-Frame (Intra): Vollständiges Bild, unabhängig komprimiert Groß, aber Ankerpunkt für Navigation

P-Frame (Predicted): Referenziert vorherige Frames Speichert nur Unterschiede

B-Frame (Bi-directional): Referenziert vorherige UND zukünftige Frames Beste Kompression, aber komplexer

---

Motion Compensation

Idee: Bewegung beschreiben statt Pixel kopieren.

Beispiel: Frame 1: Ball bei Position (100, 200) Frame 2: Ball bei Position (120, 200)

Statt 2 komplette Frames: "Ball bewegt sich 20 Pixel nach rechts"

Enormer Effizienzgewinn bei Video mit Bewegung.

---

H.264 / AVC

Advanced Video Coding (2003)

Warum dominant?

• Exzellente Kompression (~100:1 möglich)
• Hardware-Support 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 Block-Artefakte)

---

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 → (später) AV1

Eigenschaften:

• Ähnliche Effizienz wie H.265
• Patent-frei (laut Google)
• YouTube nutzt VP9 für 4K

Nachteile:

• 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 und Netflix nutzen AV1 für 4K/8K Hardware-Encoder in aktuellen GPUs

---

---

Fragen & Diskussion

Kontakt: mail@librete.ch 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

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:

• 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:

• MediaInfo (Online oder Desktop)
• HandBrake (Desktop)