PNG-zu-JPG-Konverter

Ein Foto als PNG zu speichern ist Verschwendung. PNG hält jedes Pixel exakt fest, und genau das bringt bei einem Motiv mit Millionen leicht verschiedener Farbwerte kaum Ersparnis. JPG wirft dagegen gezielt weg, was das Auge ohnehin schwer wahrnimmt, und landet bei einem Bruchteil der Größe.

Umgekehrt gilt genauso: Ein Screenshot, ein Logo oder ein Diagramm gehört nach PNG. Bei harten Kanten und einfarbigen Flächen wird das JPG nicht nur schlechter, es wird oft sogar größer. Die Formatwahl ist keine Geschmacksfrage, sondern eine Frage des Bildinhalts.

Das Tool oben erledigt diesen Weg in Ihrem Browser: Es liest die PNG-Datei mit dem FileReader ein, zeichnet sie in ein Canvas-Element auf weißem Grund und lässt den Browser daraus eine JPG-Datei erzeugen. Die Qualitätsstufe, die Sie am Regler einstellen, wird direkt an den JPEG-Kodierer durchgereicht. Nichts davon passiert auf einem Server, die Datei verlässt Ihr Gerät nicht.

Der Rest dieser Seite erklärt, was bei diesem Tausch technisch geschieht, wann Sie ihn machen sollten und wann besser nicht – und was Sie tun, wenn das Ergebnis nicht so aussieht, wie Sie es erwartet haben.

Beide Dateiendungen enthalten am Ende ein Rasterbild, aber der Weg dorthin könnte unterschiedlicher kaum sein. Wer den Unterschied einmal verstanden hat, muss nie wieder raten, welches Format zu welchem Bild passt.

PNG: jedes Pixel bleibt, wie es war

PNG steht für Portable Network Graphics und wurde in den Neunzigern als freier Ersatz für GIF entwickelt; heute ist das Format als ISO/IEC 15948 normiert. Die Kompression ist verlustfrei: Was Sie hineinstecken, kommt beim Öffnen exakt wieder heraus. Erreicht wird das in zwei Stufen. Zuerst sagt ein Filter je Bildzeile den Farbwert jedes Pixels aus seinen Nachbarn voraus – links, oben, diagonal oder als Mittelwert – und speichert nur die Abweichung. Danach packt der DEFLATE-Algorithmus diese Abweichungen zusammen, derselbe, der auch in ZIP-Dateien steckt.

Dieses Verfahren glänzt bei Wiederholung. Eine Fläche aus identischen Pixeln lässt sich auf fast nichts zusammenschieben, eine gerade Kante ebenso. Bei einem Foto dagegen unterscheidet sich praktisch jeder Bildpunkt vom Nachbarn: Die Vorhersage geht ständig daneben, die Abweichungen sind groß und zufällig, und DEFLATE findet nichts zum Sparen. Deshalb sind Foto-PNGs so unhandlich.

PNG-8 und PNG-24: derselbe Container, zwei Welten

PNG ist nicht gleich PNG. Die Variante, die meist PNG-8 genannt wird, arbeitet mit einer indizierten Palette: Die Datei enthält eine Tabelle mit höchstens 256 Farben, und jedes Pixel speichert nur die Nummer seines Eintrags. Das ist brutal effizient für Logos, Symbole und Illustrationen mit wenigen Farbtönen. Bei einem Farbverlauf hingegen entstehen sichtbare Stufen, die man mit Dithering nur notdürftig kaschiert.

PNG-24 speichert dagegen volle acht Bit je Kanal für Rot, Grün und Blau, also rund 16,7 Millionen mögliche Farben – und mit zusätzlichem Alphakanal spricht man von PNG-32. PNG kann außerdem 16 Bit je Kanal, was Bildbearbeitungsprogramme für hochwertige Zwischenstände nutzen. Wenn Ihr PNG verdächtig klein ist und beim Öffnen bereits stufig wirkt, liegt das meist daran, dass es als PNG-8 gespeichert wurde.

JPG: wegwerfen, was das Auge nicht vermisst

JPEG – im Dateinamen meist zu .jpg verkürzt – geht den entgegengesetzten Weg. Der Kodierer rechnet das Bild zunächst von RGB in ein Helligkeits- und zwei Farbkanäle um, weil unser Sehsystem Helligkeitsunterschiede viel feiner auflöst als Farbunterschiede. Genau diese Schwäche nutzt das Chroma-Subsampling aus: Bei der gebräuchlichen Variante 4:2:0 wird die Farbinformation horizontal und vertikal halbiert, die Helligkeit dagegen vollständig behalten. Allein das wirft drei Viertel der Farbdaten weg, ohne dass es bei einem Foto auffällt.

Anschließend zerlegt der Kodierer jeden Kanal in Blöcke von 8 × 8 Pixeln und wendet darauf die diskrete Kosinustransformation an. Aus 64 Farbwerten werden 64 Koeffizienten, die beschreiben, wie stark grobe und feine Muster in diesem Block vertreten sind. Die Quantisierung teilt diese Koeffizienten dann durch eine Tabelle und rundet – und hier entscheidet Ihr Qualitätsregler mit. Je höher die Stufe, desto feiner die Tabelle, desto mehr Details überleben das Runden. Am Ende werden die verbliebenen Zahlen noch verlustfrei mit Huffman-Codes gepackt.

Der springende Punkt: Was die Quantisierung auf Null rundet, ist weg. Beim Öffnen rechnet der Dekodierer zurück und erhält eine Annäherung an das Original, nie das Original selbst.

Warum JPG keine Transparenz kennt

Das ist keine Nachlässigkeit, sondern Bauart. Ein JPEG-Bild speichert je Bildpunkt eine Helligkeit und zwei Farbwerte, und im Format ist schlicht kein vierter Kanal für die Deckkraft vorgesehen. Es gibt auch keinen nachrüstbaren Schalter dafür. Wer Transparenz braucht, braucht ein anderes Format – PNG, WebP, AVIF oder für Vektorgrafiken SVG.

Das mit Abstand häufigste Ärgernis beim Umwandeln ist der Hintergrund. Das Logo sah im PNG freigestellt aus, im JPG klebt ein Kasten darum. Dafür gibt es eine schlichte Erklärung.

Warum der Hintergrund weiß wird – und manchmal schwarz

Weil JPG keine Deckkraft speichern kann, muss jeder transparente Bildpunkt vor dem Speichern eine feste Farbe bekommen. Welche das ist, legt nicht das Format fest, sondern das Programm, das umwandelt. Dieses Tool zeichnet vor dem Bild eine weiße Fläche über die gesamte Leinwand, deshalb ist der Hintergrund hier immer weiß und reproduzierbar.

Andere Programme lassen die Leinwand uninitialisiert, und ein frisches Canvas-Element ist in Browsern transparentes Schwarz. Wird diese Transparenz beim Speichern einfach fallen gelassen, bleibt Schwarz übrig. Genau daher kommt der berüchtigte schwarze Rahmen um ein eigentlich freigestelltes Logo. Wenn Sie so ein Ergebnis bekommen, liegt der Fehler nicht an Ihrer Datei, sondern am Werkzeug.

Halos an weichen Kanten

Halbtransparente Ränder sind der zweite Stolperstein. Eine sauber freigestellte Grafik hat am Rand Pixel mit 20, 50 oder 80 Prozent Deckkraft, damit die Kante glatt wirkt. Beim Umwandeln werden diese Pixel mit der Hintergrundfarbe verrechnet – Fachbegriff: Matting. Auf weißem Grund entsteht so ein heller Saum, der auf einer weißen Webseite unsichtbar bleibt, auf einer dunklen Seite dagegen als leuchtender Rand auffällt.

Wenn Sie wissen, auf welchem Untergrund das Bild später liegt, legen Sie diesen Untergrund vorher in Ihrem Bildbearbeitungsprogramm an: neue Ebene in der Zielfarbe ganz unten, auf eine Ebene reduzieren, als PNG speichern, dann hier umwandeln. Das Ergebnis passt dann exakt.

Wenn Sie die Transparenz behalten müssen

Dann ist JPG schlicht das falsche Ziel. Bleiben Sie bei PNG, wenn die Datei in fremde Programme oder in Druckvorlagen wandert. Für den Einsatz auf einer Website ist WebP fast immer die bessere Wahl: Es beherrscht Transparenz und liefert dabei kleinere Dateien als PNG. Für Logos, Symbole und Diagramme, die aus Formen und Text bestehen, ist SVG noch einmal deutlich überlegen, weil es bei jeder Größe scharf bleibt und meist nur wenige Kilobyte wiegt.

Die ehrlichste Prüfung vor dem Umwandeln dauert zwei Sekunden: Öffnen Sie das PNG vor einem dunklen Hintergrund. Sehen Sie dort Transparenz, die Sie brauchen, ist JPG die falsche Antwort – ganz gleich, wie verlockend die Dateigröße klingt.

Was die Zahl bedeutet – und was nicht

Der Wert zwischen 10 und 100 ist keine Prozentangabe erhaltener Bildqualität. Er steuert, wie grob die Quantisierungstabelle ausfällt, und die Skala ist nicht linear. Zwischen 95 und 100 wächst die Datei erheblich, während der sichtbare Gewinn gegen null geht. Zwischen 85 und 75 verliert die Datei ordentlich an Gewicht, ohne dass ein Betrachter am Bildschirm etwas vermisst. Unterhalb von etwa 60 wird es ungemütlich.

Dazu kommt: Verschiedene Programme meinen mit derselben Zahl nicht dasselbe. Eine 80 in einem Bildbearbeitungsprogramm entspricht nicht zwingend der 80 im Browser. Verlassen Sie sich deshalb nicht auf eine übernommene Zahl, sondern auf Ihre Augen – und zwar bei 100 Prozent Ansicht, nicht in einer verkleinerten Vorschau, die jeden Fehler glattbügelt.

Woran Sie zu starke Kompression erkennen

Drei Fehlerbilder verraten ein überkomprimiertes JPG. Blockartefakte: In gleichmäßigen Flächen wie Himmel oder Hauttönen wird das 8 × 8-Raster sichtbar, das Bild bekommt ein Kachelmuster. Ringing, auch Moskitorauschen genannt: Entlang harter Kanten – besonders um Text – flimmern helle und dunkle Schlieren. Farbausbluten: Gesättigte Farben, allen voran Rot auf kontrastreichem Grund, franst aus, weil das Chroma-Subsampling die Farbkanten halbiert hat.

Alle drei treten zuerst dort auf, wo das Bild feine Struktur oder harte Kanten hat. Ein weiches Porträt verträgt viel mehr Kompression als ein Produktfoto mit Beschriftung.

Richtwerte nach Verwendungszweck

Die folgende Tabelle ist eine Orientierung aus der Praxis, keine Messreihe. Prüfen Sie das Ergebnis immer an Ihrem eigenen Bild.

Ein Hinweis zur Reihenfolge, der oft mehr bringt als die Feinjustage am Regler: Erst die Abmessungen, dann die Qualität. Ein 4.000 Pixel breites Foto, das auf der Seite 800 Pixel breit dargestellt wird, verschwendet mehr Bytes, als jede Kompressionsstufe je einsparen kann. Verkleinern Sie zuerst mit dem Werkzeug zum Ändern der Bildgröße und wandeln Sie danach um.

Wie sich der Schaden aufschaukelt

Öffnen Sie ein JPG, ändern Sie eine Kleinigkeit und speichern Sie erneut, dann läuft die komplette Kette noch einmal durch: dekodieren, in Blöcke zerlegen, transformieren, quantisieren, runden. Der Kodierer sieht beim zweiten Mal aber nicht mehr Ihr Originalfoto, sondern die bereits beschädigte Fassung – samt der Artefakte aus dem ersten Durchgang. Die werden nun behandelt, als wären sie echte Bildinformation, und bekommen ihre eigenen Artefakte obendrauf.

Dieser Effekt heißt Generationenverlust und ist nicht umkehrbar. Kein Programm der Welt rekonstruiert, was die Quantisierung auf Null gerundet hat. Besonders schnell sichtbar wird es, wenn zwischendurch geschnitten, gedreht oder skaliert wird: Dann verschiebt sich das 8 × 8-Raster gegenüber dem vorherigen Durchgang, und die alten Blockgrenzen werden zu neuem, vermeintlichem Bildinhalt.

Die Ausnahmen, die es tatsächlich gibt

Ein paar Eingriffe lassen sich an einem JPG vornehmen, ohne neu zu komprimieren. Das Werkzeug jpegtran aus der libjpeg-Familie dreht ein Bild um 90, 180 oder 270 Grad, spiegelt es, schneidet es an Blockgrenzen zu und optimiert die Huffman-Tabellen – alles direkt auf den kodierten Koeffizienten, ohne einen einzigen Pixel neu zu berechnen. Auch das Entfernen von Metadaten funktioniert verlustfrei. Sobald Sie aber skalieren, aufhellen oder auch nur einen Filter anwenden, muss neu kodiert werden.

Die Arbeitsweise, die Ärger erspart

Behandeln Sie das JPG wie einen Export, nicht wie ein Arbeitsformat. Alle Bearbeitungsschritte laufen auf dem Original – PNG, TIFF oder dem Dateiformat Ihres Programms –, und erst am Ende entsteht daraus die JPG-Datei. Müssen Sie später etwas ändern, gehen Sie zurück zum Original und exportieren neu. So bleibt es immer bei genau einer Kompressionsgeneration.

Wenn Sie nur eine Regel aus diesem Abschnitt mitnehmen, dann diese: Jedes JPG, das Sie herausgeben, sollte die erste Generation sein. Alles andere ist Qualität, die Sie verschenken, ohne etwas dafür zu bekommen.

Die Faustregel lautet nicht „Foto gleich JPG, Grafik gleich PNG“, auch wenn das oft hinkommt. Die belastbarere Frage ist: Wie viel Wiederholung steckt in diesem Bild? Viel Wiederholung spricht für PNG, wenig für JPG.

Screenshots, Text und Oberflächen

Ein Screenshot besteht aus großen einfarbigen Flächen, geraden Linien und scharf gerendertem Text – genau dem Material, bei dem die PNG-Filter ihre Stärke ausspielen. Wandeln Sie ihn nach JPG um, passiert das Schlechteste aus beiden Welten: Der Text bekommt flimmernde Säume, und die Datei wird trotzdem nicht kleiner, weil JPG auch für eine völlig gleichmäßige Fläche noch Koeffizienten speichern muss. Wenn Ihr Screenshot als JPG größer ist als als PNG, haben Sie keinen Fehler gemacht – Sie haben nur eine deutliche Antwort bekommen.

Fotos und weiche Verläufe

Bei einem Foto kehrt sich alles um. Sensorrauschen und feine Texturen sorgen dafür, dass kaum zwei benachbarte Pixel identisch sind; PNG findet nichts zu sparen und speichert nahezu unkomprimiert. JPG kann hier zeigen, was es kann, und genau dafür wurde es entworfen. Dasselbe gilt für gescannte Bilder, Screenshots von Videos und alles, was aus einer Kamera kommt.

Mischbilder: Foto mit Beschriftung

Der schwierigste Fall ist die Kombination – ein Produktfoto mit aufgelegtem Preisschild, ein Kartenausschnitt mit Straßennamen, eine Infografik mit Fotohintergrund. Hier gibt es drei gangbare Wege. Erstens: JPG mit deutlich höherer Qualitätsstufe, damit der Text nicht zerfällt. Zweitens: den Text nicht ins Bild brennen, sondern als echten HTML-Text darüberlegen – das ist besser für die Lesbarkeit, für Bildschirmleseprogramme und für Suchmaschinen. Drittens: WebP, das mit Mischbildern in der Regel besser umgeht als JPG.

Der Test, der eine Minute dauert

Wenn Sie unsicher sind, speichern Sie dasselbe Bild einmal als PNG und einmal als JPG und vergleichen zwei Dinge: die Dateigröße im Dateimanager und das Aussehen bei 100 Prozent Ansicht, mit Blick auf Kanten, Text und gleichmäßige Flächen. Diese Minute ersetzt jede Faustregel, weil sie Ihr konkretes Bild bewertet und nicht einen Durchschnitt.

PNG und JPEG stammen aus den Neunzigern. Seitdem sind zwei Formate dazugekommen, die beide Aufgaben besser lösen – jedenfalls im Browser.

WebP

WebP stammt von Google und hat beide Betriebsarten unter einem Dach: einen verlustbehafteten Modus, der auf der Intra-Kodierung des Videocodecs VP8 aufbaut, und einen verlustfreien Modus, der PNG Konkurrenz macht. Transparenz beherrscht es in beiden Fällen. Für eine Website ist das der praktische Mittelweg: spürbar kleinere Dateien als JPG bei vergleichbarer Bildwirkung, und Logos mit Transparenz wiegen weniger als das PNG. Eine technische Grenze sollten Sie kennen: WebP verarbeitet maximal 16.383 × 16.383 Pixel. Für Panoramen oder riesige Scans ist das gelegentlich zu wenig.

AVIF

AVIF setzt auf den Videocodec AV1 der Alliance for Open Media und komprimiert in der Regel am stärksten von allen genannten Formaten. Es kann mehr als 8 Bit je Kanal, unterstützt HDR und weite Farbräume und beherrscht ebenfalls Transparenz. Der Preis steht auf der Kodierseite: AVIF zu erzeugen kostet deutlich mehr Rechenzeit als ein JPG. Für eine Handvoll Bilder ist das egal, für einen Stapel von tausend Fotos oder eine Bildpipeline, die bei jedem Seitenaufruf arbeitet, ist es ein Planungsposten.

Warum JPG trotzdem nicht verschwindet

Kompatibilität. JPG öffnet jedes Gerät, jedes Betriebssystem, jedes Uraltprogramm, jeder Fotodrucker im Laden, jedes Kundenportal, das noch nie von WebP gehört hat. Wenn eine Datei Ihren Rechner verlässt und Sie nicht wissen, wer sie öffnet, ist JPG die Wahl mit der geringsten Wahrscheinlichkeit für Ärger. Für Bilder auf der eigenen Website gilt das Gegenteil: Dort liefert das <picture>-Element modernes Format und JPG-Rückfall nebeneinander aus, und jeder Browser nimmt sich, was er versteht.

Am Rande erwähnt: JPEG XL wurde als Nachfolger mit verlustfreier Umwandlung bestehender JPGs entworfen, wird von den Browsern aber bislang uneinheitlich unterstützt. Für den produktiven Einsatz auf einer öffentlichen Website ist es deshalb noch keine verlässliche Option. Für andere Formate nutzen Sie den allgemeinen Bildkonverter, der JPG, PNG und WebP in beide Richtungen bedient.

Was in einer Bilddatei außer Pixeln noch steckt

JPG-Dateien aus einer Kamera oder einem Telefon tragen üblicherweise einen EXIF-Block mit sich: Hersteller und Modell, Objektiv, Belichtungszeit, Blende, ISO-Wert, Datum und Uhrzeit der Aufnahme, Ausrichtung – und, wenn die Ortung eingeschaltet war, die GPS-Koordinaten. Dazu kommen oft IPTC- oder XMP-Felder mit Urheber, Copyright-Vermerk und Stichwörtern sowie ein eingebettetes ICC-Farbprofil.

PNG kennt eigene Textabschnitte für solche Angaben und seit der aktuellen Fassung des Standards auch einen EXIF-Abschnitt. In der Praxis tragen PNGs seltener Aufnahmedaten, weil sie meist aus Bildschirmaufnahmen oder aus Bildbearbeitungsprogrammen stammen – dafür verraten sie manchmal das erzeugende Programm.

Die Koordinate ist der brisanteste Teil. Ein Foto aus dem eigenen Wohnzimmer trägt die Adresse der eigenen Wohnung im Gepäck, und das merkt niemand, solange er das Bild nur ansieht.

Was dieses Tool mit den Metadaten macht

Es lässt sie zurück. Der Weg über das Canvas-Element liefert nur die dekodierten Pixel; alles, was in Nebenabschnitten der Originaldatei stand, wird beim Neukodieren nicht übernommen. Die erzeugte JPG-Datei enthält also weder Aufnahmedaten noch Standort noch Urhebervermerk. Für die Weitergabe ist das ein Gewinn, für ein Fotoarchiv ein Verlust – wenn Sie Aufnahmezeit und Kameradaten behalten wollen, bewahren Sie das Original auf oder notieren Sie die Angaben vorher.

Zwei praktische Nebenwirkungen desselben Mechanismus sollten Sie kennen. Erstens: Auch das eingebettete Farbprofil geht verloren, dazu gleich mehr. Zweitens: Der Dateiname wird hier gebildet, indem .png durch .jpg ersetzt wird – bei einer Datei mit großgeschriebener Endung .PNG greift das nicht, und die heruntergeladene Datei behält den alten Namen, obwohl ein JPG darin steckt. Benennen Sie sie in dem Fall einfach um.

Bilder bei fremden Diensten hochladen

Viele Online-Konverter arbeiten anders als dieser: Sie schicken die Datei an einen Server, rechnen dort und geben einen Download-Link zurück. Das ist nicht per se schlecht, verändert aber die Lage. Ihr Bild liegt dann – wenn auch nur zeitweise – auf fremder Infrastruktur, möglicherweise außerhalb der EU, und wie lange es dort bleibt, steht bestenfalls in den Nutzungsbedingungen.

Bei privaten Schnappschüssen mögen Sie das hinnehmen. Bei Ausweiskopien, Krankenunterlagen, Vertragsseiten, Personalfotos oder Kundendaten sollten Sie es nicht. Sobald Sie personenbezogene Bilder beruflich verarbeiten, wird aus der Bequemlichkeitsfrage eine Rechtsfrage: Wer im Auftrag Daten verarbeitet, braucht nach Art. 28 DSGVO eine entsprechende Vereinbarung, und die bekommt man bei einem anonymen Gratis-Konverter selten. Im Zweifel wandeln Sie lokal um oder mit einem Werkzeug, das nachweislich im Browser rechnet – und lassen sich im Unternehmensumfeld von der zuständigen Stelle bestätigen, was zulässig ist.

Die brauchbare Faustregel: Wenn Sie das Bild einem Fremden auf der Straße nicht zeigen würden, laden Sie es auch nicht bei einem Dienst hoch, dessen Serverstandort Sie nicht kennen.

sRGB, Adobe RGB und Display P3

Ein Farbwert in einer Bilddatei ist zunächst nur ein Zahlentripel. Welche Farbe daraus wird, entscheidet der Farbraum, auf den sich diese Zahlen beziehen. sRGB ist der kleinste gemeinsame Nenner im Web und die Voreinstellung, wenn keine andere Angabe da ist. Adobe RGB deckt mehr gesättigte Grün- und Cyantöne ab und ist in der Druckvorstufe verbreitet. Display P3 stammt aus der Filmwelt und ist auf vielen aktuellen Bildschirmen und Telefonkameras zu Hause.

Solange das Profil in der Datei steckt, weiß das anzeigende Programm, wie es die Zahlen zu deuten hat. Fällt das Profil weg, gelten die Zahlen als sRGB – und dann sehen Bilder, die eigentlich in Adobe RGB oder P3 vorlagen, flau und entsättigt aus. Am deutlichsten trifft es kräftiges Rot, sattes Grün und blaue Himmel.

Was das für die Umwandlung im Browser heißt

Weil der Weg über das Canvas-Element kein Profil mitnimmt, ist das Ergebnis hier praktisch immer eine Datei ohne eingebettetes Profil. Bei einem PNG, das ohnehin in sRGB vorlag – also bei nahezu allem, was aus einem Browser, einem Screenshot oder einem Web-Workflow kommt –, merken Sie davon nichts. Bei einer Datei aus einer Spiegelreflexkamera in Adobe RGB oder aus einem Telefon in P3 kann der Farbeindruck dagegen kippen.

Der saubere Weg in diesem Fall: Rechnen Sie das Bild in Ihrem Bildbearbeitungsprogramm zuerst nach sRGB um – in gängigen Programmen heißt der Befehl „In Profil konvertieren“ oder „Für Web speichern“ – und wandeln Sie danach das Format. Dann stimmen die Farben, weil die Zahlen bereits zum angenommenen Farbraum passen.

Graustufen und 16 Bit

Zwei Sonderfälle noch. Ein PNG in reinen Graustufen speichert nur einen Kanal; wird daraus ein JPG mit drei Kanälen, kann die Datei unnötig wachsen, und ein Farbstich aus der Umrechnung ist möglich. Und ein PNG mit 16 Bit je Kanal – üblich für Zwischenstände aus einer Bildbearbeitung – verliert beim Weg nach JPG die Hälfte der Farbtiefe, denn das gebräuchliche Baseline-JPEG arbeitet mit 8 Bit. Wenn Sie an so einem Bild noch stark aufhellen oder Verläufe glätten wollen, tun Sie das vor der Umwandlung, nicht danach.

Für eine Datei ist ein Konverter im Browser schneller, als jedes Programm zu starten. Bei fünfzig Dateien kippt die Rechnung.

Auf der Kommandozeile

ImageMagick ist das Arbeitspferd für Stapel und auf allen gängigen Betriebssystemen verfügbar. Ein Ordner voller PNGs wird mit einem Aufruf zu JPGs, wobei Sie die Qualitätsstufe und – wichtig bei Transparenz – die Hintergrundfarbe selbst bestimmen:

magick mogrify -format jpg -background white -flatten -quality 85 *.png

Der Teil -background white -flatten ist der entscheidende: Er legt das Bild ausdrücklich auf weißen Grund, statt dem Programm die Entscheidung zu überlassen. Genau das verhindert die schwarzen Kästen um freigestellte Logos. Wer lieber in Python arbeitet, erreicht mit der Bibliothek Pillow dasselbe, inklusive expliziter Hintergrundfarbe.

Mit Oberfläche

Wenn die Kommandozeile nicht Ihr Terrain ist, leisten XnConvert und IrfanView dieselbe Arbeit mit Vorschau und Klickdialog; beide haben eine ausgewachsene Stapelverarbeitung und können unterwegs auch gleich verkleinern und umbenennen. GIMP bringt eine Skriptfunktion für Stapel mit. Die Lizenzbedingungen unterscheiden sich je nach Programm und je nachdem, ob Sie privat oder gewerblich arbeiten – prüfen Sie das einmal auf der Seite des jeweiligen Herstellers, bevor Sie es im Betrieb einsetzen.

Im Server oder im Build

Wer Bilder für eine Website erzeugt, schiebt die Umwandlung am besten in den Bauprozess. Bibliotheken wie sharp im Node-Umfeld oder Pillow in Python erzeugen aus einem Original in einem Durchlauf mehrere Breiten und mehrere Formate – etwa AVIF, WebP und JPG als Rückfall. Das Ergebnis liegt dann als statische Datei bereit, statt bei jedem Seitenaufruf neu berechnet zu werden.

Lokal oder online: die ehrliche Abwägung

Ein Werkzeug im Browser gewinnt bei Gelegenheitsarbeit: nichts installieren, nichts aktualisieren, auf jedem Gerät verfügbar. Es verliert bei Masse, bei sehr großen Dateien – Browser haben Obergrenzen für die Leinwandgröße, und ein Bild jenseits davon lässt sich nicht verarbeiten – und immer dann, wenn Sie exakte Kontrolle über Farbprofil, Chroma-Subsampling und Metadaten brauchen. Ein lokales Programm gewinnt bei Wiederholung, bei Nachvollziehbarkeit und bei allem, was reproduzierbar sein muss. Die Grenze verläuft nicht zwischen gut und schlecht, sondern zwischen einmal und immer wieder.

Bilder sind auf den meisten Seiten der mit Abstand schwerste Posten. Und in der Regel ist genau ein Bild dafür verantwortlich, wie schnell sich eine Seite anfühlt.

Das größte Element entscheidet

Googles Messgröße Largest Contentful Paint misst, wann das größte sichtbare Element im ersten Bildschirmausschnitt fertig gezeichnet ist; als gut gilt ein Wert von höchstens 2,5 Sekunden. Auf sehr vielen Seiten ist dieses größte Element ein Bild – das Titelbild, das Produktfoto, der Kopfbereich. Jedes Kilobyte, das Sie dort einsparen, wirkt unmittelbar auf diese Zahl. Bilder weiter unten auf der Seite zählen für diesen Wert gar nicht mit.

Daraus folgt eine klare Reihenfolge: Kümmern Sie sich zuerst um dieses eine Bild. Richtige Abmessungen, modernes Format, sinnvolle Qualitätsstufe – und laden Sie es nicht verzögert. Ausgerechnet beim Titelbild ist loading="lazy" ein Eigentor, weil es den Start des Ladevorgangs nach hinten schiebt.

Mehrere Größen ausliefern

Ein Telefon mit 390 Pixeln Anzeigebreite braucht kein Bild, das für einen großen Bildschirm gedacht ist. Mit srcset und sizes hinterlegen Sie mehrere Fassungen, und der Browser wählt nach Bildschirmbreite und Pixeldichte die passende aus. Für die Formatauswahl leistet <picture> mit mehreren <source>-Einträgen dasselbe: moderne Formate zuerst, JPG als letzter Eintrag für alle, die den Rest nicht verstehen.

Zwei Kleinigkeiten mit großer Wirkung

Schreiben Sie width und height in jedes <img>-Element. Dann kennt der Browser das Seitenverhältnis, bevor das Bild da ist, reserviert den Platz und der Text springt beim Laden nicht mehr. Und setzen Sie loading="lazy" auf alle Bilder unterhalb des ersten Bildschirmausschnitts – aber, wie gesagt, nicht auf das erste. Beides kostet nichts und ist in wenigen Minuten erledigt.

Zum Schluss der unbequeme Teil: Das beste Format rettet kein Bild, das viermal so groß ausgeliefert wird, wie es angezeigt wird. Bevor Sie über AVIF nachdenken, prüfen Sie die Abmessungen Ihrer schwersten Bilder. In den meisten Fällen liegt dort der größte Hebel – und er ist mit dem Werkzeug zum Ändern der Bildgröße und dem Bildkomprimierer schnell gezogen.