Edit v4.001 from 2009-03-16 to 2021-04-20 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.
Aufbau von APNG
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 ArtMarker
, 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.
- die
- 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 dieSequenznummer
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:
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
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 diesenBlöcken
werden die Bildinformationen selbst gespeichert. Ein Chunk kann in einer PNG-Datei mehrmals vorkommen, muss aber nicht.
Die Signatur
Byte: | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
---|---|---|---|---|---|---|---|---|
Dezimal: | 137 | 80 | 78 | 71 | 13 | 10 | 26 | 10 |
Hexadezimal: | 89 | 50 | 4E | 47 | 0D | 0A | 1A | 0A |
ASCII (C): | ‰ | P | N | G | (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
undG
. -
Das 5. und 6. Byte ist
Carriage Return
undLine Feed
, welches unter DOS den Zeilenumbruch darstellt. Wird PNG fälschlicherweise als Text-Daten transportiert, kann es vorkommen das einige Texteditoren/Textbetrachter dasCarriage 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
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.
-
Das ancillary bit gibt darüber Auskunft,
ob dieses Chunk unverzichtbar ist oder nicht.
Ist das Bit gesetzt, handelt es sich um ein sog.
- 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.