seminar computergrafik grafikformate png und gif stefan hubertus

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)

Die LZW-KomprimierungLempel, Ziv, Welch

Kodiert beliebige ZeichenfolgenWö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)

1. Indiziere alle Zeichen im Text (ASCII)2. 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 ausc. Hänge neues Wort an das Lexikon and. Merke Dir letztes Zeichen des Wortes

3. Gehe zu 2. wobei dessen neues Zeichen an das gemerkte angehängt wird, bis keine Zeichen mehr vorhanden ist.

Dekodierung in Worten

1. Init Lexikon für alle Zeichen2. Lese Indexe solange es welche gibtFall1 : Index im Lexikon => einfach ersetzenFall2 : Index nicht im Wörterbuch.

(Nur möglich bei zkzkz Kombination : z = Zeichen, k = beliebige Kette.) => letztes Wort + 1.Zeichen letztes Wort = Ausgabe

3. 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-AlgorithmusLempel und Ziv

Gleitendes Fenster konstanter Größe (32kB)– Vorschaupuffer (noch zu komprimieren)– Textfeld (Wörterbuch)

Es entstehen 3-Tupel1. Position des Eintrags im Fenster2. Länge der zu kopierenden Daten3. Das darauf folgende Zeichen (Um auch neue Daten in das

Lexikon schreiben zu können) Einstellbare Parameter

– Fenstergröße– Suchintensität

Beispiel zur KodierungAnanas

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 A NA N A N A

A N A N A SA N A N A S

A N A N A S

Beispiel zur Dekodierung(0,0,A);(0,0,N);(7,2,A);(0,0,S)

(0,0,A)(0,0,N)(7,2,A)(0,0,S)

1 2 3 4 5 6 7 8

AA N

A N A N A

A N A N A 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 Text2. Die 2 Knoten/Bäume mit dem geringsten Gewicht

zusammen an neuen Vater hängen3. Wiederholen bis nur noch ein Baum existiert

Geschichtliches

1977 LZ77 (Komprimierungsalgorithmus) wird von Abraham Lempel und Jacob Ziv entwickelt

1978 LZ78 als Variante weiterentwickelt1981 LZ78 wird patentiert1983 LZW von Terry A. Welch (Sperry Corporation)

patentiert (Ähnlichkeit zu LZ78 wurde nicht erkannt)1987 GIF 87a als freie und offene Spezifikation1989 CompuServe stellt GIF 89a vor

Geschichtliches

1994 Unisys fordert für kommerzielle Nutzung von LZW Gebühren

1995 PNG in Diskussionsforen gegründet, erhält Unterstützung von CompuServe, W3C veröffentlicht PNG-Spezifikation 0.92 als öffentliches Arbeitsdokument

1997 Netscape 4.04 und IE 4.0 unterstützen PNG1999 Auch für nichtkommerzielle Nutzung des LZW

werden Gebühren erhoben2003 GIF-Patent von Unisys läuft in Amerika aus2004 Patentende auch in Europa, Japan und Kanada

GIF-EigenschaftenGraphics Interchange Format

Rastergrafikformat1 bis 8 Bit (= 256 Farben)Max. Bildgröße 65536 x 65536 PixelMehrere Bilder pro Datei speicherbar

(Animationen)LZW- Kompression (verlustfrei)Zusatzinformationen speicherbar (Text,

Kommentare,..)Stark verbreitet

GIF-EigenschaftenGraphics Interchange Format

Interlaced Modus bei GIF

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

Aufbau einer GIF-Datei

1. Header :– Definiert die Daten die für alle Bilder gelten

2. Bilddaten :– Definiert Daten für das Einzelbild– Beinhaltet die LZW-komprimierten Pixelwerte

3. (Optional) Erweiterungsblöcke (ab Vers. 89a)4. 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 GIFBestehende Datenformate nicht so

universell wie GIFNeues Format musste her

“PiNG is not GIF“

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 PixelGamma-Information (Helligkeit, Kontrast um

Bild auf versch. Systemen identisch anzuzeigen)Keine Animation ( MNG)

Deflate/Inflate-AlgorithmusPhil Katz

Verlustlose Datenkompression (zip,gz,TIFF,PDF,zlib) Kein Urheberrecht Teilt sich in auf in

1. LZ77 : Komprimiert durch Indizierung z.B. die RGB-Werte des Bildes

2. 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)

11 66 44 66 22 66 44 667 7 7 7 7 7 7 77 7 7 7 7 7 7 755 66 55 66 55 66 55 667 7 7 7 7 7 7 77 7 7 7 7 7 7 733 66 44 66 33 66 44 667 7 7 7 7 7 7 77 7 7 7 7 7 7 755 66 55 66 55 66 55 667 7 7 7 7 7 7 77 7 7 7 7 7 7 7

•Arbeitet in 7 Schritten

•Blöcke 8x8 Pixel

Filtertypen

Ziel ist es möglichst gute KompressionFilterung kann von Zeile zu Zeile wechselnTyp0 Kein FilterTyp1 Differenz zu linken NachbarnTyp2 Differenz zu oberen NachbarnTyp3 Differenz zum Mittelwert vom linken und

oberen NachbarnTyp4 Paeth-Filter. Ermittelt günstigste

Farbdifferenz aus linken, linken- oberen oder oberen Nachbarn

Aufbau einer PNG-Datei

1. Signatur Identifikation

2. IHDR-Chunk Image Header3. (PLTE-Chunk) Farbtabelle4. (optionale Chunks)5. IDAT-Chunks Image Data6. IEND-Chunk Image Trailer

Aufbau der Chunks

4 Byte : Datenlänge = n4 Byte : Typ (Chunk-Erkennung)n Byte : Daten (Chunktypabhängig)4 Byte : CRC-32-Prüfsumme (Cyclic

Redundancy Check)

Zusatzchunks

Nicht unbedingt erforderlichMan kann eigene Zusatzchunks schreibenEin 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,00 1,46 1,02

Echtfarben 1,00 - 1,29

PNG vs. GIF

Quellen

www.wikipedia.dewww.w3.org/TR/PNGwww.selfhtml.org/grafik/www.w3.org/Graphics/GIFwww.informatik.uni-mainz.de/lehre/cgwww.graphics.ethz.ch/teaching/infotheory

/Downloads/Applet_work_fullscreen.htmlwww.schreib.info/downloads/Projekt_Bildformate.pdfwww.tu_chemnitz.de/docs/yale/graphics/transparent_

gifs.html

ENDE

Vielen Dank fürs Zuhören