diff --git a/IMAGE_LIST.md b/IMAGE_LIST.md index a678cad..ea44f33 100644 --- a/IMAGE_LIST.md +++ b/IMAGE_LIST.md @@ -87,6 +87,14 @@ This document lists all images needed for the lecture slides. Each image include - **Context**: Demonstrating compression quality loss - **AI Prompt**: Side-by-side comparison of same landscape photo: left side crystal clear high resolution, right side heavily compressed with visible JPEG artifacts, blocky pixels and color banding, split down the middle, educational comparison style +### ⬚ raster-vs-vector.png +- **Context**: Comparison of raster and vector graphics scaling +- **AI Prompt**: Split image showing scaling comparison: left side shows raster/bitmap image (photo of flower) that becomes pixelated when zoomed in, right side shows vector graphic (simple logo/icon) that stays crisp at any zoom level, magnifying glass effect on both sides, educational diagram style, clean white background + +### ⬚ vector-circle-example.png +- **Context**: Explaining how vector graphics store shapes mathematically +- **AI Prompt**: Educational diagram showing a circle with labeled parameters: center point (x,y coordinates), radius line, color fill indicator, stroke width indicator, mathematical notation style, clean technical illustration, blueprint aesthetic + ### ✅ jpeg-artifacts.png - **Context**: Close-up example of JPEG compression artifacts - **AI Prompt**: Close-up macro shot of heavily compressed JPEG image showing visible compression artifacts, blocky 8x8 pixel blocks, mosquito noise around edges, color banding in gradients, technical demonstration image diff --git a/slides/2026-01-09-termin-2-bild-audio-video.md b/slides/2026-01-09-termin-2-bild-audio-video.md index 6c9c39d..41f13d3 100644 --- a/slides/2026-01-09-termin-2-bild-audio-video.md +++ b/slides/2026-01-09-termin-2-bild-audio-video.md @@ -68,7 +68,7 @@ Instagram-Effekt **Für EIN Foto!** - + +--- + +# 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)**