BildformatLab

Bildformate · Staatliche Berufsschule 1 Kempten
← Übersicht

Bildformate

GIF, PNG, JPEG, TIFF, EPS, SVG, RAW und WebP sicher unterscheiden – Aufbau, Kompression und der richtige Einsatzbereich für jedes Format.

Verstehen
🖼️
Modul 01
Grundlagen

Pixel oder Vektor, Farbtiefe und Kompression – dazu GIF, PNG, JPEG, TIFF, EPS, SVG, RAW und WebP im Überblick.

Theorie · Tabelle
🔍
Modul 02
Format-Explorer

Ein Format antippen und alle Eigenschaften sowie den Hintergrund dazu nachlesen.

Interaktiv
Spielen und üben
🃏
Modul 03
Format-Memory

Format und Merkmal paaren. Wer wenige Züge braucht, kennt die Formate im Schlaf.

Spiel · 3 Stufen
Modul 04
Format-Blitz

Ein Merkmal erscheint, du tippst das passende Format – gegen die Uhr, mit Serienbonus.

Spiel · 60 Sekunden
🗂️
Modul 05
Einsatz-Sortierer

Für welchen Anwendungsfall ist welches Format gemacht? Ordne zu und lies die Begründung.

Spiel · Zuordnen
🧮
Modul 06
Rechen-Trainer

Unkomprimierte Datenmenge, Scan-Größen und JPEG-Kompressionsverhältnisse berechnen. Aufgaben werden bei jedem Start neu gewürfelt.

Zufallsaufgaben · Serie
🖼️ Grundlagen

Pixel oder Vektor?

Pixelgrafiken (Bitmap- oder Rastergrafiken) bestehen aus einem festen Raster einzelner Bildpunkte. Vergrößert man sie stark, werden die Pixel selbst sichtbar – das Bild wirkt „pixelig“. Vektorgrafiken beschreiben Formen dagegen mathematisch über Punkte, Linien und Kurven und bleiben deshalb in jeder Größe gestochen scharf.

GIF, PNG, JPEG, TIFF und RAW sind reine Pixelformate, SVG ist ein reines Vektorformat – EPS ist ein „Metaformat“ und kann beides gleichzeitig enthalten.

Zoom-Vergleich
Pixelgrafik – wird blockig
Vektorgrafik – bleibt glatt

Farbtiefe

Die Farbtiefe gibt an, wie viele Bit pro Bildpunkt (bzw. pro Farbkanal) gespeichert werden. Aus n Bit ergeben sich 2ⁿ darstellbare Stufen: 1 Bit = Strichzeichnung (schwarz/weiß), 8 Bit = 256 Graustufen oder eine 256er-Farbpalette, 24 Bit (8 Bit je RGB-Kanal) = 16,7 Millionen Farben, 32 Bit = CMYK-Bild mit 8 Bit je Druckfarbe.

Verlustfrei oder verlustbehaftet?

Bei verlustfreier Kompression (z. B. LZW, ZIP/Deflate, RLE, Huffman) lässt sich die Originaldatei nach dem Entpacken exakt wiederherstellen – es gehen keine Bilddaten verloren. Bei verlustbehafteter Kompression wie bei JPEG werden Bildinformationen dauerhaft entfernt, um die Datei kleiner zu machen. Wird eine JPEG-Datei mehrfach neu gespeichert, verschlechtert sich die Qualität mit jedem Mal weiter.

Sonderfall GIF: Die LZW-Kompression selbst ist verlustfrei – wird eine Echtfarbenvorlage mit Millionen Farben aber vorher auf die maximal 256 Palettenfarben von GIF reduziert, gehen dabei bereits Bilddaten verloren, noch bevor überhaupt komprimiert wird. „GIF ist verlustfrei" stimmt also nur für den Kompressionsschritt selbst, nicht für die Farbreduktion davor.

Interlacing – schrittweiser Bildaufbau

Mehrere Bitmapformate können ein Bild in Stufen statt zeilenweise von oben nach unten aufbauen, damit im Web schon ein grober Eindruck entsteht, bevor die ganze Datei geladen ist. GIF baut das Bild in vier Interlace-Stufen auf – bereits nach 50 % der Ladezeit ist der Inhalt zu erkennen. PNG nutzt dafür das feinere „Adam7"-Schema mit sieben Durchgängen: Wesentliche Bildstrukturen sind hier schon nach 20–30 % der übertragenen Daten erkennbar, also schneller als bei GIF. Der Nachteil: Die für Adam7 nötige Datenanordnung lässt sich schlechter komprimieren, interlaced PNGs sind daher etwas größer als nicht-interlaced PNGs.

Transparenz und Animation

Transparenz lässt den Hintergrund einer Seite durch eine Grafik hindurchscheinen – wichtig etwa für Logos im Web. GIF kennt nur eine binäre Transparenz (eine Farbe ist entweder sichtbar oder unsichtbar), PNG und TIFF erlauben feine, weich auslaufende Abstufungen über einen Alphakanal.

Animation beherrschen klassisch GIF (mehrere Bilder nacheinander) und SVG (direkt über XML-Angaben, ganz ohne zusätzliches Skript). PNG selbst wurde bewusst ohne Animation entworfen – dafür war ursprünglich das eigene Format MNG gedacht, das sich nie durchgesetzt hat. Die spätere Erweiterung APNG (Animated PNG) wird heute aber von allen gängigen Browsern unterstützt und macht auch PNG animierbar. Auch das modernere WebP beherrscht Animation.

🔍 Format-Explorer

Ein Format auswählen

Tippe auf ein Format, um alle Eigenschaften und den fachlichen Hintergrund dazu zu sehen.

🃏 Format-Memory

Format und Merkmal paaren

Decke zwei Karten auf. Passen Format und Merkmal zusammen, bleiben sie offen. Je weniger Züge du brauchst, desto sicherer sitzen die Formate.

⚡ Format-Blitz

60 Sekunden, so viele wie möglich

Es erscheint ein Merkmal – tippe das passende Format. Jede richtige Antwort bringt Punkte, eine Serie bringt mehr. Bei einem Fehler fällt die Serie auf null.

🗂️ Einsatz-Sortierer

Welches Format passt?

Für jeden Anwendungsfall gibt es ein Format, das am besten passt. Ordne zu und lies danach die Begründung.

🧮 Rechen-Trainer

Datenmenge, Scan-Größe und Kompression

Eine Formel reicht für die unkomprimierte Datenmenge:

Datenmenge = Breite × Höhe × Farbtiefe : 8   (Ergebnis in Byte)
Pixel = Seitenlänge (mm) : 25,4 × Auflösung (ppi)   für Scans
Aufgabenart
Serie
0
Bestserie
0