JPG, PNG oder WebP – welches Format passt und wie du die Dateigröße verkleinerst

Im Upload-Formular steht „JPG, maximal 500 KB“, oder dein Blog warnt, dass ein Foto zu schwer ist. Dann liegt es nahe, einfach das Format zu wechseln. Wählst du aber das falsche, wird die Datei manchmal sogar größer. Dieser Beitrag erklärt die Unterschiede zwischen JPG, PNG und WebP, wie du das passende Format auswählst und in welcher Reihenfolge du auf eine Zielgröße kommst.

Die drei Formate komprimieren und behandeln Transparenz unterschiedlich

Format	Kompression	Transparenter Hintergrund	Animation	Geeignet für
JPG	verlustbehaftet	nicht unterstützt	nicht unterstützt	Fotos
PNG	verlustfrei	unterstützt	im Standard-PNG nicht unterstützt	Screenshots, Diagramme, Logos – Bilder mit klaren Linien und Schrift
WebP	verlustbehaftet und verlustfrei	unterstützt	unterstützt	Fotos und Grafiken

Verlustbehaftete Kompression spart Platz, indem sie Informationen weglässt, die das Auge kaum bemerkt. Bei Fotos wirkt das sehr gut. Bei Schrift und Linien mit scharfen Kanten werden die Ränder dagegen schnell unscharf oder fleckig.
Verlustfreie Kompression speichert das Bild so, dass sich die ursprünglichen Pixel exakt wiederherstellen lassen. Die Qualität bleibt gleich, aber bei Bildern mit vielen Farben, etwa Fotos, wird die Datei groß.
WebP beherrscht beide Verfahren. Laut Google ist verlustbehaftetes WebP bei gleicher Bildqualität 25–34 % kleiner als JPG und verlustfreies WebP 26 % kleiner als PNG. Wie viel es bei deinem Bild wirklich ist, hängt vom Bild ab.

Das passende Format für dein Bild auswählen

Fotos: Nimm JPG oder WebP. Als PNG gespeichert, kann ein Foto bei gleicher Qualität um ein Vielfaches größer werden.
Screenshots, Diagramme und Bilder mit viel Text: PNG oder verlustfreies WebP ist die bessere Wahl. Als JPG werden die Ränder um die Buchstaben unscharf.
Logos und Unterschriften mit transparentem Hintergrund: Nimm PNG oder WebP. JPG kann keine Transparenz speichern, deshalb werden transparente Stellen mit einer Volltonfarbe wie Weiß gefüllt.
Icons, Logos und Diagramme aus einfachen Formen: Nimm nach Möglichkeit SVG. SVG ist ein Vektorformat und speichert Linien und Formen statt Pixel. Es bleibt bei jeder Größe scharf und die Datei ist sehr klein. Für Bilder mit vielen Farben wie Fotos eignet es sich nicht.
Wenn die Stelle, bei der du das Bild einreichst, ein Format vorschreibt: Halte dich daran. Die meisten aktuellen Browser unterstützen WebP, ältere Programme und manche Upload-Systeme nehmen es aber womöglich nicht an.

Ein Beispiel aus der Praxis: Auch diese Website hat die erklärenden Bilder auf ihren Tool-Seiten zuerst als PNG hochgeladen und später auf WebP und SVG umgestellt. Bei den 61 Bildern mit vielen Farben und Verläufen sank die Gesamtgröße durch WebP von etwa 36 MB auf etwa 2,7 MB (rund 92 % weniger). Manche Bilder, die einzeln über 1 MB groß waren, schrumpften so auf rund 100 KB. Die Bilder der Bildtools aus einfachen Formen wurden als SVG angelegt: Wo dasselbe Bild als PNG 34 KB hatte, blieb das SVG unter 1 KB. Wer das zum Inhalt passende Format wählt, kann die Dateigröße stark senken und das Bild auf dem Bildschirm fast unverändert lassen.

Wenn ein Formatwechsel die Datei nicht kleiner macht

Ein Formatwechsel komprimiert das Bild im neuen Format noch einmal neu und ist kein Werkzeug zum Verkleinern. In diesen Fällen wird die Datei größer oder nur die Qualität schlechter:

Ein JPG-Foto in PNG umwandeln macht die Datei meist größer, weil die verlustfreie Kompression die komplexen Farben eines Fotos nicht gut verkleinern kann.
Ein bereits stark komprimiertes JPG erneut als JPG speichern verursacht noch einmal Verluste. Die Datei wird vielleicht etwas kleiner, aber die Qualität sinkt unter die des Originals, und verworfene Informationen kommen nicht zurück.
Ein Bild mit schlechter Qualität in PNG umwandeln verbessert die Qualität nicht. Das Format holt Informationen, die schon verloren sind, nicht zurück.

Wenn es dir um die Dateigröße geht, schau zuerst auf die beiden folgenden Stellschrauben, nicht auf das Format.

Zwei Wege zu einer kleineren Datei: Qualität und Pixelzahl

Die Qualität bestimmt bei verlustbehafteter Kompression, wie viele Informationen weggelassen werden. Wenn ein Browser ein Bild erzeugt, gibst du sie als Wert zwischen 0 und 1 an. Sie gilt nur für verlustbehaftete Formate wie JPG und WebP; PNG hat keinen Qualitätswert. Senkst du die Qualität ein wenig, schrumpft die Datei oft deutlich, ohne dass du einen Unterschied siehst. Gehst du zu weit, brechen Kanten auf und es entstehen Flecken.

Die Pixelzahl ist Breite × Höhe des Bildes. Halbierst du Breite und Höhe, bleibt nur ein Viertel der Pixel übrig, und die Datei wird deutlich kleiner. Für Bilder, die auf dem Bildschirm angezeigt oder in ein Dokument eingefügt werden, brauchst du die volle Auflösung der Handykamera meist nicht.

Um eine Zielgröße zu erreichen, gehst du am besten so vor:

Wähle das Format passend zum Bild: JPG oder WebP für Fotos, PNG für Grafiken.
Hat das Bild viel mehr Pixel, als du tatsächlich brauchst, verkleinere zuerst Breite und Höhe auf die benötigte Größe.
Senke bei JPG und WebP die Qualität Schritt für Schritt und suche den höchsten Wert, mit dem die Datei noch unter der Zielgröße bleibt.
Reicht das nicht, verringere die Pixelzahl noch etwas weiter. Bei PNG ist das der einzige Weg, weil es keinen Qualitätswert gibt.

Prüfe, ob ein KB 1.000 oder 1.024 Byte bedeutet

Bei „maximal 500 KB“ rechnen manche Stellen 1 KB als 1.000 Byte, andere als 1.024 Byte. Der Unterschied von 2,4 % ist klein, aber wenn du genau auf das Limit speicherst, kann die Datei nach der einen Rechnung trotzdem zu groß sein. Kennst du die Regel der Stelle nicht, wähle die Zielgröße lieber etwas unter dem Limit.

Was du nach dem Verkleinern prüfen solltest

Hebe das Original separat auf. Ein verkleinertes oder neu komprimiertes Bild lässt sich nicht in die ursprüngliche Qualität zurückverwandeln.
Sieh dir das Ergebnis in Originalgröße an. In einer kleinen Vorschau sieht es oft gut aus, in voller Größe können Buchstaben aber verschwommen oder fleckig sein.
Prüfe das Format, wenn das Bild transparente Stellen hatte. Als JPG gespeichert wird ein transparenter Hintergrund zu einer Volltonfarbe.
Foto-Metadaten können wegfallen. Wenn ein Browser das Bild neu zeichnet und speichert, werden Metadaten wie Aufnahmedatum oder Ort meist nicht mit gespeichert. Das ist praktisch, wenn du diese Angaben entfernen willst. Musst du sie behalten, nimm das Original.