Pixel vs. Vektor
Die zwei Dimensionen der digitalen Grafik
🧠 Das Grundprinzip
Alles, was du auf einem Bildschirm siehst, basiert auf zwei fundamental unterschiedlichen Technologien. Wie in einem Spiel mit zwei verschiedenen Render-Engines:
🖌️ Pixel (Raster)
Wie ein Minecraft-Build aus einzelnen Blöcken
📐 Vektor (Math)
Wie 3D-Modelle mit unendlicher Auflösung
🖼️ Pixelgrafiken (Raster)
Wie ein Bitmap-Texture
Pixelgrafiken bestehen aus einem festen Raster von Farbpunkten – wie eine Mosaik-Wand aus kleinen Steinen. Jeder Stein (Pixel) hat eine feste Farbe.
Typische Formate:
📐 Vektorgrafiken
Wie 3D-Modelle in Games
Vektorgrafiken bestehen aus mathematischen Formeln – Punkte, Linien und Kurven. Wie in modernen Games: Egal wie nah du heranzoomst, die Kanten bleiben scharf.
Typische Formate:
📊 Direktvergleich
| Feature | 🖼️ Pixel | 📐 Vektor |
|---|---|---|
| Aufbau | Farbpunkte (Raster) | Mathematische Pfade |
| Zoom | Wird unscharf (pixelig) | Bleibt immer scharf |
| Dateigröße | Größer bei hoher Auflösung | Oft sehr klein |
| Beste für | Fotos, Screenshots | Logos, Icons, Text |
| Tool | GIMP, Photoshop | Inkscape, Illustrator |
🎮 Gaming-Analogien
Pixel = Bitmap-Texture
Wie eine Skin in Minecraft oder eine Texture in einem Retro-Game. Feste Größe, wird bei Zoom unscharf.
Vektor = 3D-Modell
Wie ein Charakter in Fortnite oder Valorant. Mathematisch berechnet, unendlich skalierbar.
Foto = Screenshot
Ein Foto ist immer Pixel – wie ein Screenshot deines Desktops. Du kannst nicht "reinzoomen" ohne Qualitätsverlust.
Logo = UI-Element
Game-Logos und UI-Icons sind meist Vektor – damit sie auf 4K-Monitoren genauso scharf aussehen wie auf Handys.
🧠 Boss-Kampf: Das Quiz
Beweise, dass du den Unterschied verstanden hast:
📝 3-2-1 Review
Bevor du weitergehst, reflektiere (klicke und schreibe direkt hier):
3 Dinge die ich gelernt habe:
2 Dinge die ich anwenden werde:
1 Frage die ich noch habe:
💡 Diese Frage kannst du an die KI oder den Lehrer stellen!
💾 Automatische Speicherung: Deine Einträge werden automatisch in deinem Browser gespeichert.
🎯 Level 01 Abschluss
📋 Lehrer-Kontrolle
Der Lehrer prüft:
- ☐ Unterschied Pixel vs. Vektor verstanden
- ☐ Eigene SVG mit Code erstellt
- ☐ 3-2-1 Reflexion ausgefüllt
⚠️ Wichtig: Erst nach Lehrer-Freigabe auf "Abschließen" klicken!