Was ist PNG? Das verlustfreie Bildformat verständlich erklärt

PNG begegnet dir überall, oft ohne dass du es merkst: das Logo auf einer Webseite, der freigestellte Produktfreisteller im Shop, der Screenshot in einer Anleitung. Es ist eines der wichtigsten Bildformate des Internets, gerade weil es zwei Dinge richtig gut kann, die andere Formate nicht beherrschen: verlustfrei speichern und transparente Bereiche darstellen. Dieser Ratgeber erklärt das Format verständlich, grenzt es von JPG und SVG ab und zeigt, wann sich das Umwandeln einer Illustrator-Datei in PNG lohnt.

Definition: PNG ist Portable Network Graphics

PNG ist die geläufige Kurzform für Portable Network Graphics, frei übersetzt etwa portable Netzwerkgrafik. Das Format entstand Mitte der 1990er Jahre als freier, patentfreier Ersatz für das damals lizenzbehaftete GIF-Format und wurde rasch zum offenen Web-Standard. Der Name verrät den Zweck: ein Bildformat, das überall im Netz zuverlässig dargestellt werden kann, ohne Lizenzgebühren und ohne Qualitätsverlust.

Technisch ist PNG ein Rasterformat, auch Pixelformat genannt. Das Bild besteht aus einem festen Gitter winziger Bildpunkte, den Pixeln, von denen jeder seine eigene Farbe trägt. Genau das unterscheidet PNG von Vektorformaten wie SVG oder der nativen Illustrator-Datei, bei denen das Bild als mathematische Beschreibung von Linien und Flächen vorliegt. Diese Unterscheidung ist der Schlüssel, um zu verstehen, was beim Export aus Illustrator passiert.

Wie die PNG-Kompression funktioniert

PNG ist ein verlustfreies Format. Das bedeutet: Beim Speichern wird die Datei zwar verkleinert, aber kein einziger Bildpunkt geht verloren oder wird verfälscht. Das gespeicherte Bild ist nach dem Öffnen exakt so detailgenau wie vorher. Genau hier liegt der grundlegende Unterschied zu JPG, das gezielt Bildinformationen wegwirft, um kleinere Dateien zu erreichen.

Erreicht wird die Verkleinerung durch ein cleveres, aber umkehrbares Verfahren. Vereinfacht gesagt sucht PNG nach Mustern und Wiederholungen im Bild. Eine große einfarbige Fläche, etwa ein weißer Hintergrund oder ein gleichmäßiges Blau, lässt sich sehr kompakt beschreiben, weil sich derselbe Wert wieder und wieder findet. Deshalb sind PNG-Dateien bei Grafiken mit klaren Flächen, scharfen Kanten und wenigen Farben besonders klein und gestochen scharf.

Die Kehrseite zeigt sich bei Fotos. Ein Foto besteht aus Millionen feiner Farbabstufungen ohne klare Wiederholungen, sodass PNG dort wenig zusammenfassen kann und die Dateien groß werden. Für Fotos ist daher meist JPG die bessere Wahl, für Logos und Grafiken klar PNG.

Transparenz: der große Vorteil von PNG

Das wohl wichtigste Merkmal von PNG ist die Unterstützung von Transparenz. Neben den Farbkanälen für Rot, Grün und Blau speichert PNG einen zusätzlichen sogenannten Alphakanal. Dieser legt für jeden einzelnen Pixel fest, wie durchsichtig er ist, von vollständig sichtbar bis vollständig durchsichtig und allen Stufen dazwischen.

In der Praxis heißt das: Ein Logo mit transparentem Hintergrund lässt sich auf jeden beliebigen Untergrund legen, ohne dass ein störendes weißes Rechteck darum erscheint. Auch weiche, halbtransparente Kanten, etwa ein sanfter Schatten oder ein freigestellter Gegenstand, werden sauber dargestellt. Das macht PNG zum Standard für Logos, Icons und Freisteller. Wie du beim Umwandeln gezielt einen transparenten Hintergrund erhältst, zeigt der Ratgeber AI in PNG mit transparentem Hintergrund.

PNG, JPG und SVG im Vergleich

PNG ist nur eines von mehreren gängigen Bildformaten, und jedes hat seinen eigenen Einsatzzweck. Die folgende Übersicht ordnet die drei wichtigsten ein:

Kurz gefasst: PNG für scharfe Grafiken mit Transparenz, JPG für Fotos, SVG für alles, was später beliebig groß skaliert werden soll. Den direkten Vergleich zwischen Vektor und Pixel vertieft der Ratgeber AI in SVG oder PNG?, und der Unterschied zwischen der Illustrator-Datei und PNG steht im Ratgeber AI vs. PNG: der Unterschied.

Pixel oder Vektor: warum das wichtig ist

Ein Vektorbild beschreibt Formen mathematisch und lässt sich deshalb verlustfrei auf jede Größe ziehen, vom Visitenkarten-Logo bis zum Plakat. Ein Pixelbild wie PNG hat dagegen eine feste Anzahl Bildpunkte. Vergrößert man es stark über seine Auflösung hinaus, wirkt es unscharf oder treppig. Das ist kein Mangel von PNG, sondern liegt in der Natur eines Rasterbildes. Wichtig ist nur, die richtige Auflösung schon beim Export festzulegen, dazu gleich mehr.

Auflösung: PNG in der passenden Größe exportieren

Weil PNG ein Pixelformat ist, entscheidet die gewählte Auflösung über die Schärfe. Die Auflösung gibt an, aus wie vielen Bildpunkten das Bild besteht, zum Beispiel 1000 mal 1000 Pixel. Je höher der Wert, desto detailreicher und größer die Datei. Die richtige Auflösung hängt vom Verwendungszweck ab: Für ein kleines Web-Logo genügt eine moderate Größe, für ein Bild, das gedruckt oder stark vergrößert wird, sollte man großzügiger wählen.

Eine sinnvolle Faustregel: lieber etwas zu groß exportieren und das Bild bei Bedarf verkleinern, als ein zu kleines PNG nachträglich aufzublasen. Verkleinern bleibt scharf, Vergrößern über die Originalauflösung hinaus nicht. Wie du beim Export aus einer Illustrator-Datei die passende Auflösung und Qualität triffst, erklärt der Ratgeber AI-Auflösung und Qualität beim PNG-Export.

Von der AI-Datei zur PNG

Eine native Adobe-Illustrator-Datei mit der Endung .ai ist eine Vektorgrafik und kann nicht überall direkt geöffnet oder im Web angezeigt werden. Wer das fertige Motiv teilen, ins Web stellen oder in ein Dokument einfügen will, exportiert es daher als PNG: ein universell anzeigbares Pixelbild, das jeder Browser, jedes Office-Programm und jedes Handy versteht, optional mit transparentem Hintergrund.

Genau das erledigt ai-png.de direkt im Browser. Die Illustrator-Datei wird dabei nicht hochgeladen, sondern lokal auf deinem Gerät verarbeitet. Moderne AI-Dateien sind technisch PDF-kompatibel aufgebaut, was die Umwandlung im Browser erst ermöglicht: Das Werkzeug liest die Datei mit der Bibliothek pdfjs-dist ein, rendert die erste Seite mit einer von dir wählbaren Auflösung auf eine Zeichenfläche (Canvas) und exportiert das Ergebnis als PNG. Transparenz lässt sich dabei optional beibehalten. Es gibt keinen Upload, kein Konto und kein Limit. Den Ablauf Schritt für Schritt zeigt der Ratgeber AI in PNG umwandeln, und dass das ganz ohne Adobe-Software geht, erklärt AI in PNG ohne Illustrator.

Die ehrliche Grenze

Damit das Bild stimmt, gehört die Grenze klar dazu. Das Werkzeug verarbeitet nur PDF-kompatible AI-Dateien, was seit Illustrator 9 der Standard ist und damit praktisch alle heute üblichen Dateien betrifft. Sehr alte, rein PostScript-basierte AI-Dateien aus der Zeit davor werden nicht unterstützt. Und es bleibt dabei: Eine PNG ist ein Pixelbild und damit nicht mehr beliebig skalierbar wie das Vektor-Original. Bewahre deshalb die .ai-Datei immer auf, dann kannst du jederzeit erneut in der gewünschten Größe exportieren.

Häufige Fragen

Quellen und Methodik

• ISO/IEC 15948 (PNG Specification) sowie die Spezifikation des World Wide Web Consortium (W3C) als Formatgrundlage von PNG.
• Dokumentation zu Adobe Illustrator und zum PDF-kompatiblen Aufbau von AI-Dateien seit Illustrator 9.
• Dokumentation der Bibliothek pdfjs-dist zum Rendern von Seiten auf ein Canvas-Element.
• Eigene Tests der Umwandlung von AI nach PNG im client-seitigen Konverter von ai-png.de.