📦 Dateiformate sichtbar gemacht

Wie funktionieren PNG, JPEG & GIF?

VisualImages zeigt Schritt für Schritt, wie Grafikdateien aufgebaut sind — vom ersten Magic Byte bis zu den komprimierten Bilddaten. Mit visuellen Byte-Layouts, ASCII-Diagrammen und einfachem C-Code zu den zugrunde liegenden Strukturen.

89 50 4E 47

PNG

Portable Network Graphics — verlustfreie Kompression mit Chunks

→ Aufbau, C-Strukturen & Kompression ansehen
FF D8 FF

JPEG

Joint Photographic Experts Group — verlustbehaftete Kompression mit Markern

→ Aufbau, C-Strukturen & Kompression ansehen
47 49 46 38

GIF

Graphics Interchange Format — Palette, LZW-Kompression & Animation

→ Aufbau, C-Strukturen & Kompression ansehen
Dictionary

LZW

Das verlustfreie Wörterbuch-Verfahren hinter GIF — Schritt für Schritt erklärt.

→ Algorithmus, Beispiel & C-Code ansehen
50 4B 03 04…

ZIP

Container-Format mit DEFLATE — Local Header, Central Directory & EOCD.

→ Aufbau & C-Strukturen ansehen
AE426082

CRC-32

Die Prüfsumme in PNG-Chunks & ZIP — mit visuellem Schritt-für-Schritt-Beispiel.

→ Algorithmus visuell ansehen

🔬 Was du hier lernst

🧩 Byte-Aufbau

Jede Datei beginnt mit einer „Magic Number“. Wir zerlegen Header, Chunks, Marker und Blöcke visuell in ihre einzelnen Bytes.

⌨️ C-Strukturen

Zu jedem Format zeigen wir passende struct-Definitionen und einfachen Lesecode — inklusive der Byte-Order-Fallstricke.

🗜️ Kompression

DEFLATE bei PNG, DCT bei JPEG, LZW bei GIF — verlustfrei oder verlustbehaftet, hier anschaulich erklärt.

→ LZW Schritt für Schritt ansehen

🆚 Formate im Vergleich

FormatKompressionFarbenTransparenzAnimationByte-Order
PNGverlustfrei (DEFLATE)bis 16 Bit/KanalAlpha (8/16 Bit)nur via APNGBig-Endian
JPEGverlustbehaftet (DCT)24 Bit (YCbCr)neinneinBig-Endian
GIFverlustfrei (LZW)max. 256 (Palette)1 Farbe (Index)jaLittle-Endian