seminar computergrafik grafikformate png und gif stefan hubertus

29
Seminar Computergrafik Grafikformate PNG und GIF Stefan Hubertus

Upload: gerda-schulz

Post on 06-Apr-2016

217 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Seminar Computergrafik Grafikformate PNG und GIF Stefan Hubertus

Seminar Computergrafik

Grafikformate PNG und GIF

Stefan Hubertus

Page 2: 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)

Page 3: Seminar Computergrafik Grafikformate PNG und GIF Stefan Hubertus

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

Page 4: Seminar Computergrafik Grafikformate PNG und GIF Stefan Hubertus

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.

Page 5: Seminar Computergrafik Grafikformate PNG und GIF Stefan Hubertus

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.

Page 6: Seminar Computergrafik Grafikformate PNG und GIF Stefan Hubertus

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

Page 7: Seminar Computergrafik Grafikformate PNG und GIF Stefan Hubertus

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

Page 8: Seminar Computergrafik Grafikformate PNG und GIF Stefan Hubertus

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

Page 9: Seminar Computergrafik Grafikformate PNG und GIF Stefan Hubertus

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

Page 10: Seminar Computergrafik Grafikformate PNG und GIF Stefan Hubertus

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

Page 11: Seminar Computergrafik Grafikformate PNG und GIF Stefan Hubertus

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

Page 12: Seminar Computergrafik Grafikformate PNG und GIF Stefan Hubertus

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

Page 13: Seminar Computergrafik Grafikformate PNG und GIF Stefan Hubertus

GIF-EigenschaftenGraphics Interchange Format

Page 14: Seminar Computergrafik Grafikformate PNG und GIF Stefan Hubertus

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

Page 15: Seminar Computergrafik Grafikformate PNG und GIF Stefan Hubertus

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)

Page 16: Seminar Computergrafik Grafikformate PNG und GIF Stefan Hubertus

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

Page 17: Seminar Computergrafik Grafikformate PNG und GIF Stefan Hubertus

Bildbeispiele für Gif-Dateien

Page 18: Seminar Computergrafik Grafikformate PNG und GIF Stefan Hubertus

Warum PNG? (Portable Network Graphics)

Lizenzrechte für GIFBestehende Datenformate nicht so

universell wie GIFNeues Format musste her

“PiNG is not GIF“

Page 19: Seminar Computergrafik Grafikformate PNG und GIF Stefan Hubertus

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)

Page 20: Seminar Computergrafik Grafikformate PNG und GIF Stefan Hubertus

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

Page 21: Seminar Computergrafik Grafikformate PNG und GIF Stefan Hubertus

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

Page 22: Seminar Computergrafik Grafikformate PNG und GIF Stefan Hubertus

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

Page 23: Seminar Computergrafik Grafikformate PNG und GIF Stefan Hubertus

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

Page 24: Seminar Computergrafik Grafikformate PNG und GIF Stefan Hubertus

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)

Page 25: Seminar Computergrafik Grafikformate PNG und GIF Stefan Hubertus

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

Page 26: Seminar Computergrafik Grafikformate PNG und GIF Stefan Hubertus

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

Page 27: Seminar Computergrafik Grafikformate PNG und GIF Stefan Hubertus

PNG vs. GIF

Page 28: Seminar Computergrafik Grafikformate PNG und GIF Stefan Hubertus

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

Page 29: Seminar Computergrafik Grafikformate PNG und GIF Stefan Hubertus

ENDE

Vielen Dank fürs Zuhören