Seminar Computergrafik Grafikformate PNG und GIF Stefan Hubertus

Um was geht es? Rasterformate (Bitmaps) Pixel mit Koordinaten und Farbwert Internetgerechte Speicherformate Verlustfreie Kompression Plattform- und Geräteunabhängig Interlaced Modus (grobe Bildvorschau) Vektorgrafik (Beispiel : …)

Die LZW-Komprimierung Lempel, Ziv, Welch Kodiert beliebige Zeichenfolgen Wörterbuchbasierte Kodierung Zeichenketten durch Kürzel dargestellt und in Wörterbuch geschrieben Wörterbuch kann aus der Codierung rekonstruiert werden Einträge im Lexikon über 12 Bit langen Index ansprechbar Maximal 212 = 4096 Einträge Einfacher Algorithmus

Algorithmus in Worten (abbbcab) Indiziere alle Zeichen im Text (ASCII) Hole nächstes Zeichen (falls vorhanden) a. Falls diese(s) schon im Lexikon, hole nächstes Zeichen und hänge es an. Wdh. solange bis ein Wort entsteht welches nicht im Lexikon existiert b. Gebe Index für das Wort ohne sein letztes Zeichen aus c. Hänge neues Wort an das Lexikon an d. Merke Dir letztes Zeichen des Wortes Gehe zu 2. wobei dessen neues Zeichen an das gemerkte angehängt wird, bis keine Zeichen mehr vorhanden ist.

Dekodierung in Worten Init Lexikon für alle Zeichen Lese Indexe solange es welche gibt Fall1 : Index im Lexikon => einfach ersetzen Fall2 : Index nicht im Wörterbuch. (Nur möglich bei zkzkz Kombination : z = Zeichen, k = beliebige Kette.) => letztes Wort + 1.Zeichen letztes Wort = Ausgabe Wenn der n-te Code interpretiert ist, erweitere das Lexikon mit dem Wort n-1 und dem ersten Zeichen des n-ten Wortes und fahre fort mit 2.

LZ77-Algorithmus Lempel und Ziv Gleitendes Fenster konstanter Größe (32kB) Vorschaupuffer (noch zu komprimieren) Textfeld (Wörterbuch) Es entstehen 3-Tupel Position des Eintrags im Fenster Länge der zu kopierenden Daten Das darauf folgende Zeichen (Um auch neue Daten in das Lexikon schreiben zu können) Einstellbare Parameter Fenstergröße Suchintensität

Beispiel zur Kodierung Ananas Wörterbuchfenster Vorschau =>(0,0,A) =>(0,0,N) =>(7,2,A) =>(0,0,S) =>fertig 1 2 3 4 5 6 7 8 A N S

Beispiel zur Dekodierung (0,0,A);(0,0,N);(7,2,A);(0,0,S) 1 2 3 4 5 6 7 8 A N S

Huffman-Codierung (Entropiecodierung) Ziel : Kurzmöglichste Darstellung ohne Informationsverlust Weg : Häufigstes Zeichen => kürzester Code |Text| = Σ ZeichenText * #ZeichenText Präfixfrei und Eindeutig bei der Decodierung Der Algorithmus in Worten: 1. Sei jedes Zeichen ein Wurzelknoten mit Gewicht = # Vorkommen im Text Die 2 Knoten/Bäume mit dem geringsten Gewicht zusammen an neuen Vater hängen Wiederholen bis nur noch ein Baum existiert

Geschichtliches LZ77 (Komprimierungsalgorithmus) wird von Abraham Lempel und Jacob Ziv entwickelt LZ78 als Variante weiterentwickelt LZ78 wird patentiert LZW von Terry A. Welch (Sperry Corporation) patentiert (Ähnlichkeit zu LZ78 wurde nicht erkannt) GIF 87a als freie und offene Spezifikation CompuServe stellt GIF 89a vor IBM

Geschichtliches Unisys fordert für kommerzielle Nutzung von LZW Gebühren PNG in Diskussionsforen gegründet, erhält Unterstützung von CompuServe, W3C veröffentlicht PNG-Spezifikation 0.92 als öffentliches Arbeitsdokument Netscape 4.04 und IE 4.0 unterstützen PNG Auch für nichtkommerzielle Nutzung des LZW werden Gebühren erhoben GIF-Patent von Unisys läuft in Amerika aus Patentende auch in Europa, Japan und Kanada

GIF-Eigenschaften Graphics Interchange Format Rastergrafikformat 1 bis 8 Bit (= 256 Farben) Max. Bildgröße 65536 x 65536 Pixel Mehrere Bilder pro Datei speicherbar (Animationen) LZW- Kompression (verlustfrei) Zusatzinformationen speicherbar (Text, Kommentare,..) Stark verbreitet

GIF-Eigenschaften Graphics Interchange Format

Interlaced Modus bei GIF Arbeitet in 4 Schritten : Jede 8. Zeile ab Zeile 0 => (0, 8,16,..) Jede 8. Zeile ab Zeile 4 => (4,12,20,..) Jede 4. Zeile ab Zeile 2 => (2, 6,10,..) Jede 2. Zeile ab Zeile 1 => (1, 3, 5,..)

Aufbau einer GIF-Datei Header : Definiert die Daten die für alle Bilder gelten Bilddaten : Definiert Daten für das Einzelbild Beinhaltet die LZW-komprimierten Pixelwerte (Optional) Erweiterungsblöcke (ab Vers. 89a) GIF-Terminator ; (Hex : 3b)

Erweiterungsblöcke Möglichkeiten der Erweiterungen sind : ASCII-Text als Grafik auf Bildfläche Kommentare als ASCII-Text mitspeichern Verhalten der Grafik ändern (z.B.: Animationsgeschwindigkeit) Eigene Erweiterungsblöcke Genaue Strukturen können in den Spezifikationen nachgelesen werden

Bildbeispiele für Gif-Dateien

Warum PNG? (Portable Network Graphics) Lizenzrechte für GIF Bestehende Datenformate nicht so universell wie GIF Neues Format musste her “PiNG is not GIF“ entweder plattformabhängig, nicht portabel, nicht sequentiell, Kompression nicht verlustlos oder zu kompliziert

PNG (Portable Network Graphics) Farbtiefe : Palette bis zu 8 Bit Graustufen 16 Bit pro Bildpunkt Echtfarben 48 Bit pro Bildpunkt Alpha-Kanal +16 Bit (Stufenlose Transparenz) Max. Bildgröße: 231-1 Pixel Gamma-Information (Helligkeit, Kontrast um Bild auf versch. Systemen identisch anzuzeigen) Keine Animation ( MNG) Echtfarben(48 Bit pro Bildpunkt => 16 Bit pro Farbkanal)

Deflate/Inflate-Algorithmus Phil Katz Verlustlose Datenkompression (zip,gz,TIFF,PDF,zlib) Kein Urheberrecht Teilt sich in auf in LZ77 : Komprimiert durch Indizierung z.B. die RGB-Werte des Bildes Huffman-Code : Erstellt für die Indizes einen präfixfreien, eindeutigen Code Einstellbare Parameter Fenstergröße Suchintensität Vordefinierte / errechnete Huffmantabellen

Interlaced Modus (Adam 7) Arbeitet in 7 Schritten Blöcke 8x8 Pixel 1 6 4 6 2 6 4 6 7 7 7 7 7 7 7 7 5 6 5 6 5 6 5 6 3 6 4 6 3 6 4 6

Filtertypen Ziel ist es möglichst gute Kompression Filterung kann von Zeile zu Zeile wechseln Typ0 Kein Filter Typ1 Differenz zu linken Nachbarn Typ2 Differenz zu oberen Nachbarn Typ3 Differenz zum Mittelwert vom linken und oberen Nachbarn Typ4 Paeth-Filter. Ermittelt günstigste Farbdifferenz aus linken, linken- oberen oder oberen Nachbarn Ziel relative Werte zu bekommen da sich bei großen Bildern große Fläche ähneln Bsp. Weißes Bild = > 255 überall => 0 fast überall

Aufbau einer PNG-Datei Signatur Identifikation IHDR-Chunk Image Header (PLTE-Chunk) Farbtabelle (optionale Chunks) IDAT-Chunks Image Data IEND-Chunk Image Trailer

Aufbau der Chunks 4 Byte : Datenlänge = n 4 Byte : Typ (Chunk-Erkennung) n Byte : Daten (Chunktypabhängig) 4 Byte : CRC-32-Prüfsumme (Cyclic Redundancy Check) mit dem Kontrollpolynom x32 + x26 + x23 + x22 + x16 + x12 + x11 + x10 + x8 + x7 + x5 + x4 + x2 + x + 1

Zusatzchunks Nicht unbedingt erforderlich Man kann eigene Zusatzchunks schreiben Ein paar Beispiele der offiziellen Zusatzchunks bKGD Hintergrundfarbe cHRM Geräteunabhängige Farbdarstellung gAMA Gamma-Wert des Bildes hIST Häufigkeit der Farben pHYs Physikalische Bildgröße tEXt Textuelle Informationen tRNS Angaben über einfache Transparenz gIFg Kompatibilität zu GIF89a

Dateigrößen im Vergleich PNG GIF JPEG 256 Farben 1,00 1,21 - Graustufen 1,46 1,02 Echtfarben 1,29

PNG vs. GIF

Quellen www.wikipedia.de www.w3.org/TR/PNG www.selfhtml.org/grafik/ www.w3.org/Graphics/GIF www.informatik.uni-mainz.de/lehre/cg www.graphics.ethz.ch/teaching/infotheory/Downloads/Applet_work_fullscreen.html www.schreib.info/downloads/Projekt_Bildformate.pdf www.tu_chemnitz.de/docs/yale/graphics/transparent_gifs.html

Vielen Dank fürs Zuhören ENDE Vielen Dank fürs Zuhören