# PNG oder JPG: welches Bildformat du wann nutzt

[Canonical HTML page](https://gradiently.design/de/guide/png-vs-jpeg)

Ein Format behält jeden Pixel, das andere wirft Details weg, um klein zu bleiben. Wer weiß, welche Details weggeworfen werden, weiß jedes Mal, welches Format er nehmen muss.

## The short version

- PNG ist verlustfrei und behält jeden Pixel exakt, während JPG verlustbehaftet ist und Details verwirft, die dem Auge weniger auffallen.
- Nutze PNG für Text, Logos, Screenshots, flache Farbflächen und alles, was einen transparenten Hintergrund braucht.
- Nutze JPG für Fotos, bei denen die Kompression kaum zu sehen ist und die Datei um ein Vielfaches kleiner wird.
- JPG unterstützt keine Transparenz und zeigt bei glatten Verläufen und um scharfe Schrift herum gern Blöcke und Streifen.
- Soziale Plattformen komprimieren jeden Upload neu, deshalb gibt ein sauberes PNG oder ein hochwertiges JPG ihrer Kompression weniger zum Beschädigen.

Die kurze Antwort auf **PNG oder JPG**: Nimm PNG für alles mit Text, Logos, flachen Farbflächen, scharfen Kanten oder transparentem Hintergrund und JPG für Fotos. PNG ist verlustfrei, jeder Pixel, den du exportierst, kommt also genau so an. JPG ist verlustbehaftet: Es wirft Details weg, um die Datei klein zu machen, und die Details, die es wegwirft, sind genau die, die Schrift scharf und Verläufe glatt machen. Ein Foto versteckt diesen Verlust gut. Eine Headline auf einem Verlauf nicht.

## Der Unterschied zwischen PNG und JPG

Beide Formate speichern ein Raster aus Pixeln, keins lässt sich also vergrößern, ohne weich zu werden. Was sie unterscheidet, ist, wie sie dieses Raster in eine Datei pressen.

| Eigenschaft | PNG | JPG (JPEG) |
| --- | --- | --- |
| Kompression | Verlustfrei: Nichts wird verworfen | Verlustbehaftet: Details werden verworfen, um Platz zu sparen |
| Transparenz | Ja, ein vollständiger Alphakanal | Nein, transparente Bereiche werden zu einer Vollfarbe |
| Am besten für | Text, Logos, Screenshots, flache Farben, Verläufe | Fotos und fotolastige Designs |
| Dateigröße | Bei Fotos größer, bei flachen Grafiken klein | Bei Fotos klein, über die Qualität einstellbar |
| Erneut speichern | Sicher, kein Verlust bei jedem Speichern | Jedes Speichern verliert ein wenig mehr |
| Farbe | Bis zu 16 Bit pro Kanal, sRGB im Web | 8 Bit pro Kanal, sRGB im Web |

JPG und JPEG sind dasselbe Format. Die Endung mit drei Buchstaben ist ein Überbleibsel alter Dateisysteme.

JPG teilt das Bild in kleine Quadrate aus 8×8 Pixeln und vereinfacht dann Farbe und feine Details in jedem Quadrat. In einem texturreichen Foto verschwindet diese Vereinfachung im Rauschen. In einem glatten Verlauf oder an der Kante eines Buchstabens zeigt sie sich als blasse Blöcke, verschmierte Säume und gestufte Farbstreifen.

## Wann du PNG nutzt

- **Textlastige Grafiken**: Zitatkarten, Ankündigungen, Karussells, Folien.
- **Logos und Icons**, besonders auf [transparentem Hintergrund](https://gradiently.design/de/guide/transparent-background).
- **Screenshots** von Oberflächen, bei denen JPG kleine Schrift verwischt.
- **Verläufe und flache Farben**, die unter JPG-Kompression Streifen und Blöcke bilden.
- **Masterdateien**, die du wieder bearbeiten wirst, damit nicht bei jedem Speichern Qualität verloren geht.

Ein Social Post im Hochformat mit dem Text Freitags länger geöffnet, scharfe Schrift über einem glatten Verlauf

Ein Text-Post auf einem Verlauf, als PNG exportiert: scharfe Schrift, keine Streifen.

Derselbe Post im Hochformat, der zeigt, wo JPEG-Artefakte um Buchstaben und in dunklen Verlaufsbereichen auftreten

Als stark komprimiertes JPG gespeichert, zeigen sich hier zuerst Artefakte: Säume um die Buchstaben und Stufen in den dunklen Ecken.

## Wann du JPG nutzt

Nutze JPG für Fotos: Produktaufnahmen, Porträts, Reisen, Essen. Echte Fotos sind voller Korn und Textur, die Kompression überdecken, und ein JPG mit einer Qualität von etwa 80 bis 85 sieht meist genauso aus wie das Original, bei einem Bruchteil der Größe. Ein großes PNG-Foto kann leicht um ein Vielfaches schwerer sein, ohne sichtbaren Gewinn.

JPG passt auch zu Designs, die vor allem aus Foto mit etwas Schrift bestehen, solange die Schrift groß ist. Ist der Text klein oder dünn oder steht er über einem glatten Himmel, exportiere lieber PNG, oder teste beides und vergleiche bei 100 % Zoom.

## PNG oder JPG für Social Media

Instagram, Facebook, X und LinkedIn komprimieren alles neu, was du hochlädst, meist zu JPG. Das klingt nach einem Grund, sich nicht darum zu kümmern, ist aber das Gegenteil: Kompression summiert sich. Ein bereits gepresstes JPG wird noch einmal gepresst, und die Artefakte verdoppeln sich. Gib der Plattform die sauberste Datei, die du hast, in genau der Größe, die sie erwartet, damit sie nichts skalieren muss. Die Größen stehen in [Bildgrößen für Social Media](https://gradiently.design/de/guide/social-media-image-sizes).

- Instagram Post 1080×1350: 1080 × 1350
- Story 1080×1920: 1080 × 1920
- X-Post 1600×900: 1600 × 900
- LinkedIn-Post 1200×1200: 1200 × 1200

Exportiere in genau diesen Pixelgrößen. Eine Plattform, die dein Bild neu skalieren muss, komprimiert es stärker.

| Was du postest | Exportieren als | Warum |
| --- | --- | --- |
| Zitatkarte, Ankündigung, Karussell-Folie | PNG | Schrift und flache Farben überstehen die Neukompression besser |
| Verlaufs- oder Materialhintergrund mit Wörtern | PNG | Verhindert Streifen in dunklen und subtilen Tönen |
| Foto | JPG, Qualität 85 bis 90 | Optisch identisch, viel kleiner |
| Logo für ein Profilbild | PNG | Saubere Kanten, und es lässt sich mit Transparenz wiederverwenden |
| Open-Graph-Linkbild | PNG oder JPG | PNG für Text, JPG für Fotos; unter ein paar hundert KB halten |

## PNG oder JPG für ein Logo

PNG, immer, wenn du eine Pixeldatei brauchst. Ein Logo besteht aus flachen Formen und harten Kanten, die PNG gut komprimiert und JPG beschädigt, und ein Logo braucht fast immer einen transparenten Hintergrund, damit es auf Fotos, Farben und im Dark Mode stehen kann. Noch besser: Behalte die Masterdatei als SVG, das in jeder Größe scharf bleibt. [SVG oder PNG](https://gradiently.design/de/guide/svg-vs-png) erklärt, wann du was nutzt, und [Logogrößen](https://gradiently.design/de/guide/logo-sizes) listet die Dateien auf, die du brauchst.

## Warum Verläufe in JPG Streifen bilden

Glatte Verläufe sind der härteste Test für jedes Format. Ein dunkler Übergang von Fast-Schwarz zu tiefem Violett hat nur ein paar Dutzend unterschiedliche Farbwerte zur Verfügung, und JPG-Kompression verschmilzt Nachbarn zu sichtbaren Streifen. Das ist [Banding in Verläufen](https://gradiently.design/de/guide/gradient-banding), und es ist auf dunklen, kontrastarmen Hintergründen am schlimmsten.

Fast-Schwarz zu tiefem Violett: `linear-gradient(180deg, #0b0a14 0%, #1a1233 45%, #2e1a5c 100%)`

Ein subtiler dunkler Übergang wie dieser ist genau das, was unter JPG Streifen bildet. Exportiere ihn als PNG oder füg vor dem Export etwas Körnung hinzu.

### Erzeugt Banding

- JPG mit Qualität 60 oder weniger
- Ein JPG speichern, bearbeiten und erneut speichern
- Ein perfekt glatter digitaler Verlauf ohne Textur
- Eine Größe hochladen, die die Plattform neu skalieren muss

### Verhindert es

- PNG für alles mit Verlauf
- JPG mit 90 oder mehr, wenn es JPG sein muss
- Eine leichte Körnungsebene, die die Stufen aufbricht
- In der exakten Pixelgröße der Plattform exportieren

Körnung hilft mehr als jede Einstellung, weil sie dem Kompressor Textur zum Arbeiten gibt statt einer flachen Folge fast identischer Farben. [Körnige Verläufe](https://gradiently.design/de/guide/grainy-gradients) zeigt, wie viel genug ist. Die Marks von Gradiently bringen ihre eigene Körnung und ihr eigenes Licht mit, genau die Textur, die einem Verlaufsdesign hilft, die Neukompression einer Plattform zu überstehen.

## Und was ist mit WebP und AVIF

Auf deiner eigenen Website schlagen neuere Formate beide: WebP und AVIF können verlustbehaftet oder verlustfrei sein, unterstützen Transparenz und sind bei gleicher Qualität kleiner. Jeder aktuelle Browser unterstützt WebP. Behalte PNG und JPG für Uploads auf Plattformen und zum Teilen von Dateien, und lies [WebP oder PNG und JPG](https://gradiently.design/de/guide/webp-images), bevor du die Bilder deiner Website neu aufbaust. Für die Einstellungen selbst siehe [Bilder komprimieren, ohne Verläufe zu ruinieren](https://gradiently.design/de/guide/image-compression).

## FAQ

### Hat PNG eine bessere Qualität als JPG?

PNG ist verlustfrei und verliert nie an Qualität, egal wie oft du speicherst. Bei Fotos sieht ein hochwertiges JPG für das Auge gleich aus und ist viel kleiner, was besser ist, hängt also vom Inhalt ab.

### Poste ich auf Instagram PNG oder JPG?

PNG für Text, Grafiken und Verläufe, JPG mit Qualität 85 oder mehr für Fotos. Instagram komprimiert beides neu, exportiere also in genau der erwarteten Größe, etwa 1080×1350 für einen Post im Hochformat.

### Unterstützt JPG transparente Hintergründe?

Nein. JPG hat keinen Alphakanal, transparente Bereiche werden also mit einer Vollfarbe gefüllt, meist Weiß. Nutze PNG, WebP oder SVG für Transparenz.

### Warum sieht mein Verlauf nach dem Speichern als JPG streifig aus?

JPG-Kompression verschmilzt ähnliche Farben in glatten Übergängen zu sichtbaren Streifen. Exportiere das Design als PNG, erhöhe die JPG-Qualität auf 90 oder mehr oder füg eine leichte Körnungsebene hinzu.

### Ist JPEG dasselbe wie JPG?

Ja. Es ist dasselbe Format; JPG ist einfach die Fassung der Endung mit drei Buchstaben.