Zwischen PNG, JPEG, WebP und AVIF wählen
Fotos kommen in JPEG, WebP oder AVIF. Screenshots, Logos, Icons, Diagramme und alles mit flächigen Farben oder scharfem Text kommen in PNG oder in den verlustfreien Modus von WebP. Wenn du Transparenz brauchst, scheidet JPEG vollständig aus. Wenn du heute ein Format fürs Web wählst und mehr als eines ausliefern kannst: AVIF zuerst, WebP als Rückfallebene und das ursprüngliche JPEG oder PNG für alles sehr Alte.
Das ist die ganze Entscheidung. Der Rest erklärt, warum, damit du erkennst, wann die Faustregel nicht gilt.
Worin jedes Format tatsächlich gut ist
| Format | Kompression | Transparenz | Animation | Am besten für | Am schlechtesten für |
|---|---|---|---|---|---|
| PNG | Verlustfrei | Ja, volles Alpha | Nein | Screenshots, Logos, Icons, Strichzeichnungen, alles mit Text | Fotos, bei denen die Dateien sehr groß werden |
| JPEG | Nur verlustbehaftet | Nein | Nein | Fotos, bei denen universelle Unterstützung zählt | Scharfe Kanten, flächige Farbe, Text, alles, was du erneut bearbeiten wirst |
| WebP | Verlustbehaftet oder verlustfrei | Ja, in beiden Modi | Ja | Ein allgemeiner Ersatz für PNG und JPEG im Web | Software, die älter ist als etwa 2020 |
| AVIF | Verlustbehaftet oder verlustfrei | Ja | Ja | Kleinste Dateien für Fotos, großer Farbumfang und hoher Dynamikumfang | Schnelles Codieren und ältere Software, die es nicht öffnen kann |
Verlustfrei bedeutet, dass das decodierte Bild Bit für Bit identisch mit dem ist, was hineinging. Verlustbehaftet bedeutet, dass der Encoder Informationen dauerhaft wegwirft und dafür eine kleinere Datei liefert, und du bekommst eine Näherung zurück.
PNG ist verlustfrei und wird es immer sein. Seine Kompression sagt jedes Pixel aus seinen Nachbarn voraus und komprimiert dann die Differenzen mit Deflate, was hervorragend funktioniert, wenn große Flächen identisch sind oder sich wiederholen, und schlecht, wenn sich jedes Pixel leicht unterscheidet, wie bei einem Foto. Ein als PNG gespeichertes Foto ist oft fünf- bis zehnmal größer als ein gutes JPEG desselben Bildes, ohne sichtbaren Vorteil.
JPEG ist verlustbehaftet und hat keinen Alphakanal, es kann Transparenz also überhaupt nicht speichern. Es teilt das Bild in Blöcke, wandelt jeden in Frequenzinformation um und verwirft die feinen Details, für die dein Auge am wenigsten empfindlich ist. Bei Fotos mit kontinuierlichen Tonwerten funktioniert das wunderbar und bei harten Kanten schlecht, wo es die schwachen Höfe und das Moskitorauschen erzeugt, die du rund um als JPEG gespeicherten Text siehst.
WebP und AVIF sind beide moderne Containerformate, abgeleitet von Videocodecs. Beide beherrschen verlustbehaftet und verlustfrei, beide unterstützen volle Alphatransparenz, und beide werden von jedem aktuellen gängigen Browser unterstützt. AVIF komprimiert im Allgemeinen stärker als WebP, besonders bei niedrigen Qualitätseinstellungen, und kommt mit großen Farbräumen und höheren Bittiefen zurecht. Der Preis ist die Codierzeit, die merklich länger sein kann, und eine etwas schmalere Unterstützung außerhalb von Browsern, in älteren Desktop-Programmen und Bildwerkzeugen.
Transparenz
Nur PNG, WebP und AVIF können einen echten Alphakanal speichern, bei dem jedes Pixel seinen eigenen Deckkraftwert trägt. Genau das lässt ein Logo sauber auf jeder Hintergrundfarbe sitzen.
Wenn du ein transparentes Bild nach JPEG umwandelst, muss die Transparenz irgendwohin. Die meisten Werkzeuge legen sie auf Weiß, manche auf Schwarz, und du erfährst erst, welches von beidem, wenn das Bild mit einem weißen Kasten drumherum auf einem farbigen Hintergrund erscheint. Wenn du die endgültige Hintergrundfarbe kennst, lege das Bild bewusst auf diese Farbe, statt den Konverter raten zu lassen.
Wann verlustbehaftet in Ordnung ist, und wann nicht
Verlustbehaftet ist in Ordnung für die endgültige Auslieferung fotografischer Inhalte in der Größe, in der sie tatsächlich angezeigt werden. Bei vernünftigen Qualitätseinstellungen ist der Verlust wirklich schwer zu sehen.
Verlustbehaftet ist eine schlechte Idee, wenn:
- Das Bild Text, dünne Linien oder große Flächen einheitlicher Farbe enthält. Kompressionsartefakte sammeln sich genau an harten Kanten.
- Die Datei ein Arbeitsmaster ist, das du später bearbeitest und erneut exportierst.
- Das Bild hochskaliert oder danach stark farbkorrigiert wird, was verstärkt, was der Encoder getan hat.
- Exakte Pixelwerte zählen, wie in Wissenschaft, Medizin oder Forensik, oder bei einem Screenshot, von dem jemand Zahlen ablesen wird.
Warum ein JPEG durch erneutes Speichern immer schlechter wird
Jedes Mal, wenn ein JPEG decodiert und wieder gespeichert wird, quantisiert der Encoder Daten, die bereits quantisiert wurden, und der Rundungsfehler häuft sich an. Es ist nicht so, dass die Qualität zweimal gegenüber dem Original gesenkt würde; die Artefakte des ersten Durchgangs werden jetzt als echtes Bilddetail behandelt und ihrerseits angenähert.
Mit einer höheren Qualitätseinstellung zu speichern macht das nicht rückgängig. Detail, das beim ersten Speichern entfernt wurde, ist weg. Eine Datei mit Qualität 60 mit Qualität 95 neu zu codieren erzeugt nur eine größere Datei, die die Artefakte von Qualität 60 getreu bewahrt. Wenn du ein Bild wiederholt bearbeitest, halte das Master in einem verlustfreien Format und exportiere am Ende ein JPEG, WebP oder AVIF.
Grobe Erwartungen an die Größe
Das sind Faustregeln, keine Messwerte, und die echten Zahlen schwanken stark mit dem Bildinhalt. Bei einem typischen Foto mit gleicher wahrgenommener Qualität kannst du JPEG als Basislinie annehmen, WebP etwa ein Viertel kleiner und AVIF noch kleiner, wobei der Abstand wächst, je stärker du komprimierst. Bei flächigen Grafiken schlägt verlustfreies WebP meist PNG, manchmal deutlich. Rauschen und feine Textur blähen jedes verlustbehaftete Format auf, ein körniges Foto wird sich also nie so komprimieren lassen wie eine saubere Studioaufnahme.
Skaliere, bevor du komprimierst
Der mit Abstand größte Gewinn ist fast nie das Format. Es sind die Abmessungen. Ein Bild, das mit 4000 Pixeln Breite ausgeliefert und in einer 800 Pixel breiten Spalte angezeigt wird, trägt etwa fünfundzwanzigmal mehr Pixeldaten mit sich, als es braucht, und kein Encoder kann das beheben. Skaliere es ungefähr auf die Größe, in der es gezeigt wird (auf das Doppelte, wenn du hochauflösende Bildschirme ansprichst), wähle dann das Format und stelle danach die Qualität so lange nach, bis du den Unterschied gerade eben siehst, und geh eine Stufe zurück.