Was ist PNG?
PNG steht für Portable Network Graphics und ist ein Rasterbildformat — also ein Bild aus einzelnen Bildpunkten, den Pixeln. Seine zwei Stärken: Es speichert verlustfrei, und es kann Transparenz.
- Verlustfrei heißt: Beim Speichern geht kein einziges Detail verloren. Das Original lässt sich Bit für Bit wiederherstellen.
- Transparenz läuft über den Alphakanal. Jedes Pixel kann von ganz durchsichtig bis ganz deckend jede Stufe dazwischen haben — 256 Stufen.
- Offen und frei: PNG entstand Mitte der 1990er als patentfreier Ersatz für GIF.
PNG ist ein Standard des W3C, also des Gremiums, das die Regeln fürs Web macht. Die erste Fassung kam 1996. Seit Juni 2025 gilt die dritte Ausgabe: Sie kann auch HDR-Bilder mit größerem Helligkeitsumfang und offiziell Animation (APNG).
PNG, JPG, WebP oder SVG?
Wie sparsam ein Format ist, zeigen die Bits pro Pixel. Der Web Almanac 2024 hat das für Millionen Websites auf dem Handy gemessen (Median):
Format
Bits pro Pixel
GIF
6,7
PNG
3,8
JPG
2,0
AVIF
1,4
WebP
1,3
Ein PNG braucht also knapp doppelt so viele Daten je Pixel wie ein JPG und fast dreimal so viele wie WebP. Trotzdem ist PNG mit 28,4 % aller Bilder das zweithäufigste Format im Web, knapp hinter JPG mit 32,4 %.
Die Faustregel für deine Website:
- Fotos → JPG oder WebP. Als PNG werden Fotos riesig.
- Logos, Icons, einfache Grafiken → SVG. Das ist ein Vektorformat und bleibt bei jeder Größe scharf.
- Screenshots, Grafiken mit Text, Bilder mit weichem Schatten auf Transparenz → PNG oder verlustfreies WebP.
- Alles fürs Web → wenn möglich als WebP ausliefern. Laut Google sind verlustfreie WebP-Bilder 26 % kleiner als PNG.
Beispiele aus der Praxis
Case A · Website
Logo mit Schatten auf transparentem Grund
−26 %
Dateigröße als verlustfreies WebP
8 KiB
ab dieser Ersparnis meldet Lighthouse das Bild
Als PNG okay, als WebP schlanker — ohne sichtbaren Unterschied
Ist das Logo eine reine Fläche ohne Fotoanteil, nimm gleich SVG.
Case B · Social Media
Canva-Grafik für LinkedIn, Instagram und Google Ads
5 MB
PNG-Grenze bei LinkedIn-Bildanzeigen
150 KB
Grenze bei klassischen Google-Bildanzeigen
Dieselbe Datei passt bei LinkedIn — und fällt bei Google durch
Wer per Planungstool auf Instagram postet, braucht sogar JPG: Die Schnittstelle nimmt nur JPEG bis 8 MB.
Häufige Fehler
Fehler 1 · Fotos als PNG hochladen
Der Klassiker. Ein Produktfoto, als PNG exportiert, ist oft mehrere Megabyte groß. Dabei sieht als JPG oder WebP niemand einen Unterschied. Das größte Bild einer Seite ist übrigens auf 68 % der mobilen Seiten das Element, an dem Google die Ladezeit misst (LCP).
Fehler 2 · PNG-8, PNG-24 und PNG-32 für eigene Formate halten
Das sind Namen aus Grafikprogrammen, keine eigenen Formate. PNG-8 ist ein PNG mit höchstens 256 Farben, PNG-24 eins mit vollen Farben, PNG-32 eins mit vollen Farben plus Transparenz. Für Grafiken mit wenigen Farben spart PNG-8 viel.
Fehler 3 · Das Logo als riesiges PNG einbinden
Ein Logo mit 2.000 Pixeln Breite, das im Header mit 180 Pixeln erscheint, lädt jeder Besucher komplett mit. Exportier in der Größe, in der es angezeigt wird (bei scharfen Displays doppelt), oder nimm SVG.
Fehler 4 · Nicht komprimieren
Auch ein PNG lässt sich verkleinern. Tools wie TinyPNG fassen ähnliche Farben zusammen und machen aus einem PNG-24 ein PNG-8. Der Anbieter verspricht bis zu 80 % weniger — bei Grafiken mit vielen Verläufen sieht man es dann aber.
So gehst du mit PNG richtig um
- Format nach Inhalt wählen: Foto → JPG/WebP, Logo → SVG, Screenshot mit Transparenz → PNG.
- Größe vor dem Hochladen anpassen — nicht erst im CMS herunterskalieren.
- Komprimieren mit Squoosh, TinyPNG oder einem WordPress-Plugin wie ShortPixel oder Imagify.
- WebP automatisch ausliefern lassen — viele Plugins erzeugen aus deinem PNG eine WebP-Kopie und zeigen sie Browsern, die das können.
- Plattform-Vorgaben prüfen, bevor du eine Social-Grafik exportierst.
Häufige Fragen
Wann nehme ich PNG statt JPG?
Wenn du Transparenz brauchst oder das Bild scharfe Kanten und Text hat, etwa bei Screenshots, Diagrammen oder Grafiken. Für Fotos ist JPG besser: Es braucht laut Web Almanac 2024 im Median nur etwa halb so viele Daten je Pixel wie PNG.
Ist PNG schlecht für SEO?
Das Format selbst nicht. Große PNG-Dateien machen deine Seite aber langsamer, und die Ladezeit fließt über die Core Web Vitals in Googles Bewertung ein. Lighthouse schlägt deshalb vor, PNG-Bilder in modernen Formaten wie WebP auszuliefern, wenn sich das lohnt.
Soll ich mein Logo als PNG oder SVG einbinden?
Wenn es geht, als SVG. Es ist ein Vektorformat, bleibt bei jeder Größe scharf und ist bei einfachen Logos winzig. PNG brauchst du nur, wenn das Logo fotografische Anteile hat oder ein System kein SVG annimmt.
Kann PNG animiert sein?
Ja. Animierte PNG (APNG) sind seit der dritten Ausgabe des Standards vom Juni 2025 offiziell Teil von PNG. In der Praxis nutzt man für Animationen im Web aber meist Video, WebP oder GIF.
Welche Plattformen nehmen PNG an?
Meta-Anzeigen nehmen JPG und PNG bis 30 MB, LinkedIn-Bildanzeigen JPG, PNG und GIF bis 5 MB. Google Ads erlaubt bei klassischen Bildanzeigen höchstens 150 KB. Wer per Schnittstelle auf Instagram veröffentlicht, braucht JPG.
Quellen
- W3C: Portable Network Graphics (PNG) Specification, Third Edition
- web.dev: PNG (Learn Images)
- HTTP Archive: Web Almanac 2024, Kapitel Media
- Google for Developers: WebP
- Chrome for Developers: Lighthouse, Bilder in modernen Formaten
- Meta Ads Guide: Bildanzeigen
- LinkedIn-Hilfe: Spezifikationen für Bildanzeigen
- Meta for Developers: Instagram Graph API, Media
- Google Ads-Hilfe: Anforderungen an Bildanzeigen
