public/uni
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
93e8ced463a77f9b583a46d7e70f66fb94c5cd85
uni/courses/223015b/slides/2026-01-09-termin-2-bild-audio-video.md

26 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; } </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 (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

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 meistens verlustbehaftet Verlustfrei

Menschliche Sinne

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

bg contain 50%

bg contain right:34%

Grenzen der Kompression: JPEG-Artefakte

Bei hoher Kompression sichtbar:

  • Posterization: Farbverläufe werden stufig

  • "Blocking": 8×8-Blöcke werden sichtbar (Block-Grenzen)

  • Ringing: "Ghosting" an scharfen Kanten (Gibbs’sches Phänomen)

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.

¹ je nach Programm seine eigene Bedeutung von bspw. f80%

JPEG

Vier Schritte der Kompression

bg right:20%

JPEG: Schritt 1 – Farbraum wechseln

RGB → Y'CbCr (seltener Y'UV)

  • 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 Qualitätsverlust

bg contain 70%

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)

JPEG: Schritt 4 – Quantisierung

Hier passiert der Datenverlust.

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

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)

bg

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

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

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

1. Spatial Compression (Intra-Frame)

Jedes Bild einzeln komprimieren – wie JPEG

Analysiert Redundanz innerhalb eines Frames:

  • DCT (Frequenzanalyse)
  • Quantisierung (Details entfernen)
  • Entropie-Coding

→ I-Frame (Keyframe) Vollständiges Bild, unabhängig dekodierbar.

2. Temporal Compression (Inter-Frame)

Nur Änderungen zwischen Bildern speichern

Frame-Typ Referenziert Größe
I-Frame (Intra) Keine Referenz (Keyframe) 100%
P-Frame (Predicted) Vorherige Frames ~30%
B-Frame (Bi-directional) Vorherige + zukünftige ~15%

GOP (Group of Pictures): I - B - B - P - B - B - P - B - B - I

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

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

bg contain

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/

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:

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