Auf Webseiten haben sich die Bildformate PNG, JPG, GIF und SVG als die führenden Bildformate durchgesetzt. Doch welches Format benutzt man in welcher Situation? Wir haben die verschiedenen Formate anhand von Beispielen analysiert und zeigen die Unterschiede.
Als einfachen Test zum Vergleich der Formate haben wir ein und das selbe Foto in verschiedenen Dateiformaten abgespeichert.
In diesem Artikel
Bildformate für Fotos und realitätstreue Grafiken
JPG (auch JPEG)
JPG ist ein Bildformat für Fotorealistische. Durch Kompression und Vereinfachung der Bilder verschlechtert sich die Qualität, allerdings ist dies oberhalb von 60% Kompressionsstufe kaum sichtbar und reicht für die meisten Verwendungen im Internet.
PNG
Die PNG Variante des gleichen Bildes ist erheblich größer. Qualitativ ist kein Unterschied erkennbar.
GIF
GIF ist ein älteres Format für Bilder mit Transparenzen. Die Nachteile von GIF gegenüber PNG bestehen in der Abbildung von Transparenzen. Hier punktet PNG klar durch echte Alphakanäle, während GIF „Blitzer zeigt. Ein echter Vorteil von Gif ist, das Bilder animiert werden können.
Bildformate für Grafiken
Bei Grafiken dreht sich der Wind. Hier ist unter den Pixelbasierten Formaten JPG der klare Verlierer und PNG der Gewinner. Aufgrund der Speicherungslogik hat PNG klare Vorteile beim Speichern von Grafiken, da diese meisten aus farblich einheitlichen Pixelflächen zusammengesetzt werden.
JPG
Wie man im Beispiel sofort erkennen kann, scheidet JPG als Bildformat für Logos sofort aus. Im Unterschied zu den anderen Bildern ist hier keine Transparenz vorhanden, was das Format für die meisten Logo-Anwendungen unbrauchbar macht.
PNG
Das PNG Format besitzt bereits den Alphakanal für die Tranparenz. Weiterhin ist das Bildformat nur halb so groß. Ein echter Vorteil gegenüber JPG.
SVG
SVG ist der Mercedes unter den Icon Formaten. Bei diesem Format handelt es sich allerdings nicht um ein pixelbasiertes Bildformat, sondern um ein Vektoren-Basiertes Format. Dies hat unschätzbaren Vorteil, dass eine Datei für alle Anwendungsgrößen verwendet werden kann, da die Grafik in jedem Browser neu berechnet werden kann.
WebP – Googles schnelles Internetformat
Erst 2010 gab Google das Format webp frei, welches leider noch nur auf modernen Browsern funktioniert. Das Format ist als Internet Dateiformat gedacht und schafft es, Bilder bei vergleichbarer Auflösung wie jpeg bei geringerer Dateigröße zu speichern. Daher ist es als als Bildformat für Webseiten gut geeignet. Es sollte jedoch ein Fallback zu jpg pder png Bildern geben, sodass auch ältere Browser die Bilder anzeigen können. Das Format ist zur Umwandlung von jpeg, png und gif geeignet, weil es auch bei hoher Kompression besser als jpg ist und verlustfreie Transparenz, sowie Animationen beherrscht.
Fazit
- Für alle Fotorealistischen Bilder ohne Transparenzen ist JPG das beste Format.
- Kommen Transparenzen hinzu, lässt sich PNG nicht vermeiden.
- Das GIF Format ist heute nur noch verbreiet zur Bildinternen Animation.
- Wenn Grafiken verlustfrei und besonders simpel eingebunden werden sollen, ist SVG der Königsweg.
- Alle JPG, PNG und GIF Formate sollten im Zuge der Geschwindigkeistoptimierung der Webseite in webp umgewandelt werden.
Bitte den ersten Versuch löschen, sorry. Ich habe eine paar Fehler übersehen.
Edith sagte also:
Grundsätzlich begrüßenswerter Artikel. Allerdings finde ich die Formulierungen deutlich undeutlich, um den Begriff fast falsch zu vermeiden ;-)
Mit dem Begriff “Bildformat” bezeichnet man (meistens) entweder das Seitenverhältnis (z.B. 3:2), Dateiformat (jpeg, PNG, etc) oder machnmal benutzt man es auch für Breite x Größe. Also uneinheitlich.
Deutlicher und präziser ist es von
– Dateiformat für Jpeg, PNG etc zu sprechen und
– Bildgröße für die Angabe von Breite mal Höhe (300px x 200px, 10cm x 15cm) sowie
– Seitenverhältnis (3:2) als auch
– Dateigröße (des digital gespeicherten Bildes, z.B. 3,6Mb);
– ergänzend noch die Farbtiefe (auch Bittiefe), also die Anzahl der darstellbaren Farben. Gifs können nämlich nur 256 Farben maximal.
Und die Auflösung?
Die Auflösung bezeichnet die Anzahl der sichtbaren Details pro Längeneinheit (etwas verschwurbelt ausgedrückt).
Bezogen auf ein digitalisiertes Bild benutzt man seltener
– Pixel pro Zentimeter (ppcm)
oder häufiger
– Pixel pro Inch (ppi)
Fälschlicherweise hat sich umgangsprachlich der Ausdruck dpi (Dots pro Inch) eingebürgert, was aber eigentlich die Anzahl der Druckpunkte pro Ich eines DRUCKERS oder BELICHTUNGSGERÄTES – die Druckerauflösung/Belichterauflösung
Für Bilder die am Bildschirm angezeigt werden, ist allein die Angabe von Breite und Höhe in Pixeln entscheidend, das das Ausgabegerät ebenfalls einzelne Pixel anzeigt.
Hoffe es klärt etwas.
PS: Das bezieht sich natürlich alles auf Pixelbasierte Bilder, SVG sind wie gesagt Vektorbilder. Deren Auflösung entspricht immer dem des Ausgabegerätes.
Vielen Dank für die Korrekturen Rüdiger. Ich habe da etwas unpräzise formuliert. Werde das bei Zeiten ändern. Derweil hoffe ich auf viele, die Deinen Kommentar lesen und sprachlich so anwenden.
Gruß
Bernhard
Meiner Erfahrung nach, werden Websiten mit .svg „schwerer“ und dadurch braucht es auch eine längere Ladezeit, was ja Google und auch die User überhaupt nicht mögen.
Grüsse
Silvester
Hallo Silvester,
das hängt maßgeblich davon ab, was so im Objekt ist. Eine einfache Grafik ist in SVG sicherlich im Regelfall am kleinsten.