JPG, PNG, WebP oder AVIF – welches Bildformat wofür?

Die Formate auf einen Blick

Die Kurzfassung: Fotos als JPG oder WebP, Grafiken mit Transparenz als PNG oder WebP, Bilder auf Websites bevorzugt als WebP oder AVIF. GIF und HEIC sind Sonderfälle.

Wichtig zu wissen: Das Format allein entscheidet nicht über die Dateigröße. Ein schlecht gespeichertes WebP kann größer sein als ein gut optimiertes JPG. Format und Kompressionseinstellung gehören immer zusammen.

JPG: der Allrounder für Fotos

JPG (auch JPEG) gibt es seit Anfang der 1990er-Jahre, und praktisch jedes Gerät und Programm kann es öffnen. Das Format teilt das Bild in kleine Blöcke und speichert feine Details, die das Auge kaum wahrnimmt, ungenauer. So schrumpfen Fotos enorm.

Schwächen zeigt JPG bei harten Kanten, Text und einfarbigen Flächen: Dort entstehen Blockmuster und Säume. Transparenz kennt JPG nicht, Animationen auch nicht. Jedes erneute Speichern kostet zudem etwas Qualität.

Eine Variante ist das progressive JPG: Es baut sich beim Laden erst grob und dann immer schärfer auf und ist oft etwas kleiner als die klassische Variante. TinyThis speichert JPGs deshalb progressiv und mit optimierten Huffman-Tabellen.

Bei Fotos ist JPG die sichere Wahl, wenn die Datei überall funktionieren muss – E-Mail, Behördenportal, Bewerbung, Druckdienst. Mit JPG komprimieren holst du ohne sichtbaren Qualitätsverlust meist noch viel heraus: In unserem Test schrumpfte ein 12-Megapixel-Foto von 4,9 MB auf 2,17 MB. Für Fotos, die gedruckt werden, setzt du die Qualität eher hoch an.

PNG: verlustfrei und mit Transparenz

PNG speichert jedes Pixel exakt – ideal für Logos, Icons, Diagramme und Screenshots mit scharfen Kanten und Schrift. Der Alphakanal erlaubt weiche, halbtransparente Ränder, etwa für ein Logo auf farbigem Hintergrund.

Für Fotos ist PNG dagegen ungeeignet: Die Dateien werden schnell mehrfach so groß wie ein vergleichbares JPG. Bekommst du ein Foto als PNG, wandelst du es besser um, zum Beispiel mit PNG in JPG. Umgekehrt ist JPG in PNG nur sinnvoll, wenn du ein Bild ohne weitere Verluste bearbeiten willst.

WebP: der Standard fürs Web

WebP wurde von Google entwickelt und kann beides: verlustbehaftet für Fotos und verlustfrei für Grafiken, jeweils mit Transparenz und auf Wunsch animiert. Alle aktuellen Browser zeigen WebP an, auch Safari auf iPhone und Mac.

In unseren Tests war WebP durchweg kleiner als das Ausgangsformat:

Schwachpunkt: Außerhalb des Browsers ist WebP noch nicht überall zu Hause. Manche Bildbearbeitungen, Druckdienste oder Upload-Formulare lehnen es ab. Dann hilft WebP in JPG oder, wenn Transparenz wichtig ist, WebP in PNG.

AVIF: noch kleiner, aber aufwendiger

AVIF basiert auf dem Videocodec AV1 und erreicht bei Fotos häufig noch kleinere Dateien als WebP, besonders bei stärkerer Kompression. Es unterstützt Transparenz, Animation und hohe Farbtiefe für HDR. Alle aktuellen großen Browser können AVIF anzeigen.

Die Nachteile: Das Erzeugen dauert deutlich länger als bei JPG oder WebP, feine Strukturen werden bei starker Kompression gern geglättet, und außerhalb des Browsers ist die Unterstützung noch lückenhafter als bei WebP.

TinyThis liest AVIF-Dateien, gibt aber JPG, PNG oder WebP aus. Bekommst du ein AVIF, das sich nicht öffnen lässt, hilft AVIF in JPG. Kann dein Content-Management-System AVIF selbst erzeugen, spricht nichts dagegen, es zusätzlich anzubieten.

GIF und HEIC: die Sonderfälle

GIF kennt nur 256 Farben und eine einzige transparente Farbe. Für Fotos ist das zu wenig, und für Animationen ist das Format ineffizient: Ein animiertes WebP oder ein kurzes Video ist meist deutlich kleiner. GIF lohnt sich heute fast nur noch, wenn ein Programm nichts anderes annimmt. Hinweis: Lädst du ein animiertes GIF in TinyThis, wird nur das erste Bild der Animation verarbeitet.

HEIC ist das Fotoformat des iPhones: klein und gut, aber außerhalb der Apple-Welt schlecht unterstützt. Wie du damit umgehst, steht in HEIC-Dateien öffnen und umwandeln.

Mehrere Formate anbieten mit picture

Willst du die Vorteile von AVIF und WebP nutzen, ohne ältere Geräte auszusperren, bietet HTML das Element picture. Der Browser nimmt die erste Quelle, die er versteht, und fällt sonst auf das normale img zurück:

<picture><source srcset="bild.avif" type="image/avif"><source srcset="bild.webp" type="image/webp"><img src="bild.jpg" alt="Beschreibung" width="1200" height="800"></picture>

Da alle aktuellen Browser WebP verstehen, reicht für viele Websites schon ein einfaches WebP im img-Element. Das picture-Element lohnt sich vor allem, wenn du zusätzlich AVIF ausliefern oder sehr alte Geräte bedienen willst. Viele Content-Management-Systeme und Plugins erledigen das automatisch.

Empfehlungen: welches Format wofür?

Für Website-Bilder ist der schnellste Weg JPG in WebP bzw. PNG in WebP. Wie groß die Bilder in Pixeln sein sollten, erklärt der Ratgeber Bildgröße für Websites.