public/uni

Files

Michael Czechowski 0ff5e94e20 remove all fleißaufgabe slides from 223015b

2025-12-30 12:29:12 +01:00

16 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	Michael Czechowski – HdM Stuttgart – WS 2025/26	Dateiformate, Schnittstellen, Speichermedien & Distributionswege

Dateiformate, Schnittstellen, Speichermedien & Distributionswege

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

Wintersemester 2025/26

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

Termin 2 – 09.01.2026

Bild-, Audio- & Videoformate

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)

Pixelraster: Jeder Bildpunkt hat Koordinate + Farbwert

Eigenschaften:

Je größer das Bild → größere Datei
Verkleinern: Meist ohne Qualitätsverlust
Vergrößern: Wird unscharf/pixelig!

Formate: JPEG, PNG, GIF, BMP, TIFF, WebP

Verwendung: Fotos, Screenshots, komplexe Bilder

Vektorgrafiken

Mathematische Beschreibung statt Pixel

Kreis speichern:

Rastergrafik: Tausende Pixel
Vektorgrafik: Mittelpunkt + Radius (2 Werte!)

Gespeichert werden:

Form (Kreis, Linie, Pfad...)
Position, Farbe, Strichstärke, Füllung

Vorteil: Beliebig skalierbar ohne Qualitätsverlust!

Formate: SVG, PDF, AI, EPS

Raster vs. Vektor

	Rastergrafik	Vektorgrafik
Basis	Pixelraster	Mathematische Objekte
Skalierung	Qualitätsverlust	Verlustfrei
Dateigröße	Abhängig von Auflösung	Abhängig von Komplexität
Gut für	Fotos	Logos, Icons, Text
Formate	JPEG, PNG, GIF	SVG, PDF, AI

Rasterung: Vektorgrafik → Rastergrafik (für Bildschirm/Druck)

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)

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

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

Problem: Browser-Support dauert Jahre

Warum Instagram eure Fotos "ruiniert"

Upload-Pipeline:

Dein Foto: 12 MP, 8 MB
Instagram skaliert: max. 1080px
Re-Kompression: JPEG Quality ~75
Endgröße: 200-400 KB

Warum?

Speicherkosten (Milliarden Fotos!)
Ladezeiten (Mobile)
Bandbreite (günstiger)

Hands-On: Kompression vergleichen

Aufgabe (40 Min):

Hochauflösendes Foto (eigenes oder CC)
Exportiere:
- PNG
- JPEG Q100, Q85, Q50
- WebP (optional)
Tool: Squoosh.app (Google-Tool)
Vergleiche: Dateigrößen, sichtbare Unterschiede
Wo werden Artefakte sichtbar?

Teil 2: Video

Kompression & Codecs

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

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

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

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

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

Container im Detail

MP4:

Standard für Web, Mobile
H.264, H.265, AV1
DRM-fähig

MKV (Matroska):

Open Source, extrem flexibel
Beliebig viele Audio-/Untertitel-Spuren
Fast jeden Codec

WebM:

Google, Web-optimiert
Nur VP9/AV1 + Opus/Vorbis

Hands-On: Video analysieren