01 – Pixel vs. Vektor 🖼️
Der fundamentale Unterschied hinter jedem digitalen Bild
🧠 1. Was ist der Kernunterschied?
Der Unterschied zwischen Pixelgrafiken und Vektorgrafiken liegt in ihrer Struktur – nicht im Aussehen.
- Pixelgrafiken bestehen aus einem festen Raster von Farbpunkten.
→ Werden bei Vergrößerung unscharf („pixelig“). - Vektorgrafiken bestehen aus mathematischen Formeln (Punkte, Linien, Kurven).
→ Bleiben bei beliebiger Vergrößerung scharf.
📊 2. Vergleich der Dateiformate
| Typ | Formate | Vorteile | Nachteile | Verwendung |
|---|---|---|---|---|
| Pixelgrafik | JPG, PNG, GIF, WebP, TIFF | Fotos, komplexe Farben, Transparenz (PNG) | Wird bei Zoom unscharf, große Dateien (TIFF) | Fotografie, Webbilder, Screenshots |
| Vektorgrafik | SVG, PDF, EPS, AI | Beliebig skalierbar, kleine Dateien (SVG), editierbar | Keine Fotos möglich, komplexere Erstellung | Logos, Icons, Druck, Web-Icons |
🌐 3. Warum das fürs Web wichtig ist
Im Web entscheidet die Wahl des Formats über:
- Ladezeit: SVG-Dateien sind oft kleiner als PNG/JPG.
- Responsive Design: SVG skaliert perfekt auf Handy, Tablet und Desktop.
- Zugänglichkeit: SVG-Inhalte können beschrieben werden (für Screenreader).
🔗 W3Schools – Bilder in HTML
🔗 W3Schools – Einführung in SVG
🧠 4. KI-Prompt-Training
Aufgabe: Formuliere einen präzisen Prompt, mit dem du eine KI bitten würdest, dir den Unterschied zwischen Pixel- und Vektorgrafiken zu erklären – ohne dass sie dir ein fertiges Bild generiert oder Code vorgibt.
Beginne mit: „Erkläre mir wie ein Anfänger…“ oder „Vergleiche Schritt für Schritt…“
Vermeide: „Mach mir…“, „Generiere…“, „Zeig mir ein Beispiel von…“
Beispiel guter Prompt:
„Erkläre mir wie ein 15-Jähriger den Unterschied zwischen JPG und SVG versteht –
inklusive typischer Fehler, die man beim Einsatz im Web macht.“
🛠️ 5. Werkzeuge für beide Welten
GIMP
Für Pixelgrafiken:
Bearbeite Fotos, erstelle transparente PNGs, optimiere Webbilder.
→ Siehe auch: GIMP – Canvas & Werkzeuge
Inkscape
Für Vektorgrafiken:
Erstelle Logos, Icons, skalierbare Illustrationen als SVG.
→ Siehe auch: Inkscape – Canvas & Werkzeuge