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
This commit is contained in:
2025-12-18 02:01:21 +01:00
parent 1b551c333a
commit a63caa9d2d
2 changed files with 77 additions and 1 deletions
+69 -1
View File
@@ -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)**