Digitale Bilder: Pixel- und Vektorgrafik
Du machst mit dem Handy ein Foto und zoomst auf eine Stelle. Erst ist alles scharf. Dann siehst du kleine Quadrate, jedes in einer einzigen Farbe. Das Logo auf einem Plakat dagegen kann man riesig drucken, und die Kanten bleiben glatt.
Ein Computer kennt keine Bilder. Er kennt nur Zahlen. Wie wird aus Zahlen ein Bild? Warum werden manche Bilder beim Vergrößern körnig und andere nicht? Und wie viel Platz braucht ein Bild im Speicher?
Pixel und Rastergrafik
Zeichne ein Bild auf Karopapier und male einzelne Kästchen aus. Jedes Kästchen hat genau eine Farbe. So ähnlich arbeitet der Computer. Er teilt ein Bild in ein Raster aus Zeilen und Spalten. Jedes kleine Quadrat im Raster heißt Pixel (Bildpunkt). Ein Pixel hat genau eine Farbe.
Ein Bild aus Pixeln heißt Rastergrafik oder Pixelgrafik. Fotos sind Rastergrafiken.
Bit, Bitfolge und Schwarz-Weiß-Bild
Der Computer speichert alles mit nur zwei Zeichen: 0 und 1. Eine einzelne 0 oder 1 heißt Bit. Ein Bit ist wie ein Lichtschalter, der aus (0) oder an (1) steht. Eine Reihe von Bits heißt Bitfolge.
Bei einem Schwarz-Weiß-Bild genügt ein Bit je Pixel. Wir legen fest: 0 steht für Weiß, 1 steht für Schwarz. Das Bild wird zu einer Tabelle aus Nullen und Einsen. Schreibst du die Zeilen nacheinander auf, entsteht eine Bitfolge. Der Computer merkt sich dazu die Breite, also die Zahl der Pixel in einer Zeile. Sonst wüsste er nicht, wo eine Zeile endet.
Ein Bild als Bitfolge
Ein Bild als Bitfolge
Das Bild ist 5 Pixel breit und 5 Pixel hoch. 1 ist schwarz, 0 ist weiß.
| Zeile | Pixel 1 | Pixel 2 | Pixel 3 | Pixel 4 | Pixel 5 |
|---|---|---|---|---|---|
| 1 | 0 | 0 | 1 | 0 | 0 |
| 2 | 0 | 1 | 1 | 1 | 0 |
| 3 | 1 | 1 | 1 | 1 | 1 |
| 4 | 0 | 0 | 1 | 0 | 0 |
| 5 | 0 | 0 | 1 | 0 | 0 |
Welche Bitfolge speichert der Computer?
Wir lesen die Zeilen von oben nach unten und schreiben die Bits hintereinander:
- Zeile 1: 00100
- Zeile 2: 01110
- Zeile 3: 11111
- Zeile 4: 00100
- Zeile 5: 00100
Die Bitfolge lautet 0010001110111110010000100. Sie hat 25 Bits, denn 5 · 5 = 25. Dazu speichert der Computer die Breite 5. Zum Anzeigen schneidet er die Bitfolge alle 5 Bits ab und malt jede 1 schwarz. Es entsteht eine kleine Tanne.
Auflösung und Farbtiefe
Die Auflösung sagt, wie viele Pixel ein Bild hat. Man gibt Breite und Höhe an. Ein Bild mit 4000 Pixeln in der Breite und 3000 in der Höhe schreibt man 4000 × 3000. Es hat 4000 · 3000 = 12 Millionen Pixel. Mehr Pixel zeigen feinere Einzelheiten.
Die Farbtiefe sagt, wie viele Bits ein Pixel für seine Farbe bekommt. Mit 1 Bit sind 2 Farben möglich (Schwarz und Weiß). Mit 2 Bits sind es 4 Farben, denn es gibt vier Bitfolgen: 00, 01, 10 und 11. Das könnten Weiß, Hellgrau, Dunkelgrau und Schwarz sein. Hinter jede Bitfolge kann eine 0 oder eine 1 treten. Darum verdoppelt jedes zusätzliche Bit die Zahl der Farben:
| Farbtiefe | 1 Bit | 2 Bit | 3 Bit | 4 Bit | 5 Bit | 6 Bit | 7 Bit | 8 Bit |
|---|---|---|---|---|---|---|---|---|
| Zahl der Farben | 2 | 4 | 8 | 16 | 32 | 64 | 128 | 256 |
Speicherbedarf
Der Speicherbedarf ist der Platz, den ein Bild im Speicher braucht. Du rechnest:
Zahl der Pixel = Breite · Höhe
Speicherbedarf in Bit = Zahl der Pixel · Farbtiefe
Acht Bits zusammen heißen 1 Byte. Dateigrößen gibt man meist in Byte an.
Wie viel Platz braucht ein Bild?
Wie viel Platz braucht ein Bild?
Ein Graustufenbild ist 100 Pixel breit und 60 Pixel hoch. Jedes Pixel hat 8 Bit Farbtiefe, also 256 Graustufen. Wie viele Byte braucht das Bild? Und wie viele braucht dasselbe Bild in Schwarz-Weiß mit 1 Bit?
Wir rechnen in Schritten:
- Zahl der Pixel: 100 · 60 = 6000.
- Bits bei 8 Bit Farbtiefe: 6000 · 8 = 48000 Bit.
- In Byte: 48000 : 8 = 6000 Byte.
- Bits bei 1 Bit Farbtiefe: 6000 · 1 = 6000 Bit.
- In Byte: 6000 : 8 = 750 Byte.
Mit achtfacher Farbtiefe braucht das Bild auch den achtfachen Platz.
RGB-Codierung
Farbbildschirme mischen Farben aus Licht. Jedes Pixel besteht aus drei winzigen Lichtern: Rot, Grün und Blau. Jedes Licht hat eine Stärke von 0 (aus) bis 255 (voll an). Das sind 256 Stufen, also 8 Bit je Licht. Eine Farbe ist daher drei Zahlen, geschrieben als (R, G, B):
| Farbe | R | G | B |
|---|---|---|---|
| Schwarz | 0 | 0 | 0 |
| Weiß | 255 | 255 | 255 |
| Rot | 255 | 0 | 0 |
| Grün | 0 | 255 | 0 |
| Blau | 0 | 0 | 255 |
| Gelb | 255 | 255 | 0 |
| Mittelgrau | 128 | 128 | 128 |
Ein Pixel hat damit 3 · 8 = 24 Bit Farbtiefe. Ein Farbfoto braucht darum dreimal so viel Platz wie ein Graustufenfoto gleicher Größe.
Vektorgrafik und Gruppieren
Eine Vektorgrafik speichert keine Pixel. Sie besteht aus Figuren wie Linie, Rechteck, Kreis und Dreieck. Zu jeder Figur gehören Zahlen: Wo liegt sie? Wie groß ist sie? Welche Farbe und welche Randdicke hat sie?
Beim Anzeigen zeichnet der Computer die Figuren neu, in jeder Größe. Darum bleiben die Kanten glatt, auch bei starker Vergrößerung.
Mit Gruppieren fasst du mehrere Figuren zu einer Gruppe zusammen. Du kannst sie dann gemeinsam verschieben, vergrößern oder färben, als wären sie eine einzige Figur.
Ein Haus als Vektorgrafik
Ein Haus als Vektorgrafik
Ein Haus besteht aus drei Figuren. Die Lage geben wir als Abstand von der linken und von der oberen Bildkante an.
| Figur | Gespeicherte Zahlen |
|---|---|
| Rechteck „Wand“ | links 20, oben 40, Breite 60, Höhe 40, Farbe Gelb |
| Dreieck „Dach“ | Ecken (20, 40), (80, 40) und (50, 10), Farbe Rot |
| Rechteck „Tür“ | links 40, oben 60, Breite 20, Höhe 20, Farbe Blau |
So geht es weiter:
- Das ganze Haus besteht nur aus diesen Zahlen. Es sind keine Pixel gespeichert.
- Soll das Haus doppelt so groß werden, verdoppelt der Computer jede Zahl. Die Wand hat dann links 40, oben 80, Breite 120 und Höhe 80. Die Kanten bleiben glatt.
- Du gruppierst Wand, Dach und Tür zur Gruppe „Haus“. Verschiebst du die Gruppe, bewegen sich alle drei Figuren mit, und das Dach sitzt weiter auf der Wand.
Rastergrafik und Vektorgrafik im Vergleich
| Eigenschaft | Rastergrafik | Vektorgrafik |
|---|---|---|
| Aufbau | Raster aus Pixeln | Figuren mit Zahlen |
| Gespeichert wird | die Farbe jedes Pixels | Lage, Größe und Farbe jeder Figur |
| Stark vergrößert | wird körnig | bleibt scharf |
| Speicherbedarf wächst mit | der Zahl der Pixel | der Zahl der Figuren |
| Gut geeignet für | Fotos | Logos, Pläne, einfache Zeichnungen |
| Dateiendungen | .png, .jpg | .svg |
Ein Foto hat Millionen Pixel in vielen Farbtönen. Man kann es nicht in wenige Figuren zerlegen. Darum sind Fotos immer Rastergrafiken.
Vergrößern macht ein Foto schärfer
Vergrößern macht ein Foto schärfer
„Das Foto ist klein und unscharf. Ich ziehe es größer, dann sieht man mehr.“
Beim Vergrößern bleibt die Zahl der Pixel gleich. Jedes Pixel wird nur größer, und die Quadrate werden sichtbar. Mehr Einzelheiten gibt es nur bei einem Bild mit mehr Pixeln, zum Beispiel mit einer besseren Kamera. Eine Vektorgrafik dagegen wird bei jeder Größe neu berechnet und bleibt scharf.
Farben wie Wasserfarben mischen
Farben wie Wasserfarben mischen
„Rot und Grün gemischt ergibt Braun. Also ist (255, 255, 0) Braun.“
Bei Wasserfarben mischst du Farbe, bei Bildschirmen mischst du Licht. Rotes und grünes Licht ergeben zusammen Gelb. Sind alle drei Lichter voll an, ist das Pixel Weiß. Sind alle drei aus, ist es Schwarz.
Zusammenfassung
Eine Rastergrafik besteht aus Pixeln. Jedes Pixel hat genau eine Farbe.
Ein Bit ist eine 0 oder eine 1. Ein Schwarz-Weiß-Bild wird zu einer Tabelle aus Nullen und Einsen. Zeile für Zeile hintereinander entsteht die Bitfolge, dazu merkt sich der Computer die Breite.
Die Auflösung ist die Zahl der Pixel (Breite mal Höhe). Die Farbtiefe ist die Zahl der Bits je Pixel. Jedes zusätzliche Bit verdoppelt die Zahl der Farben.
Speicherbedarf in Bit = Breite · Höhe · Farbtiefe. 8 Bit sind 1 Byte.
Bei RGB besteht jede Farbe aus drei Lichtstärken von 0 bis 255 für Rot, Grün und Blau. Das sind 24 Bit je Pixel.
Eine Vektorgrafik besteht aus Figuren mit Zahlen für Lage, Größe und Farbe. Sie bleibt beim Vergrößern scharf. Gruppierte Figuren lassen sich gemeinsam bearbeiten.
Übungen
Welche Aussage über Vektorgrafiken stimmt?
Ein Schwarz-Weiß-Bild ist 16 Pixel breit und 8 Pixel hoch. Wie viele Bits braucht es?
Welche Farbe hat ein Pixel mit den RGB-Werten (0, 0, 255)?
Die Farbtiefe beträgt 4 Bit. Wie viele verschiedene Farben sind möglich?
Die Bitfolge 1111100110011111 gehört zu einem Bild, das 4 Pixel breit ist. 1 ist schwarz, 0 ist weiß. Schreibe die Zeilen untereinander auf und sage, was du siehst.
Ein Bild ist 40 Pixel breit und 20 Pixel hoch und hat 2 Bit Farbtiefe. Wie viel Speicher braucht es in Byte?