Pixel und Bildkompression – Mittelstufe 5.

EINLEITUNG

Jedes Bild beginnt mit einem winzigen Punkt

Jedes digitale Bild – ob Foto, Emoji oder Screenshot – besteht aus winzigen Punkten: den Pixeln. In dieser Einheit erfährst du:

🔲 Was ist ein Pixel?
Der kleinste Baustein jedes Bildes

🎨 Farben & Bits
Wie Farben als Zahlen gespeichert werden

📐 Auflösung
Warum manche Bilder schärfer sind

🗜️ Bildkompression
Weniger Speicher, trotzdem gutes Bild

MODUL 1 — PIXEL

Was ist ein Pixel?

Pixel ist die Abkürzung für Picture Element – Bildelement. Es ist der kleinste Baustein eines digitalen Bildes. Jeder Pixel hat genau eine Farbe. Zusammen ergeben Tausende oder Millionen von Pixeln ein vollständiges Bild.

🔢 Ein typisches Smartphone-Foto hat heute 10–50 Megapixel – also 10 bis 50 Millionen einzelne Punkte!

🎨 Pixel-Zeichner – male dein eigenes Pixelbild!

Wähle eine Farbe und klicke auf die Zellen:

Aktive Farbe: #7c3aed

Klicke auf die Karten – Pixel im Alltag

📱

Smartphone-Display

Das Display deines Handys hat 400–500 Pixel pro Zoll (ppi). So dicht, dass du die einzelnen Punkte nicht siehst.

📺

4K-Fernseher

Ein 4K-TV hat 3840 × 2160 Pixel = über 8 Millionen Bildpunkte. «4K» heisst: ca. 4000 Pixel in der Breite.

🎮

Videospiele

Retro-Spiele wie Mario wurden mit 8×8 oder 16×16 Pixel grossen Figuren (Sprites) gemacht – heute sind es Millionen.

🖨️

Drucker

Drucker messen die Auflösung in DPI (Dots per Inch). 300 DPI ist für Fotos gut – bei weniger sieht man die Punkte.

Wie gross ist ein Pixelbild?

Berechne selbst: Breite × Höhe = Anzahl Pixel

Breite (Pixel):

Höhe (Pixel):

Gesamtzahl Pixel:

2 073 600 Pixel

In Megapixel:

≈ 2,1 MP

MODUL 2 — FARBEN & BITS

Wie werden Farben im Computer gespeichert?

Computer kennen keine Farben – sie kennen nur Zahlen. Jede Farbe wird als Kombination von Rot, Grün und Blau gespeichert: das RGB-System.

🔢 Jeder Farbkanal (R, G, B) hat einen Wert von 0 bis 255. Das ergibt 256 × 256 × 256 = 16,7 Millionen mögliche Farben!

RGB-Farbmischer 🎨

Verschiebe die Regler und beobachte die Farbe:

R 124 G 58 B 237

RGB-Wert:

rgb(124, 58, 237)

Hex-Farbe:

#7c3aed

💡 Hex-Farbe = die RGB-Werte als Hexadezimalzahlen (0–9 und A–F). Webdesigner nutzen sie täglich!

Bits und Bytes – wie viel Platz braucht eine Farbe?

Eine Farbe braucht 3 Bytes (24 Bit) – je 1 Byte (8 Bit) für Rot, Grün und Blau.

1 Pixel (24-Bit-Farbe) = 3 Bytes

R: 01111100

G: 00111010

B: 11101101

Ein 1920×1080 Bild (unkomprimiert) =

≈ 5,9 MB

⚠️ Ohne Kompression wäre ein normales Smartphone-Foto über 50 MB gross! Deshalb ist Bildkompression so wichtig.

Klicke auf die Bits – interaktiver Byte-Rechner

Schalte Bits an (lila) und aus (grau). Der Wert rechts zeigt die Dezimalzahl:

00000000

→

0

(von max. 255)

💡 Mit 8 Bits (1 Byte) kann man Zahlen von 0 bis 255 darstellen – also genau die Intensität eines Farbkanals!

MODUL 3 — AUFLÖSUNG

Auflösung – warum sind manche Bilder schärfer?

Die Auflösung gibt an, wie viele Pixel ein Bild hat. Mehr Pixel = schärferes Bild. Aber: mehr Pixel = mehr Speicherplatz!

Auflösungs-Simulator

Verschiebe den Regler und beobachte, wie das Bild schärfer oder unschärfer wird:

Auflösung: 32 × 32 Pixel

Pixel pro Bild:

1 024 Pixel

Dateigrösse (unkomprimiert, 24-bit):

3 KB

Gängige Auflösungen im Vergleich

Bezeichnung	Pixel (B×H)	Megapixel	Verwendung
SD	640 × 480	0,3 MP	Alte DVDs, Webcams
HD (720p)	1280 × 720	0,9 MP	YouTube (Standard)
Full HD (1080p)	1920 × 1080	2,1 MP	TV, Laptop, Streaming
4K (UHD)	3840 × 2160	8,3 MP	Modernes TV, Kino
8K	7680 × 4320	33,2 MP	Professionelles Video

Was passiert beim Vergrössern?

🔍

Verpixelung

Wenn du ein kleines Bild gross anzeigst, werden die Pixel sichtbar als Quadrate. Das Bild wird «verpixelt» oder «pixelig».

🤖

Upscaling

Moderne KI kann Bilder «hochrechnen» – fehlende Pixel werden intelligent geschätzt. Das nennt man KI-Upscaling.

📏

PPI vs. DPI

PPI = Pixels per Inch (Bildschirm). DPI = Dots per Inch (Drucker). Beide messen die Punktdichte, aber in unterschiedlichen Kontexten.

📸

Mehr MP = besseres Foto?

Nicht unbedingt! Die Grösse des Sensors und die Qualität der Linse sind wichtiger als die reine Pixelanzahl.

MODUL 4 — BILDKOMPRESSION

Bildkompression – weniger Platz, trotzdem gutes Bild

Bildkompression bedeutet: ein Bild so speichern, dass es weniger Speicherplatz braucht. Es gibt zwei Arten:

✅ Verlustfrei (lossless)
Kein Detail geht verloren. Das Original kann exakt wiederhergestellt werden. Dateiformate: PNG, BMP

⚠️ Verlustbehaftet (lossy)
Kleine Details werden weggelassen. Kleinere Dateien, aber nicht exakt wiederherstellbar. Dateiformate: JPEG, WebP

RLE – Run-Length Encoding (verlustfrei)

Eine einfache verlustfreie Methode: Statt gleiche Farben zu wiederholen, schreibt man «Anzahl + Farbe».

ORIGINAL (16 Pixel, unkomprimiert):

RLE-KODIERT:

Wähle ein Beispiel:

JPEG-Kompression visualisieren

JPEG teilt das Bild in 8×8-Blöcke und vereinfacht jeden Block. Verschiebe die Qualitätsstufe:

JPEG-Qualität: 75%

Original PNG:

100%

JPEG bei dieser Qualität:

≈ 35%

💡 Bei JPEG-Qualität 85–95% ist der Unterschied für das menschliche Auge kaum sichtbar, aber die Datei ist 5× kleiner!

Dateiformate im Vergleich

Verschiedene Formate für verschiedene Zwecke:

Format	Typ	Grösse	Verwendung	Transparenz?
BMP	Verlustfrei	Sehr gross	Windows-Grundformat	Nein
PNG	Verlustfrei	Mittel	Logos, Screenshots, Grafiken	✅ Ja
JPEG	Verlustbehaftet	Klein	Fotos, Internet	Nein
GIF	Verlustfrei	Klein	Animationen, nur 256 Farben	✅ (1-bit)
WebP	Beides möglich	Sehr klein	Moderne Webseiten	✅ Ja
SVG	Vektorgrafik	Winzig	Logos, Icons (skalierbar)	✅ Ja

DIESELBE FOTOGRAFIE – verschiedene Formate:

BMP (unkomprimiert)

5.9 MB

PNG (verlustfrei)

≈ 3.2 MB

JPEG 90%

≈ 1.2 MB

JPEG 75%

≈ 600 KB

WebP

≈ 400 KB

Wann welches Format? Entscheide selbst:

📸

Du möchtest ein Urlaubsfoto auf WhatsApp schicken.

✅ JPEG – Fotos mit vielen Farben und sanften Übergängen eignen sich perfekt für JPEG. Der kleine Qualitätsverlust fällt kaum auf, die Datei ist viel kleiner.

🎨

Du hast ein Logo mit transparentem Hintergrund gemacht.

✅ PNG – PNG unterstützt Transparenz (Alpha-Kanal) und ist verlustfrei. Für Logos, Icons und Grafiken mit wenigen Farben ideal.

📄

Du scannst ein wichtiges Dokument und willst es exakt aufbewahren.

✅ PNG oder TIFF – Verlustfrei, damit kein Text oder Detail verloren geht. Bei medizinischen oder juristischen Dokumenten ist verlustfreie Kompression Pflicht!

🌐

Du baust eine Webseite und willst schnelle Ladezeiten.

✅ WebP – Modernes Format, das von allen Browsern unterstützt wird. 25–35% kleiner als JPEG bei gleicher Qualität. Perfekt für Webseiten!

MODUL 5 — PIXEL-ATELIER

Pixel-Atelier – gestalte und analysiere

Wende alles an, was du gelernt hast.

🎨 Grosses Pixel-Bild (16×16)

Male ein Pixelbild auf dem 16×16 Raster. Wie viele Pixel hat dein Bild?

Wissens-Check – Kompression verstehen

🤔

Frage A: Warum ist RLE bei einem Foto aus der Natur weniger effizient als bei einem Screenshot?

✅ Ein Naturfoto hat sehr viele verschiedene Farben nebeneinander (z. B. viele leicht verschiedene Grüntöne). RLE funktioniert gut, wenn lange Reihen gleicher Farben vorkommen – bei Fotos selten. Bei Screenshots gibt es oft grosse einfarbige Flächen (z. B. Hintergrund).

🤔

Frage B: Du speicherst ein JPEG-Bild mehrmals als JPEG neu ab. Was passiert?

⚠️ Qualitätsverlust auf Qualitätsverlust! Jedes Mal, wenn ein JPEG erneut als JPEG gespeichert wird, gehen neue Details verloren. Nach 5–10 Mal ist der Qualitätsverlust deutlich sichtbar. Profi-Tipp: Original immer als RAW oder PNG aufbewahren!

🤔

Frage C: Ein Bild ist 4000 × 3000 px. Du skalierst es auf 2000 × 1500 px. Was passiert?

✅ Die Pixelzahl sinkt von 12 Millionen auf 3 Millionen – ein Viertel. Das Bild wird kleiner und braucht weniger Speicher. Die Qualität reicht für Web meistens noch gut aus, aber für grossen Druck fehlen dann Details.

QUIZ

Abschluss-Quiz – zeige was du kannst!

9 Fragen aus allen Modulen. Viel Erfolg!

FRAGE 1

Was bedeutet «Pixel»?

FRAGE 2

Wie viele Farben sind mit dem 24-Bit-RGB-System möglich?

FRAGE 3

Was beschreibt die «Auflösung» eines Bildes?

FRAGE 4

Was ist «verlustfreie Kompression»?

FRAGE 5

Welches Format eignet sich am besten für ein Logo mit transparentem Hintergrund?

FRAGE 6

Was macht RLE (Run-Length Encoding)?

FRAGE 7

Was passiert, wenn du ein JPEG-Bild mehrfach als JPEG neu abspeicherst?

FRAGE 8

Wie viele Bytes braucht ein einzelner Pixel im 24-Bit-RGB-System?

FRAGE 9

Welches moderne Format ist für Webseiten besonders geeignet, da es kleiner als JPEG ist?