png0a0.png

Edit v4.000 from 2009-03-16 to 2020-04-07 by TSc+HSc

Portable Network Graphics

PNG steht für Portable Network Graphics und dient als Nachfolgeformat von GIF dem Compuserve Graphics Interchange Format. Dieses Format wurde speziell für das Internet entwickelt und erlaubt Kompression, sowie Transparenz, bzw. einen eigenen Transparenzkanal. Mit diesem Format kann man Einzelbilder verlustfrei speichern, d.H. egal wie Stark man komprimiert, die Bildinformationen gehen nicht verloren. PNG ist eine sogenannte Rastergrafik, d.H. es wird jeder Pixel des Bilds einzeln gespeichert.

Die Erweiterung APNG für Animationen, mit Der Aufbau einer PNG-Datei, mit

Aufbau von APNG

png2a.png
Abb. 2a: Animation mit voller Farbtiefe und Transparenz.

Das APNG steht für Animated Portable Network Graphics und ist eine offizielle Erweiterung des PNG-Formats. Prinzipiell funktioniert das ähnlich wie bei den Animationen im GIF-Format, allerdings hat es nicht die gleichen Einschränkungen, wie das GIF-Format. In APNG kann jedes Bild der Animation in 24 Bit-Farbtiefe und 8 Bit-Transparenz vorliegen. Ein großer Nachteil ist jedoch, dass eine APNG relativ viel Speicherplatz verbraucht, da pro Bild in der Animation jedes Pixel bis zu 32 Bit (4 Byte) belegt. Die Endung der Datei kann dank der Rückwärtskompatibilität bei .png bleiben, aber es ist auch möglich .apng als Endung zu verwenden, um klar zu signalisieren, dass es sich dabei um eine animierte PNG-Datei handelt.

Das Logo dieser Seite selbst ist ebenfalls animiert, allerdings kann man die Animation nur dann sehen, wenn der verwendete Browser, der diese Seite darstellt, auch APNG unterstützt. Das bedeutet, wenn der Browser APNG nicht unterstützt wird das reguläre Bild angezeigt, was bei APNG als Vorschaubild benutzt wird. Da das Logo die Vorteile gegenüber dem GIF-Format nicht so gut zeigt, können Sie in Abb. 2a eine Animation sehen, die mit 24 Bit-Farbtiefe und 8 Bit-Transparenz erstellt wurde.


Die neuen Chunks

Bei APNG sind 3 neue Chunks dazugekommen, welche das Speichern der Einzelbilder (Frames), das Steuern der Animation und der einzelnen Frames erlaubt, dazugekommen:

acTL (= Animation control)
Dieser Chunk kommt meistens direkt nach dem IHDR (= Image Header), muss aber garantiert vor dem IDAT (= Image Data) kommen und fungiert als eine Art Marker, der signalisiert, dass es sich um eine animierte PNG-Datei handelt. Außerdem beinhaltet dieser Chunk die Gesamtzahl aller Frames und wie oft die Animation wiederholt werden soll (0 = Endlosschleife).
fcTL (= Frame control)
Dieser Chunk existiert pro Frame, muss immer vor dem Frame data-Chunk kommen und speichert die Metadaten des aktuellen Frames, also:
  • die Sequenznummer (Frame-Index),
  • die Größe des Bildes,
  • die Position relativ zum Vorschaubild (Standardbild),
  • die Verzögerung in Form eines Bruchs, also wie lange das Frame dargestellt werden soll.
  • das dispose-Byte, also was nach der Anzeige mit dem Bild passieren soll (schwarzes Frame, letzten Frame verwenden, nächsten Frame drüber zeichnen) und
  • das blend-Byte, also ob z.B. die Transparenz ausgeführt werden soll.
fdAT (= Frame data)
Nach dem Frame control-Chunk folgen immer die Daten des Frames. Dabei werden diese genau so gespeichert wie in IDAT (= Image Data), allerdings kommt immer zuerst die Sequenznummer und dann die Struktur von IDAT.

Die Reihenfolge der Chunks

Jedes Paar fcTL- und fdAT-Chunks stellen ein Frame dar und sind der Sequenznummer zugeordnet, die bestimmt, in welcher Reihenfolge die Frames der Animation dargestellt werden. Dadurch ist es möglich, die Frames in der Datei in einer beliebig anderen Reihenfolge zu speichern, z.B. durch Umsortierung der Chunks. Wichtig ist also stets, das bei jedem Frame das fcTL-Chunk immer vor seinem fdAT-Chunk kommt.

Schematisch betrachtet ist das animierte Logo in der Datei folgendermaßen aufgebaut:

Abb. 2b: Schematischer Aufbau von png0a0.png.
Datei: png0a0.png
Reihenfolge der Chunks: PNG-Signatur IHDR acTL fcTL IDAT fcTL fdAT fcTL fdAT ... IEND
Zugehörigkeit:   Marker Frame 1 Frame 2 Frame 3  

In der Abb. 2b kann man gut sehen, wie das funktioniert. Fett gedruckte und mit Hintergrundfarbe versehene Chunks machen sichtbar, dass es sich dabei um die Erweiterung APNG handelt und wie diese in Zugehörigkeiten eingeteilt sind. Das erste Frame hat direkt den IDAT-Chunk für das normale PNG-Bild (Vorschau, Standardbild). Darauf folgen dann alle anderen Frames, welche dann den fdAT-Chunk für die Bilddaten verwenden. Ein PNG-Decoder ohne Unterstützung von Animationen, würde nur die Chunks verarbeiten, die in der Abb. 2b nicht fett gedruckt bzw. in Grau dargestellt sind, also PNG-Signatur → IHDR → IDAT → ... → IEND.

Auch das Erzeugen einer animierten PNG durch ein selbst entwickeltes Programm, kann recht schnell und simpel umgesetzt werden. Es könnte einen Satz mehrerer, einfacher PNG-Dateien verwenden, um daraus eine neue, animierte PNG-Datei zu erstellen. Dazu müsste es anhand aller Einzelbilder die Größe ermitteln, aus jedem Einzelbild den IDAT-Chunk extrahieren und in entsprechender Reihenfolge die IDAT-Chunks als Frames in die neue PNG-Datei schreiben. Der Anwender könnte dabei die Metadaten pro Frame selbst bestimmen.

Aufbau von PNG

Dieses Format verwendet grundsätzlich die Dateiendung .png.

Struktur einer PNG-Datei

Tabelle 1: Aufbau einer PNG-Datei
Signatur
Chunk 1
...
Chunk n

Eine PNG-Datei besteht hauptsächlich aus 2 Komponenten (siehe Tabelle 1), die Signatur und die Chunks:

  • Die 1. Komponente nennt man Signatur und dient unter hauptsächlich der Identifikation als PNG-Format.
  • Die 2. Komponente nennt man Chunk und in diesen Blöcken werden die Bildinformationen selbst gespeichert. Ein Chunk kann in einer PNG-Datei mehrmals vorkommen, muss aber nicht.

Die Signatur

Tabelle 2: Signatur einer PNG-Datei.
Byte: 1234 5678
Dezimal: 137807871 13102610
Hexadezimal: 89504E47 0D0A1A0A
ASCII (C): PNG (CR)(LF)(SUB)(LF)

Eine PNG-Datei kann anhand der ersten 8 Bytes identifiziert werden, siehe Tabelle 2. Die Wahl dieser Zeichenfolge hat sogar eine Bedeutung:

  • Das 1. Byte: wurde absichtlich als Nicht-ASCII-Zeichen gewählt, da so verhindert wird, das die PNG als reine Textdatei erkannt wird. Dies betrifft besonders Betriebssysteme, welche Dateitypen nicht anhand der Dateiendung unterscheiden. (Linux, ...)
  • Das 2., 3. und 4. Byte benennen das Format, also P, N und G.
  • Das 5. und 6. Byte ist Carriage Return und Line Feed, welches unter DOS den Zeilenumbruch darstellt. Wird PNG fälschlicherweise als Text-Daten transportiert, kann es vorkommen das einige Texteditoren/Textbetrachter das Carriage Return wegkürzen und somit die Bilddaten ungültig werden.
  • Das 7. Byte ist die sog. Substitution (Control-Z), sie führt bei DOS zum Abbruch der Ausgabe, sofern DOS die Datei roh ausgeben würde.
  • Das 8. Byte schließt die Signatur ab, in diesem Falle ein einzelnes Line Feed, welches ähnlich wie Byte 5 und 6 die Umwandlung provozieren soll.

Die Chunks

Tabelle 3: Aufbau eines Chunks
Länge
Typ
Daten
CRC (Prüfsumme)

Chunks enthalten sämtliche Informationen, die in einer PNG-Datei gespeichert werden können. Dabei werden unterschiedliche Arten von Informationen auch in unterschiedlichen Chunks mit unterschiedlichen Typen gespeichert. Jeder Chunk besteht aus vier Komponenten, siehe Tabelle 3.

  • Die Länge definiert, wie lang die reinen Daten sind (Der Chunk sowie die Zusatzinformationen werden nicht mitgezählt). Die Länge wird in Form eines 4-Byte Integer gespeichert.
  • Der Typ wird ähnlich wie die Länge als 4-Byte Integer gespeichert. Der Typ legt fest, wie die Daten interpretiert werden sollen. Die Bytes des Typs dürfen nur als Groß- und/oder Kleinbuchstaben gespeichert werden und benennen den Chunk somit zusätzlich (Chunk-Name). Die Groß- und Kleinschreibung hat zudem noch eine besondere Bedeutung. Bei Groß- und Kleinbuchstaben unterscheidet sich nur das 5. Bit pro Zeichen. Diese Unterscheidung wird benutzt, um zusätzliche Informationen direkt im Chunk-Namen zu speichern, siehe Tabelle 4. So kann pro Zeichen eine Information zusätzlich gespeichert werden:
    Tabelle 4: Aufbau des Chunk-Typs
    Byte Beschreibung
    I (Byte 1) ancillary bit (Verzichtbarkeitsbit)
    H (Byte 2) private bit (Privatbit)
    D (Byte 3) reserved bit (reserviertes Bit)
    R (Byte 4) safe-to-copy bit (Kopierbit)
    • Das ancillary bit gibt darüber Auskunft, ob dieses Chunk unverzichtbar ist oder nicht. Ist das Bit gesetzt, handelt es sich um ein sog. Zusatzchunk. Zusatzchunks können ignoriert werden, wenn sie dem Leseprogramm unbekannt sind. Wenn das Bit nicht gesetzt ist, sind die enthaltenen Daten unverzichtbar für die Darstellung des Bildes notwendig.
    • Das private bit legt fest, ob das Chunk nach Spezifikation aufgebaut ist oder nicht. Ist das Bit gesetzt, enthält das PNG Chunks, die nicht in der Spezifikation definiert sind. Dieses Bit wird verwendet, um ein Namenskonflikt zwischen spezifizierten Chunks und selbstdefinierten Chunks zu verhindern. PNGs, die vollständig nach Spezifikation verfahren, haben dieses Bit nicht gesetzt.
    • Das reserved bit ist für spätere Zwecke bestellt und hat momentan noch keine Bedeutung. Dieses Bit darf nicht gesetzt sein!
    • Das safe-to-copy bit regelt, ob unbekannte Chunks bei Modifikation des Bildes kopiert werden dürfen oder nicht. Falls ein Programm einen unverzichtbaren Chunk auf irgendeine Weise ändert, dürfen unbekannte Chunks nur kopiert werden, wenn ihr Kopierbit gesetzt ist. Andernfalls hängen die Daten des unbekannten Chunks von den unverzichtbaren Chunks ab. Bei unverzichtbaren Chunks ist dieses Bit immer gelöscht.

    Ein Kleinbuchstabe signalisiert somit ein gesetztes Bit. Der Großbuchstabe logischerweise ein nicht gesetztes Bit.


  • Die eigentlichen Daten, welche je nach Typ kodiert werden.
  • Die CRC (Cyclic Redundancy Check) hat eine Länge von 4 Byte und dient zur Verifikation, ob die Daten korrekt sind, bzw. so erkennen Programme, ob sich ein Chunk verändert hat.

Es gibt mehrere Arten von Chunks. Diese wären:

bkGD (= Background Color)
Speichert schlicht die Hintergrundfarbe eines Bildes.
cHRM (= Primary Chromaticity and Whitepoint)
Speichert die CIE-XYZ-Farb-Koordinaten von Rot, Grün und Blau. Diese Informationen dienen zur Korrektur der Phosphorfarben zwischen verschiedenen Monitoren.
gAMA (= Image Gamma)
Speichert die Gammakurve eines Bildes. Beispielsweise können so teurere Grafiksysteme die Bilder mit angepasster Gammakurve darstellen.
hIST (= Image Histogram)
Speichert die Häufigkeiten der Farben eines Bildes. Da es Ausgabegeräte gibt, die Bilder nicht in allen Farben darstellen können, muss PNG eine Möglichkeit bieten, die Farben anhand der Häufigkeit zu berechnen. So können die Bilder beispielsweise auf Ausgaben dargestellt werden, die minderer Qualität sind. Zudem muss der PNG-Decoder die Bilddaten selber nicht auslesen, um die Häufigkeit der Farben zu ermitteln.
iCCP (= Embedded ICC Profile)
Speichert ICC-Farbprofile zum Bild.
IDAT (= Image Data)
Enthält die eigentlichen Bilddaten. Die Bilddaten können in mehreren IDAT-Chunks abgelegt werden. Zudem wird Kompression und das sog. Interlacing unterstützt.
IEND (= Image Trailer)
Definiert das Ende einer PNG-Datei. Alle Daten nach diesem Block werden strikt ignoriert. Das hat vor allem historische Gründe, da einige Übertragungssysteme beim Transportieren von Dateien Datenmüll angehangen haben.
IHDR (= Image Header)
Speichert Informationen, wie Bildbreite, Bildhöhe, Bittiefe, Farbtyp, Kompressionsart, ...
iTXt (= International Textual Data)
Ebenfalls ein Textblock allerdings werden die Daten in UTF-8 (Unicode) gespeichert.
pHYs (= Physical Pixel Dimensions)
Speichert das natürliche Seitenverhältnis (Aspect Ratio), da beispielsweise Drucker ein anderes Seitenverhältnis verwenden.
PLTE (= Palette)
Speichert eine Farbpalette zum Bild in einem ähnlichen Format wie GIF-Paletten. In Prinzip eine Liste mit RGB-Bytes. (3 Bytes pro Pixel)
sBIT (= Significant Bits)
Speichert Anzahl von Bits der Original-Farbdaten. Dient als Zusatzinformation für Decoder, welche das Bild in einer anderen Farbtiefe ausgeben sollen, als das Bild selber gespeichert ist.
sPLT (= Suggested Palette)
Speichert eine reduzierte Palette als Vorschlag, d.h. Wenn die Ausgabe nicht kompatibel ist, wird diese Palette verwendet, wenn auch PLTE nicht vorhanden ist?
tEXt (= Textual Data)
Speichert Texte, die als Informationen zu den Bild dienen. Dies können Kommentare, sowohl auch Autorenbeschreibungen, usw. sein. Jeder tEXt-Chunk speichert ein Schlüsselbegriff, unter dem die Textdaten erreichbar sind. Der Decoder kann per Frage nach dem Schlüsselbegriff die Textdaten anfordern.
tIME (= Image Last-Modification Time)
Speichert die letzte Änderung der Datei.
tRNs (= Transparency)
Speichert Transparenzinformationen zum Bild. Bei Palettenbildern kann jeder Farbe eine Transparenz zugewiesen werden. Graustufen- und Echtfarbenbilder speichern nur eine Farbe als transparent markiert.
zTXt (= Compressed Textual Data)
Wie tEXt, nur werden die Textdaten selbst komprimiert gespeichert.

Kompression

Wie z.B. JPEG benutzt auch PNG Kompressionen. Anders als wie bei JPEG ist die Kompression nicht verlustbehaftet, d.H. selbst bei der höchsten Kompression, verliert das Bild weder Qualität noch Informationen. Als Kompressionsverfahren wird der Deflations-Algorithmus (ZIP, PKZIP) verwendet. Da dieses Verfahren nicht direkt für 2 dimensionale Daten geeignet ist, werden vor der Kompression spezielle Filter angewendet, die die endgültige Kompression effizienter gestalten. Diese Filter sind eine Ansammlung simpler, sowie komplexer Funktionen und Algorithmen, die das Bild so umrechnen, das es nachhaltig sehr gut mit Deflate komprimiert werden kann.

Interlacing

Auch PNG unterstützt Interlacing. Als Interlacing bezeichnet man ein Speicherverfahren, bei dem ein Bild in mehrere Blöcke unterteilt wird. Beim Lesen der Daten werden somit die größten Blöcke zuerst geladen, es entsteht ein unscharfes Bild. Weiterhin wird eine immer kleinere Variante der Blöcke geladen, das Bild wird immer schärfer. Das geschieht so lange, bis das Bild in voller Qualität übertragen wurde. Das Verfahren findet vor allem da Gebrauch, wo das Medium nur sehr langsam ausgelesen werden kann (z.B. analoge Internetverbindung). So bekommt der Betrachter das Bild kurz nach dem Transfer schon zu sehen, wobei der Effekt eines immer schärfer werdenden Bildes auftritt. Der Vorteil, der sich daraus ergibt, ist klar. Allerdings müssen zusätzliche Daten gespeichert werden, also eignet sich die Methode nur bei wirklich großen Bildern. Beim Interlacing in PNG wird der sog. Adam7-Algorithmus verwendet.