termin 2: add raster vs vector graphics slides

add foundational content from hauber reference:
- rastergrafiken (bitmaps): pixel-based, scaling issues
- vektorgrafiken: mathematical descriptions, SVG/PDF/AI
- raster vs vektor comparison table + rasterung concept

update IMAGE_LIST.md with 2 new image suggestions

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

slides/2026-01-09-termin-2-bild-audio-video.md

@@ -68,7 +68,7 @@ Instagram-Effekt
 
 **Für EIN Foto!**
 
-<!-- 
+<!--
 Zoom auf Pixel-Ebene zeigen
 Jedes Pixel = RGB-Tripel (3 Bytes)
 6 MB × 10.000 Fotos = 62 GB
@@ -77,6 +77,74 @@ Smartphone-Speicher wäre schnell voll ohne Kompression
 
 ---
 
+# 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
+
+<!--
+Bitmap = Bit-mapped graphics
+Digitalkameras erzeugen immer Rastergrafiken
+Kompression nötig wegen Dateigrößen (PNG, JPEG, GIF)
+Skalierungsproblem: Interpolation erzeugt Unschärfe
+-->
+
+---
+
+# 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
+
+<!--
+Vektorgrafik = geometrische Primitive + Attribute
+SVG = Scalable Vector Graphics (Web-Standard)
+AI = Adobe Illustrator
+Ideal für Logos, Icons, Infografiken
+-->
+
+---
+
+# 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)
+
+<!--
+Bildschirme sind Rastergeräte (Framebuffer)
+Jede Vektorgrafik muss gerastert werden zur Anzeige
+Browser rastert SVG in Echtzeit
+Firmenlogos: Immer als Vektor anlegen!
+-->
+
+---
+
 # Lossless: PNG
 
 **PNG = Portable Network Graphics (1996)**