Pixel- und Vektorgrafiken
Der TuS Bonn will sein Vereinslogo auf eine Homepage, auf Plakate und auf Trikots bringen. Auf dem Smartphone sieht das Logo scharf aus, auf dem Plakat plötzlich verpixelt. Woran liegt das? Und wie viel Speicherplatz braucht ein Foto eigentlich? Am Ende der Seite kannst du beides beantworten.
Pixelgrafiken: ein Bild aus Rasterpunkten
Ein Computer kennt nur Zahlen. Um ein Bild zu speichern, legt er ein Raster über das Bild. Jedes Kästchen heißt Pixel und bekommt genau eine Farbe. Die Farben werden als Zahlen (Bits) codiert.
Bei einem Schwarz-Weiß-Bild reichen 2 Zustände (schwarz/weiß). Dafür genügt 1 Bit pro Pixel: 0 oder 1.
Für Farben braucht man mehr Bits. Die Zahl der Bits pro Pixel heißt Farbtiefe $t$. Mit $t$ Bit kann man $2^t$ verschiedene Farben unterscheiden.
| Farbtiefe | Farben |
|---|---|
| 1 Bit | $2^1 = 2$ |
| 2 Bit | $2^2 = 4$ |
| 8 Bit | $2^8 = 256$ |
| 24 Bit | $2^{24} = 16\,777\,216$ |
Die Zahl der Pixel in Breite und Höhe heißt Auflösung, zum Beispiel $1.920 \times 1.080$.
Ein Schwarz-Weiß-Bild hat 8 × 8 Pixel, jedes Pixel wird mit 1 Bit codiert (0 = weiß, 1 = schwarz). Berechne die Dateigröße in Bit und in Byte. Erkläre, warum man nur 1…
Ein Schwarz-Weiß-Bild hat 8 × 8 Pixel, jedes Pixel wird mit 1 Bit codiert (0 = weiß, 1 = schwarz). Berechne die Dateigröße in Bit und in Byte. Erkläre, warum man nur 1 Bit pro Pixel braucht.
Farben im RGB-Modell
Bildschirme mischen Farben aus Rot, Grün und Blau. Jeder dieser drei Farbkanäle hat einen Wert von 0 (aus) bis 255 (volle Helligkeit). 256 Werte brauchen 8 Bit, denn $2^8 = 256$. Ein Pixel hat also $3 \cdot 8\ \text{Bit} = 24\ \text{Bit}$ = 3 Byte.
| Farbe | $(R|G|B)$ |
|---|---|
| Schwarz | $(0|0|0)$ |
| Weiß | $(255|255|255)$ |
| Rot | $(255|0|0)$ |
| Gelb | $(255|255|0)$ |
Im RGB-Farbmodell wird jede Farbe aus Rot, Grün und Blau gemischt, jeweils mit einem Wert von 0 bis 255. a) Wie viele Bit werden für einen Farbkanal gebraucht? b) Welche…
Im RGB-Farbmodell wird jede Farbe aus Rot, Grün und Blau gemischt, jeweils mit einem Wert von 0 bis 255.
- a) Wie viele Bit werden für einen Farbkanal gebraucht?
- b) Welche Farben ergeben $(255|0|0)$, $(0|0|0)$ und $(255|255|255)$?
- c) Wie viele Byte braucht ein Pixel bei 24 Bit Farbtiefe?
Dateigröße berechnen
Die Dateigröße einer unkomprimierten Pixelgrafik folgt direkt aus dem Aufbau: Anzahl der Pixel mal Bits pro Pixel.
Warum multiplizieren? Jedes der Breite · Höhe vielen Pixel braucht gleich viele Bits.
Halbierst du Breite und Höhe, sinkt die Pixelzahl auf ein Viertel, denn $\tfrac12 \cdot \tfrac12 = \tfrac14$.
Ein Foto hat 1.920 × 1.080 Pixel bei 24 Bit Farbtiefe, unkomprimiert. a) Berechne die Dateigröße in Byte und in Megabyte (1 MB = 1.000.000 Byte, runde auf eine…
Ein Foto hat 1.920 × 1.080 Pixel bei 24 Bit Farbtiefe, unkomprimiert.
- a) Berechne die Dateigröße in Byte und in Megabyte (1 MB = 1.000.000 Byte, runde auf eine Nachkommastelle).
- b) Wie groß wäre die Datei bei 8 Bit Farbtiefe (256 Farben)?
Ein Bild mit 800 × 600 Pixeln soll mit 4 Farben (z. B. für ein Comic) gespeichert werden. a) Wie viele Bit pro Pixel sind mindestens nötig? b) Berechne die Dateigröße in…
Ein Bild mit 800 × 600 Pixeln soll mit 4 Farben (z. B. für ein Comic) gespeichert werden.
- a) Wie viele Bit pro Pixel sind mindestens nötig?
- b) Berechne die Dateigröße in Kilobyte (1 KB = 1.000 Byte).
- c) Wie ändert sich die Größe, wenn man die Auflösung halbiert (400 × 300)?
Ein Bild hat $b \times h$ Pixel und $t$ Bit Farbtiefe. a) Stelle eine Formel für die Dateigröße in Byte auf. b) Ein Bild hat bei 24 Bit Farbtiefe 2.880.000 Byte und ist…
Ein Bild hat $b \times h$ Pixel und $t$ Bit Farbtiefe.
- a) Stelle eine Formel für die Dateigröße in Byte auf.
- b) Ein Bild hat bei 24 Bit Farbtiefe 2.880.000 Byte und ist 1,5-mal so breit wie hoch. Bestimme $b$ und $h$.
- c) Wie viele verschiedene Farben sind bei Farbtiefe $t$ darstellbar? Wie viele Bit braucht man mindestens für 1.000 Farben?
Auflösung und Druck
Beim Drucken gibt man die Auflösung in ppi (Pixel pro Zoll) an, 1 Zoll $= 2{,}54\,\text{cm}$. Für scharfe Abzüge nutzt man oft 300 ppi.
Hat ein Bild zu wenige Pixel, werden sie beim Vergrößern sichtbar groß: Das Bild wirkt verpixelt.
Ein Fotolabor in Düsseldorf druckt Bilder mit 300 Pixeln pro Zoll (1 Zoll = 2,54 cm). Ein Foto soll als 15 cm × 10 cm Abzug gedruckt werden. a) Berechne die nötige…
Ein Fotolabor in Düsseldorf druckt Bilder mit 300 Pixeln pro Zoll (1 Zoll = 2,54 cm). Ein Foto soll als 15 cm × 10 cm Abzug gedruckt werden.
- a) Berechne die nötige Pixelzahl in Breite und Höhe (runde sinnvoll).
- b) Berechne die unkomprimierte Dateigröße bei 24 Bit Farbtiefe.
- c) Begründe, warum ein Bild mit 640 × 480 Pixeln für diesen Druck ungeeignet ist.
Vektorgrafiken: das Bild als Beschreibung
Eine Vektorgrafik speichert keine Pixel, sondern geometrische Objekte mit Eigenschaften: Form, Lage, Größe, Farbe. Der Computer berechnet das Bild beim Anzeigen neu.
Wie ein Datensatz könnte das Haus so aussehen: Rechteck, Ecke $(2|1)$, Breite 6, Höhe 4, Gelb. Das sind nur wenige Zahlen.
Wird die Grafik auf das Dreifache vergrößert, multipliziert der Computer die Maße mit 3. Die Datei bleibt praktisch gleich groß und die Kanten bleiben scharf.
| Pixelgrafik | Vektorgrafik | |
|---|---|---|
| Speichert | Farbe jedes Pixels | Objekte und Maße |
| Vergrößern | wird unscharf | bleibt scharf |
| Dateigröße | wächst mit Auflösung | wächst mit Zahl der Objekte |
| Geeignet für | Fotos | Logos, Skizzen, Pläne |
| Typische Formate | JPG, PNG | SVG |
JPG, PNG und SVG sind Dateiformate. SVG ist ein Textformat: Der Quelltext beschreibt die Objekte mit festen Regeln (Syntax), der Browser macht daraus das Bild (Semantik). JPG komprimiert mit Verlust, deshalb sind JPG-Dateien kleiner als die unkomprimierte Größe aus der Formel.
Nenne je zwei typische Eigenschaften von Pixelgrafiken und Vektorgrafiken. Ordne dann zu, welche Art besser geeignet ist: (a) ein Foto vom Schulhof, (b) das Vereinslogo…
Nenne je zwei typische Eigenschaften von Pixelgrafiken und Vektorgrafiken. Ordne dann zu, welche Art besser geeignet ist: (a) ein Foto vom Schulhof, (b) das Vereinslogo des TuS Bonn, das auf Plakate und Trikots gedruckt wird.
Eine Vektorgrafik beschreibt ein Haus durch folgende Objekte: Rechteck: linke untere Ecke $(2|1)$, Breite 6, Höhe 4, Füllfarbe Gelb Dreieck: Punkte $(2|5)$, $(8|5)$,…
Eine Vektorgrafik beschreibt ein Haus durch folgende Objekte:
Rechteck: linke untere Ecke $(2|1)$, Breite 6, Höhe 4, Füllfarbe Gelb
Dreieck: Punkte $(2|5)$, $(8|5)$, $(5|8)$, Füllfarbe Rot
- a) Beschreibe, wie man eine Tür (Rechteck, braun, Breite 1, Höhe 2, unten mittig) ergänzt, indem du das Objekt in dieser Schreibweise angibst.
- b) Das Bild soll auf das Dreifache vergrößert werden. Was ändert sich an den Daten, was an der Qualität?
Eine Schule möchte ein neues Logo (einfache Formen, drei Farben) verwenden: auf der Website, auf einem 3 m breiten Banner und auf Stempeln. a) Entscheide begründet, ob…
Eine Schule möchte ein neues Logo (einfache Formen, drei Farben) verwenden: auf der Website, auf einem 3 m breiten Banner und auf Stempeln.
- a) Entscheide begründet, ob Pixel- oder Vektorformat gewählt werden soll.
- b) Erkläre, warum die Dateigröße bei Vektorgrafiken nicht von der Bildgröße abhängt.
- c) Nenne einen Fall, in dem eine Vektorgrafik nicht geeignet ist, und begründe.
Auf einen Blick
-
Eine Pixelgrafik ist ein Raster; jedes Pixel hat eine Farbe, codiert mit der Farbtiefe $t$ Bit. Es gibt $2^t$ Farben.
-
RGB: drei Kanäle mit je 8 Bit (0 bis 255), also 24 Bit = 3 Byte pro Pixel.
-
Dateigröße: $\text{Breite} \cdot \text{Höhe} \cdot t$ Bit, geteilt durch 8 ergibt Byte.
-
Vektorgrafiken speichern Objekte und Maße, bleiben beim Skalieren scharf und eignen sich für Logos.
-
Pixelgrafiken eignen sich für Fotos; zu wenige Pixel führen beim Vergrößern oder Drucken zu Unschärfe.