Pixel- und Vektorgrafik
Der Fußballverein deiner Stadt in Köln will sein Logo auf eine Visitenkarte drucken und später auf ein Banner für das Stadtfest. Auf der Karte sieht das Logo gestochen scharf aus, auf dem Banner dagegen verpixelt. Woran liegt das? Und wie viel Speicher braucht so ein Bild eigentlich? Das klären wir in diesem Abschnitt.
Pixelgrafik: ein Bild aus Rasterpunkten
Ein Foto auf dem Smartphone besteht aus einem Raster aus winzigen Quadraten, den Pixeln. Jedes Pixel hat genau eine Farbe. Aus der Entfernung verschmelzen die Punkte zu einem Bild. Je mehr Pixel, desto feiner das Bild.
Die Größe eines Bildes gibt man als Breite × Höhe in Pixeln an. Die Gesamtzahl der Pixel ist das Produkt.
Hier steht 1 für Schwarz und 0 für Weiß. Das Bild hat $5 \cdot 5 = 25$ Pixel.
Pixelgrafiken eignen sich für Fotos, denn dort ändert sich die Farbe von Punkt zu Punkt. Ihr Nachteil: Beim starken Vergrößern wird jedes Pixel einfach größer. Das Bild wirkt dann treppenartig und verpixelt. Neue Details entstehen nicht.
Erkläre den Unterschied zwischen einer Pixelgrafik und einer Vektorgrafik. Nenne je ein typisches Dateiformat.
Erkläre den Unterschied zwischen einer Pixelgrafik und einer Vektorgrafik. Nenne je ein typisches Dateiformat.
Ein Bild hat 800 × 600 Pixel. Berechne die Anzahl der Pixel.
Ein Bild hat 800 × 600 Pixel. Berechne die Anzahl der Pixel.
Speicherbedarf berechnen
Der Computer speichert für jedes Pixel eine Zahl, die seine Farbe beschreibt. Wie viele Bit dafür nötig sind, nennt man Farbtiefe. Ein Schwarz-Weiß-Bild braucht nur 1 Bit pro Pixel (0 oder 1). Ein Foto in Echtfarben braucht meist 24 Bit, also 3 Byte, pro Pixel.
Warum ein Produkt? Jedes der Pixel braucht gleich viele Bit, also multiplizierst du die Pixelzahl mit den Bit pro Pixel.
Ein Schwarz-Weiß-Bild (1 Bit pro Pixel) hat 16 × 16 Pixel. Berechne die Dateigröße in Byte, ohne Kopfdaten.
Ein Schwarz-Weiß-Bild (1 Bit pro Pixel) hat 16 × 16 Pixel. Berechne die Dateigröße in Byte, ohne Kopfdaten.
Ein Foto hat 1.920 × 1.080 Pixel bei einer Farbtiefe von 24 Bit. a) Berechne die unkomprimierte Größe in Byte. b) Gib das Ergebnis in Megabyte an (1 MB = 1.000.000 Byte,…
Ein Foto hat 1.920 × 1.080 Pixel bei einer Farbtiefe von 24 Bit.
- a) Berechne die unkomprimierte Größe in Byte.
- b) Gib das Ergebnis in Megabyte an (1 MB = 1.000.000 Byte, auf eine Nachkommastelle).
Farben im Computer: RGB und Farbtiefe
Bildschirme mischen jede Farbe aus Rot, Grün und Blau. Das ist das RGB-Modell. Für jeden Kanal gibt es einen Wert, bei 8 Bit pro Kanal von 0 (aus) bis 255 (volle Helligkeit).
| (R, G, B) | Farbe |
|---|---|
| (0, 0, 0) | Schwarz |
| (255, 255, 255) | Weiß |
| (255, 0, 0) | Rot |
| (0, 0, 255) | Blau |
| (255, 255, 0) | Gelb (Rot und Grün) |
| (255, 0, 255) | Magenta (Rot und Blau) |
Mit 8 Bit pro Kanal gibt es $256$ Werte je Kanal. Die Anzahl der Farben ist $256 \cdot 256 \cdot 256 = 2^{24}$, also 16.777.216 Farben. Deshalb sind es 24 Bit pro Pixel.
Eine Farbe wird im RGB-Modell mit je 8 Bit pro Kanal angegeben. a) Wie viele verschiedene Farben sind darstellbar? b) Welche Farbe ergibt (255, 255, 0)? Und (0, 0, 0)?…
Eine Farbe wird im RGB-Modell mit je 8 Bit pro Kanal angegeben.
- a) Wie viele verschiedene Farben sind darstellbar?
- b) Welche Farbe ergibt (255, 255, 0)? Und (0, 0, 0)?
- c) Wie viele Bit pro Pixel braucht ein Bild mit höchstens 16 verschiedenen Farben mindestens?
Vektorgrafik: Formen statt Punkte
Eine Vektorgrafik speichert kein Raster, sondern eine Beschreibung: welche Formen (Linien, Kreise, Rechtecke, Kurven) es gibt, wo sie liegen und welche Farbe und Linienbreite sie haben. Der Computer zeichnet das Bild erst bei der Anzeige.
Typische Formate sind SVG (und PDF oder EPS bei Grafiken aus Zeichenprogrammen).
Der große Vorteil: Eine Vektorgrafik lässt sich ohne Qualitätsverlust beliebig vergrößern. Der Computer rechnet die Koordinaten einfach mit dem Faktor um und zeichnet neu. Die Datei bleibt dabei winzig. Verdoppelst du die Darstellung, werden Mittelpunkt und Radius mit 2 multipliziert, aber es kommen keine neuen Daten hinzu.
Der Nachteil: Für Fotos taugen Vektorgrafiken nicht, denn dafür müsste man Millionen winziger Formen beschreiben.
| Pixelgrafik | Vektorgrafik | |
|---|---|---|
| Speichert | Farbe jedes Pixels | Formen mit Maßen und Farben |
| Vergrößern | wird verpixelt | bleibt scharf |
| Dateigröße | wächst mit Pixelzahl | hängt von Zahl der Formen ab |
| Geeignet für | Fotos | Logos, Diagramme, Schilder |
Hier schließt sich der Kreis zum Anfang: Das Logo auf dem Banner war verpixelt, weil es als Pixelgrafik vorlag. Als Vektorgrafik wäre es auf beiden Größen scharf.
Ein Logo für den Verein „Rhein-Ruderclub Düsseldorf“ soll auf einer Visitenkarte und auf einem 3 m breiten Banner gedruckt werden. a) Welches Grafikformat empfiehlst du?…
Ein Logo für den Verein „Rhein-Ruderclub Düsseldorf“ soll auf einer Visitenkarte und auf einem 3 m breiten Banner gedruckt werden.
- a) Welches Grafikformat empfiehlst du? Begründe.
- b) Was passiert bei einer Pixelgrafik, wenn man sie stark vergrößert?
Eine Vektorgrafik beschreibt einen Kreis durch: Mittelpunkt (50|40), Radius 20, Füllfarbe Rot, Linienbreite 2. a) Erläutere, warum diese Beschreibung nur wenige Byte…
Eine Vektorgrafik beschreibt einen Kreis durch: Mittelpunkt (50|40), Radius 20, Füllfarbe Rot, Linienbreite 2.
- a) Erläutere, warum diese Beschreibung nur wenige Byte braucht, unabhängig von der Darstellungsgröße.
- b) Wie ändert sich die Beschreibung, wenn die Grafik doppelt so groß dargestellt werden soll?
- c) Beurteile, für welche Motive Vektorgrafiken ungeeignet sind, und begründe.
Kompression: Speicher sparen
Unkomprimierte Fotos sind riesig. Deshalb werden Bilder komprimiert. Man unterscheidet zwei Arten.
-
Verlustfreie Kompression (z. B. PNG, GIF): Aus der komprimierten Datei lässt sich das Original exakt wiederherstellen.
-
Verlustbehaftete Kompression (z. B. JPG): Es werden Details weggelassen, die man kaum sieht. Das Original ist nicht mehr exakt rekonstruierbar, dafür wird die Datei viel kleiner.
Ein einfaches verlustfreies Verfahren ist die Lauflängencodierung (Run-Length Encoding). Statt „WWWW" speichert man „4W". Man schreibt also Paare aus der Anzahl gleicher Pixel nacheinander und deren Farbe.
Ein Schwarz-Weiß-Bild wird zeilenweise mit Lauflängencodierung gespeichert (Paare aus Anzahl und Farbe, S = schwarz, W = weiß). Eine Zeile mit 20 Pixeln lautet: 4W 3S 2W…
Ein Schwarz-Weiß-Bild wird zeilenweise mit Lauflängencodierung gespeichert (Paare aus Anzahl und Farbe, S = schwarz, W = weiß). Eine Zeile mit 20 Pixeln lautet: 4W 3S 2W 7S 4W.
- a) Prüfe, ob die Summe der Anzahlen zur Zeilenbreite passt.
- b) Gib die Zeile unkomprimiert als 0/1-Folge an (W = 0, S = 1).
- c) Wähle eine Zeile, bei der die Lauflängencodierung mehr Speicher braucht als die unkomprimierte Darstellung, und begründe. Gib dabei an, wie viele Bit du für ein Paar aus Anzahl und Farbe annimmst.
Eine Schule will 120 Fotos (je 4.000 × 3.000 Pixel, 24 Bit) auf einem USB-Stick mit 4 GB (1 GB = 10^9 Byte) speichern. a) Berechne den Speicherbedarf unkomprimiert. b)…
Eine Schule will 120 Fotos (je 4.000 × 3.000 Pixel, 24 Bit) auf einem USB-Stick mit 4 GB (1 GB = 10^9 Byte) speichern.
- a) Berechne den Speicherbedarf unkomprimiert.
- b) Passen alle Fotos auf den Stick? Begründe rechnerisch.
- c) Bei Kompression im Verhältnis 10 : 1 – wie viele Fotos dieser Größe passen dann maximal auf den Stick? Erkläre den Unterschied zwischen verlustfreier und verlustbehafteter Kompression.