12. August 2023

JPG, PNG, WEBP, SVG oder GIF – so entscheidest du, welches Dateiformat das optimale für deine Website ist.

Hier hatte ich schon mal darüber geschrieben, warum es wichtig ist auf die Bild- und Dateigrößen im Web zu achten: https://www.fbnfrtg.de/warum-man-beim-pflegen-einer-website-unbedingt-auch-die-bildgroessen-im-blick-behalten-sollte/

Neben der Bildgröße, spielt auch das Dateiformat eine wichtige Rolle.

Kurz zusammenfasst:

JPG, PNG und GIF sind Geschichte.
Fotos, Grafiken und Motive mit Transparenz solltest du als WEBP speichern!
Logos uns Grafiken, die dir als Vektordatei (.ai, .eps, .pdf) vorliegen, solltest du als SVG speichern!

Aktuell sind JPG und PNG noch die meistgenutzten Dateiformate im Web. Bis vor einigen Jahren waren diese beiden Formate im Prinzip auch noch alternativlos. Dann hat Google das Bildformat WEBP entwickelt, dass die Vorteile von JPG und PNG kombiniert: Eine geringe Dateigröße und die Unterstützung für transparente Bereiche.

Während WEBP in den ersten Monaten noch nicht von allen Browsern unterstützt wurde, kann es inzwischen bedenkenlos eingesetzt werden. (s. caniuse.com/webp).

Die Vor- und Nachteile der unterschiedlichen Dateiformate im Detail:

WEBP
WEBP, das übrigens „weppy“ ausgesprochen wird, ist ein von Google entwickeltes Bildformat, dass die Vorteile von JPG und PNG kombiniert. Du kannst WEBPs für Fotos und Grafiken mit Transparenz einsetzen. Obwohl WEBP eigentlich das beste Bildformat ist, ist es zur Zeit noch kaum verbreitet. Die Dateigröße eines WEBP ist, im Vergleich zu einem JPG, nur etwa ein Drittel so groß. Weiter unten in diesem Post, ist ein Beispielfoto im Größenvergleich. WEBP findest du im Photoshop im „Speichern unter“-Dialog und nicht unter „Für Web speichern“. Wenn du ohne Photoshop arbeitest, kannst du einen der zahlreichen Online-Converter nutzen. Z.B.: www.anywebp.com/convert-to-webp Überraschenderweise schafft tinypng.com es, WEBPs noch mehr zu komprimieren, sodass die Dateigröße im Vergleich zum JPG nur noch bei einem Viertel liegt!

JPG
JPGs sind das, bei weitem, weitverbreitetste Dateiformat für Fotos und im Prinzip der Standard im Web. Bei der Komprimierung von JPGs entstehen Artefakte – es wird also u.U. etwas „pixelig“. Das fällt in einem Foto aber meistens gar nicht auf. Eine Grafik mit Farbflächen und geraden Linien würde hierdurch allerdings an Qualität verlieren. In Photoshop solltest du die Funktion „Für Web speichern“ nutzen und bei der Qualität 90% einstellen.

PNG
Wenn du eine Grafik oder ein Motiv mit Transparenz oder Halb-Transparenz im Web darstellen willst, war ein PNG, vor der Durchsetzung von WEBP eine gute Wahl. Ein Nachteil eines PNGs ist, dass die Dateigröße in der Regel sehr groß ist. Hier kannst, und solltest, du dein Bild mit TinyPNG nachträglich noch mal komprimieren.

SVG
Ein SVG unterscheidet sich grundlegend von allen anderen Dateiformaten hier. SVG ist ein Vektorformat, kann also nicht für Fotos eingesetzt werden, ist aber für den Einsatz von Logos, Icons oder anderen Vektor-basierten Motiven die beste Wahl. Durch den Einsatz von Vektoren sind SVGs beliebig skalierbar und die Dateigröße ist enorm klein. Weiter unten in diesem Post, findest du ein Logo als SVG im Vergleich zu PNG und WEBP.

GIF
Ein GIF sollte aus meiner Sicht heute nicht mehr eingesetzt werden. Ein GIF unterstützt maximal 256 Farben, keine Halbtransparenz und die Datei ist verhältnismäßig groß. Das GIF ist ein Überbleibsel aus den Anfängen des Internets, und wird heute, wenn überhaupt, noch als Animated GIF eingesetzt.

PDF
Ein PDF ist kein Bild- sondern ein Dokumentenformat. Wenn dir ein Bild als PDF zur Verfügung gestellt wird, musst du es vorher, z.B. in Photoshop, in ein JPG umwandeln.

TIFF
Ein TIFF ist das Bildformat mit der größtmöglichen Qualität, ist aber, vor allem wegen der Dateigröße, nicht für das Web gedacht und sollte ausschließlich im Print eingesetzt werden.

HEIC
HEIC ist ein recht neues Bildformat, das Apple entwickelt hat, um Fotos auf einem iPhone möglichst platzsparend zu speichern. HEIC ist allerdings noch kein durchgesetztes Bildformat und sollte nicht im Web verwendet werden. Bevor du das Bild im Web verwenden kannst, solltest du es als WEBP oder JPG speichern.

Bildformate im Vergleich

Für den folgenden Vergleich habe ich ein Foto in der Größe 800 x 600 als JPG, PNG und WEBP gespeichert. Qualitativ sind aus meiner Sicht hier keine Unterschiede zu erkennen. Bei der Dateigröße hingegen schon. Die ersten 3 Fotos sind aus Photoshop exportiert. Die letzten 3 sind zusätzlich mit tinypng.com komprimiert.

JPG | 387 kb

PNG | 988 kb

WEBP | 185 kb

JPG (tinypng.com) | 320 kb

PNG (tinypng.com) | 286 kb

WEBP (tinypng.com) | 108 kb (!)

Während das obige Beispiel zeigt, das WEBP definitiv die beste Wahl ist, wird im folgenden Beispiel sehr deutlich, dass ein SVG, das ideale Format für Logos ist.