PNG in JPG umwandeln

So funktioniert das Umwandeln von Bildformaten

Wenn Sie ein Bild hinzufügen, zerlegt der Browser es mit createImageBitmap() in einzelne Bildpunkte. Das Werkzeug zeichnet diese Bildpunkte in voller Auflösung auf eine Zeichenfläche (HTML-Canvas) und ruft dann canvas.toBlob() mit dem Format auf, das Sie gewählt haben – image/png, image/jpeg oder image/webp. So entsteht die neue Datei. Das Speichern übernehmen die eingebauten Bild-Bausteine Ihres Browsers, deshalb ist das Ergebnis normgerecht und die Datei verlässt Ihren Tab nie.

• Nach PNG – verlustfrei: genau dieselben Bildpunkte bleiben erhalten, samt Transparenz.
• Nach JPG – verlustbehaftet: die Bildpunkte werden mit Ihrer Qualitätseinstellung neu berechnet, und durchsichtige Stellen werden auf die von Ihnen gewählte Hintergrundfarbe gelegt (standardmäßig Weiß).
• Nach WebP – verlustbehaftet bei einer Qualität unter 100, Transparenz bleibt erhalten. Bei gleicher Qualität meist die kleinste der drei Dateien.

PNG, JPG oder WebP – was sollten Sie wählen?

Faustregel: WebP für die eigene Website (am kleinsten), PNG, wenn Sie Transparenz oder scharfen Text brauchen, und JPG für Fotos sowie überall dort, wo ein Formular es verlangt.

Häufige Umwandlungen

• PNG in JPG – machen Sie ein großes Bildschirmfoto kleiner oder speichern Sie es für ein Formular, das nur JPEG annimmt. Denken Sie daran: Die Hintergrundfarbe ersetzt jede Transparenz.
• WebP in PNG – machen Sie aus einer heruntergeladenen WebP-Datei ein überall lesbares PNG, für ältere Programme oder Bildbearbeitungen, die WebP nicht öffnen können.
• WebP in JPG – wandeln Sie ein modernes Webbild in ein JPEG um, für E-Mail, Messenger oder ein älteres Redaktionssystem.
• JPG in WebP – speichern Sie Fotos als WebP, um Ihre Seiten leichter zu machen und die Core Web Vitals Ihrer Website zu verbessern.
• JPG in PNG – holen Sie sich eine verlustfreie Kopie zum Bearbeiten, ohne dass sich JPEG-Fehler aufschaukeln (verlorene Details kommen dadurch aber nicht zurück).

Tipps für das beste Ergebnis

• Sie brauchen eine kleinere Datei, kein neues Format? Nutzen Sie Bild komprimieren oder Auf Zielgröße komprimieren, um eine genaue KB-Grenze zu treffen.
• Sie brauchen andere Maße? Wandeln Sie hier um und ändern Sie danach die Bildgröße – oder ändern Sie die Größe zuerst, wenn Sie ohnehin die Pixelmaße anpassen.
• HEIC-Fotos vom iPhone? Nehmen Sie den eigenen Umwandler HEIC in JPG – HEIC braucht einen besonderen Baustein, den dieses Werkzeug nicht mitbringt.
• Qualität 80–90 bei JPG- und WebP-Fotos sieht aus wie 100, ist aber deutlich kleiner. Gehen Sie nur darunter, wenn Sie eine harte Größengrenze einhalten müssen.
• Transparenz behalten? Wandeln Sie in PNG oder WebP um, niemals in JPG.

Ein kurzer Überblick über die Formate

Jedes Format, zwischen denen Sie hier wechseln, wurde für ein bestimmtes Problem erfunden. Wenn Sie die Vorgeschichte kennen, fällt die Wahl leicht.

• GIF (1987) – entwickelt bei CompuServe unter der Leitung von Steve Wilhite. Es brachte Animationen ins Web und eine einfache Transparenz nach dem Prinzip an/aus (1 Bit), seine Farbpalette ist aber auf 256 Farben begrenzt. Es nutzt die LZW-Komprimierung, und genau das Patent darauf (in den Händen von Unisys) war der Grund, warum PNG erfunden wurde. Diese Patente liefen bis 2004 aus; heute lohnt sich GIF eigentlich nur noch für kurze, alte Animationen.
• JPEG (1992) – die Norm ISO/IEC 10918 der Joint Photographic Experts Group. Ihre verlustbehaftete, auf Fotos zugeschnittene Komprimierung machte die Digitalfotografie erst praktisch, und sie wird seit über drei Jahrzehnten überall unterstützt. Deshalb fragen Upload-Formulare bis heute danach.
• PNG (1996) – eine W3C-Empfehlung, die eine Gruppe von Freiwilligen ausdrücklich als lizenzfreien Ersatz für GIF baute, als Unisys begann, das LZW-Patent durchzusetzen. PNG ist verlustfrei, kann einen vollen Alpha-Kanal und Millionen Farben, hat aber von Haus aus keine Animation.
• WebP (2010) – das Format von Google, abgeleitet vom Videoformat VP8. Es kann verlustbehaftet und verlustfrei, beherrscht Transparenz in beiden Fällen und kann sogar Animationen – ein echtes Allroundformat.
• AVIF (2019) – das jüngste der Gruppe, aufgebaut auf dem lizenzfreien Videoformat AV1 der Alliance for Open Media. Es komprimiert meist besser als alle oben genannten und kann zusätzlich HDR, große Farbräume und bis zu 12 Bit Farbtiefe.

Begegnen werden Ihnen außerdem BMP (die alte, unkomprimierte Bitmap von Microsoft: groß, aber verlustfrei) und TIFF (ein flexibler Behälter, den Aldus 1986 schuf und der im Druck und beim Scannen bis heute der Favorit fürs Archiv ist).

Was verlustbehaftete Komprimierung wirklich macht

JPEG, WebP und AVIF sind verlustbehaftet: Sie werfen Details weg, die Ihrem Auge kaum auffallen, und liefern dafür deutlich kleinere Dateien. JPEG ist das klarste Beispiel. Es teilt das Bild in Blöcke von 8×8 Bildpunkten, drückt jeden Block über eine diskrete Kosinustransformation (DCT) als Frequenzen aus und rundet diese Frequenzen dann grob – die feinen fallen dabei weg. Der Regler „Qualität“ steuert in Wahrheit, wie grob gerundet wird. Dazu kommt die Chroma-Unterabtastung (meist 4:2:0): Weil wir Helligkeit viel schärfer wahrnehmen als Farbe, behält JPEG alle Helligkeitsdetails, halbiert aber die Farbauflösung.

Dieser Aufbau hat sichtbare Folgen. Bei niedriger Qualität sehen Sie Klötzchen (das 8×8-Raster tritt hervor) und ein Flimmern rund um scharfe Kanten und Text, oft „Moskitorauschen“ genannt. Genau deshalb taugt JPEG schlecht für Bildschirmfotos, Logos und Strichzeichnungen, bei denen es allein auf die Kanten ankommt. Zwei weitere Punkte, die man kennen sollte:

• Der Verlust summiert sich. Jedes Mal, wenn Sie ein JPEG öffnen und neu speichern, wird es zerlegt und erneut gerundet – die Fehler häufen sich. Ein Foto über mehrere JPEG-Speichervorgänge zu bearbeiten, verschlechtert es sichtbar. Arbeiten Sie in einem verlustfreien Format und speichern Sie erst ganz am Ende einmal als JPEG.
• Ein JPEG in PNG umzuwandeln macht Verlorenes nicht rückgängig. Eine PNG-Kopie eines JPEGs ist ab diesem Zeitpunkt verlustfrei, sie behält aber alle Fehler, die im JPEG schon eingebacken waren – sie verhindert nur, dass es schlimmer wird.
• Progressives JPEG speichert das Bild in mehreren Durchgängen von grob nach fein. So erscheint schnell eine unscharfe Vorschau, die dann schärfer wird – bei ähnlicher Dateigröße praktisch für langsame Verbindungen.

Farbtiefe und der Alpha-Kanal

„Transparenz“ ist in der Tabelle oben nur eine Spalte, doch dahinter stecken größere Unterschiede. PNG kann ein Bild als Farbpalette speichern (bis zu 256 Farben, wie GIF), als 24-Bit-Vollfarbe (je 8 Bit für Rot, Grün und Blau – rund 16,7 Millionen Farben) oder als 32-Bit-RGBA. Die letzte Variante ergänzt einen 8 Bit großen Alpha-Kanal für weiche, abgestufte Transparenz. Genau diese abgestufte Transparenz sorgt dafür, dass ein PNG-Logo eine weiche Kante haben kann, die auf jedem Hintergrund sauber aufgeht.

JPEG dagegen hat immer 8 Bit pro Farbkanal und überhaupt keinen Alpha-Kanal – es kann Transparenz schlicht nicht speichern. Diese eine Einschränkung ist der Grund, warum dieser Umwandler durchsichtige Bildpunkte auf eine Hintergrundfarbe legen muss, sobald Sie in JPG umwandeln. WebP und AVIF umgehen das Problem ganz: Beide behalten den Alpha-Kanal sogar im verlustbehafteten Modus und geben Ihnen damit Transparenz und kleine Dateien.

AVIF, WebP und das moderne Web

Für die eigene Website sind die neueren Formate ein klarer Gewinn. Google berichtet, dass WebP-Dateien bei gleicher Qualität üblicherweise rund 25–34 % kleiner sind als JPEG, und web.dev hält fest, dass AVIF in manchen Fällen mehr als 50 % kleiner als JPEG ausfällt – mit weniger Klötzchen und weniger verlaufenden Farben an harten Kanten. Kleinere Bilder laden schneller, und da oft ein Bild das größte sichtbare Element einer Seite ist (der Largest Contentful Paint), verbessert ein modernes Format genau diesen Core Web Vital.

Die Browser-Unterstützung ist längst nicht mehr die Hürde, die sie einmal war. WebP läuft in allen aktuellen Browsern (Safari kam 2020 dazu). AVIF wird von Chrome, Firefox, Safari und – seit Kurzem – Edge unterstützt und erreicht damit die große Mehrheit der Nutzer. Warum also nicht alles in AVIF umwandeln? Dafür gibt es ehrliche Gründe: Manche älteren Programme, Bildbearbeitungen, Redaktionssysteme, E-Mail-Programme und Upload-Formulare nehmen WebP oder AVIF weiterhin nicht an, und das Speichern als AVIF dauert länger und braucht mehr Rechenleistung. Sicherer ist es, moderne Formate mit einer Rückfallebene auszuliefern, statt überall eines zu erzwingen:

Sauber ausliefern lässt sich das mit dem HTML-Element <picture>. Listen Sie Ihre modernen Quellen mit einem type-Attribut auf und lassen Sie den Browser die erste nehmen, die er versteht – bis hinunter zu einem <img>, das überall funktioniert:

• <source type="image/avif"> – wird von Browsern genutzt, die AVIF können
• <source type="image/webp"> – die nächste Rückfallebene
• <img src="photo.jpg"> – der garantierte Standard für alle übrigen

So bekommen moderne Besucher die kleinste Datei, während alle anderen das Bild trotzdem sehen – und die Umwandlungen hier sind genau der Weg, diese Alternativdateien zu erzeugen.

Warum eine „umgewandelte“ Datei größer werden kann

Beim Umwandeln ändern sich Behälter und Komprimierungsverfahren, nicht aber, wie kleinteilig das Bild selbst ist. Die Dateigröße kann deshalb in beide Richtungen ausschlagen, und viele sind überrascht, wenn sie wächst. Die üblichen Ursachen:

• Foto nach PNG. PNG ist verlustfrei und muss deshalb jeden noch so leicht abweichenden Bildpunkt eines Fotos getreu festhalten. Ein 200 KB großes JPEG-Foto kann als PNG auf mehrere Megabyte anwachsen. PNG glänzt bei flächigen Grafiken und Text, nicht bei Fotos mit weichen Farbverläufen.
• Qualität zu hoch eingestellt. Ein JPG oder WebP mit Qualität 100 behält Details, die Sie nicht sehen können, und bläht die Datei auf. Bei Fotos sieht Qualität 80–90 genauso aus und ist deutlich kleiner.
• Bereits optimierte Vorlage. War die Ausgangsdatei schon gut komprimiert, bringt ein erneutes Speichern in einem anderen verlustbehafteten Format wenig und kann sogar etwas zusätzlichen Ballast hinzufügen.

Die Lösung: Passen Sie das Format zum Inhalt. Halten Sie Fotos in einem verlustbehafteten Format (JPG, WebP oder AVIF), heben Sie sich PNG für Grafiken und Transparenz auf, und greifen Sie zum eigenen Werkzeug Bild komprimieren, wenn Ihr eigentliches Ziel eine kleinere Datei ist und kein anderes Format.

Animation: GIF, APNG, WebP und AVIF

Nur einige dieser Formate können sich bewegen, und das zählt, wenn Ihre Vorlage animiert ist. GIF war das ursprüngliche animierte Webformat, ist aber auf 256 Farben je Einzelbild begrenzt und erzeugt große Dateien. PNG kennt in seiner Grundform gar keine Animation – dafür braucht es die eigene Erweiterung APNG. WebP und AVIF beherrschen beide Animationen in vollen Farben, bei einem Bruchteil der GIF-Größe; deshalb werden kurze Schleifen immer öfter als animiertes WebP ausgeliefert. Ein praktischer Hinweis zu diesem und jedem anderen Umwandler, der über eine Zeichenfläche arbeitet: Dabei wird nur ein einzelnes Einzelbild übernommen. Wandeln Sie ein animiertes GIF in ein unbewegtes Format um, bleibt also nur ein Einzelbild übrig. Damit die Bewegung erhalten bleibt, behalten Sie von Anfang bis Ende ein Format bei, das Animationen kann.

EXIF, GPS und der Datenschutz

Fotos direkt aus Handy oder Kamera tragen einen versteckten Block mit EXIF-Daten mit sich: Kamera- und Objektivmodell, genaues Datum und Uhrzeit, die verwendeten Einstellungen – und oft die GPS-Koordinaten des Aufnahmeorts. Diese Ortsangaben sind ein echtes Risiko, wenn Sie ein Foto öffentlich veröffentlichen, denn sie können Ihre Wohnung oder die Schule eines Kindes verraten. Da dieses Werkzeug das Bild über die Zeichenfläche des Browsers neu speichert, hat das einen nützlichen Nebeneffekt: Heraus kommt ein sauberes Bild ganz ohne EXIF-Block – Kameraangaben und GPS-Standort sind automatisch weg. Beim Teilen im Internet ist das ein Gewinn für Ihre Privatsphäre. Die Kehrseite: Wenn Sie diese Angaben wirklich brauchen (zum Sortieren oder für das Urheberrecht), behalten Sie Ihre Originaldatei, denn die umgewandelte Kopie hat sie nicht mehr.

Die richtige Qualität wählen, ohne zu raten

Der Qualitätsregler gilt nur für die verlustbehafteten Formate – JPG und WebP. PNG übergeht ihn völlig, weil es immer verlustfrei ist. Für die verlustbehafteten Formate nehmen Ihnen ein paar Faustregeln das Raten ab:

• 80–90 ist der beste Bereich für Fotos. Das Ergebnis ist von Qualität 100 mit bloßem Auge nicht zu unterscheiden, die Datei aber viel kleiner. Die letzten zehn Punkte auf dem Regler kosten sehr viele Bytes für Details, die fast niemand sieht.
• Unter etwa 70 tauchen Fehler auf. Sie sehen dann Klötzchen und ein flimmerndes „Moskitorauschen“ an den Kanten – am stärksten bei Text, Logos und scharfen Linien. Gehen Sie also nur so weit herunter, wenn Sie eine harte Größengrenze einhalten müssen.
• WebP und AVIF bauen bei niedriger Qualität sanfter ab als JPEG. Wenn Sie eine besonders kleine Datei brauchen, halten sie die Details besser.
• Für Grafiken, Bildschirmfotos und alles mit scharfem Text nehmen Sie gar kein JPEG, auch kein hochwertiges – wählen Sie PNG oder verlustfreies WebP. Keine JPEG-Einstellung bekommt harte Kanten so sauber hin wie ein verlustfreies Format.

Kurz gesagt: Die Qualitätseinstellung ist ein Regler für Fotos, bei denen ein wenig unsichtbarer Verlust eine viel kleinere Datei bringt. Bei allem, was von Kanten lebt, zählt die Wahl des Formats mehr als der Regler.

Verwandte Werkzeuge

• Bild komprimieren (Dateigröße senken)
• Auf Zielgröße komprimieren (KB)
• Bildgröße ändern (Maße anpassen)
• HEIC in JPG (iPhone-Fotos)
• Bild in Base64 (Daten-URI)
• Bild zuschneiden (Seitenverhältnis, Kreis)