Bildformate auf Webseiten PNG, JPG, GIF & SVG im Vergleich

Webdesign Grundlagen Schlagwörter: , , , , ,

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.

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.

 

JPG Bild im Vergleich zu PNG
Bildformat: JPG Auflösung: 1024x768px; Größe: 170kb

 

PNG

Die PNG Variante des gleichen Bildes ist erheblich größer. Qualitativ ist kein Unterschied erkennbar.

Bildformat: PNG Auflösung: 1024x768px; Größe: 543kb
Bildformat: PNG Auflösung: 1024x768px; Größe: 543kb

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.

Animiertes GIF
Bildformat: GIFAuflösung: 1024x768px; Größe ohne Animation: 543kb

 

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.

Logo im JPG Format
Auflösung: 150x150px Format: JPG Größe: 7,29kb

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.

Auflösung: 150x150px Format: PNG Größe: 3,65kb
Auflösung: 150x150px Format: PNG Größe: 3,65kb

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.

Auflösung: nach Vorgabe Format: SVG Größe: 1,77kb
Größe: hier 150px Format: SVG Größe: 1,77kb
Auflösung: nach Vorgabe Format: SVG Größe: 1,77kb
Größe: hier 350px Format: SVG Größe: 1,77kb

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.

Bachelor of Arts mit Schwerpunkt Handel, seit 2007 im Online Marketing spezialisiert. Neben langjähriger Erfahrung mit Magento, zertifizierter Google Partner mit Spezialisierung auf AdWords Accounts für E-Commerce Shops.

4 Comments

  1. Rüdiger Heierhoff 3 Jahren Antworten

    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.

    • Bernhard Prange 3 Jahren Antworten

      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

  2. 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.