RSS-/Atom-Feed Twitter
Site is read-only, email is disabled

Tutorial: Das PNG-Format: Ein Überblick

Verfasst von · Erstellt am 25 Sep 2006, zuletzt bearbeitet vor mehr als 13 Jahren CC BY-NC-Lizenz

Motivation

PNG (Portable Network Graphics) ist ein Grafikformat, das Bilder verlustfrei komprimiert abspeichern kann. In GIMP gibt es einige Optionen, die man beim Speichern als PNG verwenden kann. Bevor diese hier erklärt werden, gibt es noch einen kurzen Überblick zu den Vor- und Nachteilen dieses Grafikformats.

Tutorial-Details

  1. 1

    Vorteile von PNG: (übernommen von Wikipedia)

    + lizenzkostenfrei

    + komprimiert verlustfrei, und dabei meist kompakter als vergleichbare Formate

    + unterstützt Echtfarben (wie JPEG)

    + unterstützt „echte“ Transparenz (Alpha-Transparenz)

    + unterstützt Farbkorrekturmechanismen, die sicherstellen, dass ein Bild auf verschiedenen Systemen annähernd gleich aussieht

    + unterliegt einem festen, offenen Standard und ist erweiterbar, sodass theoretisch jedes Programm bestimmte Mindestanforderungen erfüllen muss. Außerdem ermöglicht PNG sowohl Aufwärts- als auch Abwärtskompatibilität, was Inkompatibilitäten zwischen verschiedenen Versionen reduziert.

    + ermöglicht außerdem das Abspeichern zusätzlicher Information in der Grafikdatei, zum Beispiel Autoren- und Urheberhinweise

    + ermöglicht (durch integrierte Prüfsummen), Fehler in der Datei frühzeitig zu erkennen

    + ist streamable, d. h. zur Interpretation des Dateiinhalts ist kein wahlfreier Zugriff wie etwa bei vielen TIFF-Dateien notwendig

    + verfügt über ein optionales 7-Pass-Interlacing nach Adam M. Costello (“Adam7”), also den allmählichen Bildaufbau bei der Übertragung über langsame Datenleitungen wie etwa im Internet. Dabei treten weniger Bildverzerrungen auf als bei GIF. Schon bei sehr geringer Übertragung ist bereits eine relativ brauchbare Darstellung möglich.

  2. 2

    Nachteile von PNG: (übernommen von Wikipedia)

    - bietet keine Möglichkeit zur Animation (wie das GIF-Format). Hierzu wurde das MNG-Format geschaffen, welches jedoch bislang keine nennenswerte Verbreitung erreicht hat. Desweiteren gibt es mit APNG ein Format, das Animation ermöglicht, gleichzeitig aber insofern zum PNG-Format abwärtskompatibel ist, als PNG-Dekoder das erste Bild der Animation anzeigen.

    - wird von einigen Browsern nur teilweise unterstützt; einige zeigen PNG-Dateien, insbesondere mit Alphakanalinformationen, fehlerhaft an. Auch der verbreitete Internet Explorer für Windows wird voraussichtlich erst ab der Anfang 2007 erscheinenden Version 7 den vollen Alphakanal unterstützen. Wie bei GIF sind jedoch auch hier Ja-Nein-Transparenzen möglich, sodass im Vergleich zu GIF in dieser Hinsicht auch bisher kein echter Nachteil entstand.

    - wird von vielen Bildbearbeitungsprogrammen nicht optimal abgespeichert, was oft zu erheblich größeren Dateien als nötig führt.

    - ermöglicht nicht das einfache Laden von Bildteilen. Wer nur einen Ausschnitt des Bildes laden möchte, muss alle Bildzeilen davor mitladen. Im Falle von PNG-Dateien, die nicht sequentiell, sondern interlaced gespeichert wurden, muss sogar noch mehr geladen werden.

    - unterstützt zwar eingebettete Metainformationen, die aber weder dem EXIF- noch dem IPTC-Standard entsprechen.

    - erreicht bei bestimmten Bildarten wie Fotos naturgemäß nicht die Kompressionsraten verlustbehafteter Algorithmen wie etwa JPEG. Auch im Vergleich zu auf bestimmte Klassen von Bilddaten spezialisierten Algorithmen, etwa nur für gescannte Dokumente, kann PNG meist nicht mithalten.

    - verwendet eine Komprimierungsmethode, die vergleichsweise mehr Rechenzeit als einfachere Verfahren wie Lauflängenkodierung benötigt

  3. 3

    GIMP liefert folgende Auswahlmöglichkeiten die bei der Speicherung eines PNGs berücksichtigt werden.

    [ ] Interlacing (Adam 7)
    [ ] Hintergrundfarbe sichern
    [ ] Gammafaktor sichern
    [ ] Ebenenversatz sichern
    [ ] Auflösung sichern
    [ ] Zeit der Erstellung sichern
    [ ] Kommentar sichern
    [ ] Farbwerte aus Transparenz speichern
    [ ] Kompressionsgrad

  4. 4

    Interlacing (Adam 7)

    Diese Option kommt beim Laden eines Bilder (zB im Web) zur Geltung. Die Aktivierung dieser Option bewirkt, dass das Bild progressiv aufgebaut wird. Das heißt, dass es zuerst unschärfer bzw gröber dargestellt wird und mit jedem Durchgang (je mehr vom Bild geladen wurde) an Qualität gewinnt bis es schließlich in voller Qualität angezeigt wird.

  5. 5

    Hintergrundfarbe sichern

    Bewirkt, dass die Hintergrundfarbe mitgesichert wird. Hier wird die aktive Hintergrundfarbe von GIMP genommen. Bei proprietären und schlechten Browsern (wie beispielsweise dem Internet Explorer) ist das von Nöten, da dieser das PNG nur transparent darstellen kann, wenn ein Pixel entweder voll sichtbar oder vollkommen durchsichtig ist. (Dies wird in IE7 behoben.) Wenn diese Option nicht aktiviert wird, nimmt GIMP als Standard-Farbe Grau, was auf Webseiten dann etwas dumm aussieht.

  6. 6

    Gamma-Faktor sichern

    Prinzipiell wird hier einfach der Gammafaktor (Helligkeitseinstellung) des Bildschirms/der Anzeige mitgesichert (global in den GIMP Einstellungen festlegbar). Anhand dieses Wertes können andere Geräte dann angepasst werden, sodass das PNG-Bild auf allen Bildschirmen relativ gleich hell bzw. gleich dunkel dargestellt wird.

    Anmerkung: In unterschiedlichen Browsern werden PNGs manchmal heller (üblich in Safari) bzw dünkler (IE) dargestellt. PNG hat diese Option, um Helligkeitswerte zu speichern. Wenn solche informationen mitspeichert werden können manche Browser nicht korrekt damit umgehen (zB der IE) und stellen die Grafiken dann unterschiedlich hell dar.

  7. 7

    Ebenenversatz sichern

    Wenn ein Bild mit einer einzelnen Ebene gespeichert wird bewirkt diese Option, dass gimp den Versatz (Offset) der Ebene von links oben ausgehend im PNG mitsichert.
    Diese Option wird eigentlich nur von anderer Anzeige-Software benötigt.

  8. 8

    Auflösung sichern

    Dieser Wert bezieht sich auf die physikalische Größe des Bildes. Nützlich vor allem, wenn man vor hat, das Bild auszudrucken oder wenn die echte Größe am Bildschirm dargestellt werden soll.

  9. 9

    Zeit der Erstellung sichern und
    *Kommentar sichern *

    Mit dieser Option wird ein exakter Zeit/Datum-Wert mitgesichert. Dies ist stets der Wert, an dem das Bild zuletzt gespeichert wurde.

    Beim Kommentar könnt ihr eurem Bild einige nützliche Infos hinzufügen. Standardmäßig speichert GIMP den Satz: “Created with GIMP” als Kommentar mit. Diese Option ist sehr nützlich für Blinde, dementsprechend sollte man hier beschreiben was am Bild zu sehen ist.

  10. 10

    Farbwerte aus Transparenz speichern

    Trotz eines volltransparenten Pixels kommt es vor, dass dieser Pixel immer noch einen Farb-Wert hat. Mit Aktivierung dieser Option wird dieser Wert mitgespeichert, andernfalls wird der Wert verworfen.

    Die Option kann gelegentlich zu glatteren Übergängen zwischen transparenten und nicht durchsichtigen Bereichen im Bild führen.

  11. 11

    Kompressionsgrad

    Bei hoher Kompression wird die Datei kleiner, bei niedrigeren Werten speichert das Bild zwar schneller wird dabei aber größer (bezogen auf die Datenmenge). Ein Wert um 6 oder 7 bringt normalerweise das beste Speicherzeit/Dateigrößen-Ergebnis.

Kommentare

Hier kannst du Kommentare, Fragen und Anregungen loswerden. Der Autor und die anderen Benutzer können deinen Beitrag sehen und darauf antworten.

Natürlich kannst du auch im Chat fragen.

Abo-Verwaltung

Diese Funktion steht nur angemeldeten Benutzern zur Verfügung.

New comments are disabled because of spam.

Computerminator
vor etwa 10 Jahren

Vielen Dank.
Meistens konnte ich mit PNGs nicht viel anfangen, wegen der vielen Optionen beim Speichern.
Dieser Beitrag ist klar, kurz und verständlich.
Danke für denjenigen, der sich für Leute wie mich - ich brauche Bildbearbeitung nur nebenbei bei der Webprogrammierung - die Arbeit gemacht hat.
Gruß, Andreas

devvv Mitglied seit mehr als 17 Jahren devvv 1475 Kommentare
vor mehr als 12 Jahren

nein, ein bild sollte eigentlich immer angezeigt werden!

Gimper
vor mehr als 12 Jahren

Wird ein Bild nicht angezeigt, wenn bestimmte Einstellungen aktiviert / deaktiviert sind?

Heribert-Heinrich
vor mehr als 12 Jahren

Ich bin von den Tutorials begeistert

Heribert

Bmon
vor fast 13 Jahren

Tolle erklärung danke!
lmfao @:
Diese Option ist sehr nützlich für Blinde, dementsprechend sollte man hier beschreiben was am Bild zu sehen ist.

devvv Mitglied seit mehr als 17 Jahren devvv 1475 Kommentare
vor etwa 17 Jahren

Jop, ist leider so ;) vor allem der IE6 - den sollte man ausrotten... gottseidank haben wir hier nur etwa 15% ie6-user hehe

Tayce Mitglied seit etwa 17 Jahren Tayce 23 Kommentare
vor etwa 17 Jahren

Cool. Die "Lehrstunde" war sehr nützlich.
Was ich lustig fand war diese Zeile^^:

Bei proprietären und schlechten Browsern (wie beispielsweise dem Internet Explorer) ist das von Nöten...
5. Hintergrundfarbe sichern zweite Zeile^^

Hans
vor mehr als 17 Jahren

Umfassende Informationen zu PNG gibt es bei VIAS: das Buch von Greg Roelofs "PNG - The Definitive Guide" ist als freies eBook online und als HTMLHelp zum Download verfügbar.
Hier der URL dazu: http://www.vias.org/pngguide/

Falk
vor mehr als 17 Jahren

Und wie ändert man den PNG-Kommentar??

Yeeehaaaa
vor mehr als 17 Jahren

Vielen Dank!!! "Hintergrundfarbe sichern" ist echt nützlich, so kann man speziell den IE ansprechen :-))

gandro
vor mehr als 17 Jahren

Ja, wirklich guter Artikel, wollte ich schon immer mal wissen, wozu all diese Optionen bei PNGs gut sind :-)

cbarkey Mitglied seit mehr als 17 Jahren cbarkey 6 Kommentare
vor mehr als 17 Jahren

Sehr informativ! =)