JPG, PNG, WebP, AVIF: welches Bildformat wofür

Ein Turnverein in Aarberg braucht Bilder an vielen Orten: auf der Website, im Newsletter, auf dem Flyer für das Turnfest, im Bericht an die Gemeinde. Die Aktuarin bekommt Fotos als HEIC, das Logo als JPG mit weissem Rand und Bildschirmfotos der Anmeldeseite als PNG. Welches Format wohin gehört, entscheidet sie bisher nach Gefühl.

Es gibt keine einzige richtige Antwort, aber ein paar klare Linien. Sie hängen davon ab, was auf dem Bild ist und wo es erscheint.

Die Formate auf einen Blick

MDN, die Entwicklerdokumentation von Mozilla, beschreibt die gängigen Formate so:

Format	Stärke	Grenze
JPEG	Fotos und Bilder mit weichen Verläufen	verlustbehaftet, keine Transparenz
PNG	genaue Wiedergabe, Transparenz	bei Fotos grosse Dateien
GIF	einfache Animationen	höchstens 256 Farben
WebP	Bilder und Animationen, kleiner als JPEG oder PNG	in älteren Umgebungen nicht überall bekannt
AVIF	hohe Kompression für Bilder und Animationen	kein schrittweiser Aufbau beim Laden
SVG	Grafiken, die in jeder Grösse scharf bleiben	nur für gezeichnete Formen, nicht für Fotos

Wie verlustfreie und verlustbehaftete Kompression funktionieren, beschreibt der Beitrag Verlustfrei oder verlustbehaftet.

Nach Verwendung

Für den Turnverein ergibt sich daraus eine Zuordnung nach dem Zweck:

Verwendung	Naheliegendes Format	Warum
Fotos auf der Website	WebP oder AVIF, JPEG als Rückfallebene	kleine Dateien bei guter Qualität
Logo auf der Website	SVG, sonst PNG	scharfe Kanten, Transparenz
Bildschirmfotos, Anleitungen	PNG oder verlustfreies WebP	Schrift bleibt scharf
Fotos im Newsletter oder per E-Mail	JPEG	verbreitet und von den meisten Programmen lesbar
Flyer und Druck	nach Angabe der Druckerei	Anforderungen an Auflösung und Farben

Was die Browser anzeigen

Für Websites ist die wichtigste Frage, ob die Browser ein Format kennen. MDN führt die Unterstützung auf: WebP zeigen alle Versionen von Chrome, Edge, Firefox, Opera und Safari an, wobei Safari auf dem Mac mindestens Version 14 und macOS Big Sur braucht. AVIF zeigen Chrome ab Version 85, Edge ab 121, Opera ab 71, Firefox ab 93 und Safari ab 16.1 an. JPEG XL, ein neueres Format, unterstützt Safari ab Version 17; in Chrome ist es laut MDN nur über eine Einstellung für Versuche verfügbar.

MDN empfiehlt deshalb für Rasterbilder im Web in erster Linie WebP oder AVIF und rät, mit dem Element <picture> eine Rückfallebene in PNG oder JPEG anzubieten, für Browser, die die neueren Formate nicht kennen.

Logos und Grafiken

Das Logo mit dem weissen Rand ist ein typischer Fall. Als JPEG hat es keinen transparenten Hintergrund — JPEG kennt keinen Alphakanal —, und an den Kanten der Schrift zeigen sich die Spuren der verlustbehafteten Kompression. MDN empfiehlt für Logos, Diagramme und Symbole, die in unterschiedlichen Grössen genau gezeichnet werden sollen, das Vektorformat SVG. Wo nur eine Rastergrafik vorliegt, ist PNG mit transparentem Hintergrund die nächstbeste Wahl.

Für den Verein lohnt sich deshalb eine Nachfrage bei der Person, die das Logo einst gestaltet hat: Oft gibt es irgendwo eine Vektorfassung.

Bildschirmfotos

Anleitungen mit Bildschirmfotos — etwa «So melden Sie sich für das Turnfest an» — enthalten viel Schrift. MDN hält fest, dass bei solchen Bildern Unschärfe und farbige Säume um Text und scharfe Kanten bei verlustbehafteter Kompression gut sichtbar sind, und empfiehlt eine verlustfreie Kodierung. PNG oder verlustfreies WebP halten die Schrift scharf.

Transparenz und Bewegung

Zwei Eigenschaften grenzen die Auswahl weiter ein:

• Transparenz. PNG, WebP und AVIF können transparente Flächen speichern, JPEG nicht.
• Animation. GIF kann animieren, ist aber auf 256 Farben beschränkt. MDN nennt WebP und AVIF als gute Wahl auch für animierte Bilder.

Fotos vom iPhone

Viele Fotos der Vereinsmitglieder kommen im HEIC-Format, dem Standardformat neuerer iPhones. Für Website, Newsletter und Druck werden sie in der Regel in eines der anderen Formate umgewandelt. Was dabei zu beachten ist, beschreibt der Beitrag HEIC in JPG umwandeln.

Umwandeln ist nicht umbenennen

Wer eine Datei von «foto.heic» in «foto.jpg» umbenennt, hat das Format nicht geändert — nur den Namen. Die Daten darin sind dieselben, und manche Programme weigern sich dann, die Datei zu öffnen, weil Name und Inhalt nicht zusammenpassen. Für ein anderes Format braucht es eine echte Umwandlung, bei der das Bild neu gespeichert wird.

Druck und Archiv

Für den Druck gelten eigene Regeln. Die Druckerei gibt an, welches Format, welche Auflösung und welchen Farbraum sie erwartet. Die Auflösung wird dort oft in dpi angegeben, Bildpunkten pro Zoll auf dem Papier. Ein Bild, das für die Website verkleinert wurde, reicht für einen Flyer meist nicht — deshalb lohnt es sich, die Originale aufzubewahren.

Für das Archiv des Vereins gilt dasselbe: Die Originale bleiben in voller Grösse und im ursprünglichen Format, und jede Fassung für Website, Newsletter oder Druck wird daraus neu erzeugt.

Die Grösse gehört dazu

Das Format ist nur eine Stellschraube. web.dev, eine Informationsseite von Google für Webentwicklung, weist darauf hin, dass ein Bildschirm mit doppelter Pixeldichte viermal so viele Bildpunkte braucht. Ein Foto in voller Kameraauflösung bleibt auch als WebP gross. Zuerst auf die benötigte Grösse verkleinern, dann das passende Format wählen: Diese Reihenfolge spart am meisten.

Für den Turnverein in Aarberg

Die Aktuarin legt eine kleine Tabelle im Vereinsordner ab: Fotos für die Website als WebP mit JPEG-Rückfallebene, Fotos für Newsletter als JPEG, Bildschirmfotos als PNG, das Logo als SVG, das die Grafikerin noch hatte. Für den Flyer fragt sie die Druckerei. Die HEIC-Originale bleiben in einem eigenen Ordner.

Die Bild-Werkzeuge, die wir entwickeln, werden Bilder zwischen JPG, PNG, WebP und HEIC umwandeln, komprimieren und verkleinern — verarbeitet in der Schweiz, im Arbeitsspeicher, ohne dass ein Bild gespeichert bleibt, und im vertraulichen Modus ganz auf dem eigenen Gerät.