JPG, PNG, GIF oder doch SVG? Das können die 4 Dateiformate

Welches Format für welchen Zweck? JPEG eignet sich für detailreiche Fotografien (Quelle: Sutterstock –  Milosz G)

Möchte man bei seinen Lesern einen starken Eindruck hinterlassen, kommt man nicht daran vorbei, einen Text mit Bildern anzureichern. Das lockert auf, macht Lust aufs Lesen und schafft Atmosphäre. Nicht nur das: Oft lassen sich mit einem Bild oder einer Infografik Sachverhalte einfacher darstellen, als diese mit Worten zu beschreiben wären. Somit sind Bilder nicht nur eine Zierde auf Blog oder Website, sondern tragen in manchen Fällen auch zum Verständnis bei.

Es gibt viele verschiedene Bildformate. Doch wie unterscheiden sie sich? Und welches Format ist für welchen Zweck am besten geeignet? In diesem Artikel gehe ich auf die Formate JPG, PNG, GIF und das Vektor-Format SVG ein.

JPG oder auch JPEG (Joint Photographic Experts Group)

Dieses pixelbasierte Format wurde im Jahre 1992 von der Joint Photographic Experts Group vorgestellt. Eine Darstellung bis zu 16,7 Millionen Farben ist möglich.

Kompression

Bei JPG-Dateien werden in mehreren Arbeitsschritten komprimiert. Hierbei liegt der Schwerpunkt darauf, den Farbumfang zu erhalten. Einige dieser Arbeitschritte sind jedoch verlustbehaftet. Daher verlieren die Bilder bei der Komprimierung an Qualität.

Transparenz

Das JPEG-Format kann keine Transparenzen darstellen.

Animation

Animationen sind nicht möglich.

Eignung

Auf Grund der Darstellung bis zu 16,7 Millionen Farben und der Art der Kompression eignet sich das JPEG-Format am besten für Fotos mit vielen Farben ohne transparente Bereiche.

PNG (Portable Network Graphics)

Mit png lassen sich auch halbtransparente Bereiche darstellen (fotolia.com – Seyyahil, bearb. v. Diana Vogt)

Das PNG-Grafikformat für Rastergrafiken wurde ab 1994 als freie Alternative für das GIF-Format entwickelt. Das GIF-Format war bis ins Jahre 2006 durch ein Softwarepatent geschützt, und es wurden Lizenzgebühren gefordert. Das trug zur schnellen Verbreitung des PNG-Formates bei. Ein PNG kann von 256 (PNG8) bis zu 16,7 Millionen (PNG24) Farben darstellen.

Kompression

Ein Vorteil des PNG-Formates ist die verlustfreie Kompression. Allerdings hat das zur Folge, dass die gespeicherten Dateien größer sind.

Transparenz

Das PNG kann Alpha-Transparenzen darstellen. Das heißt, Bereiche des Bildes können nicht nur ganz oder garnicht transparent sein, sondern es können auch halbtransparente Bereiche dargestellt werden. Bei 8 Bit sind bis zu 256 Abstufungen oder bei 16 Bit sogar 65.536 Abstufungen der Transparenzstärke möglich. Bisher kommt meistens der 8 Bit Alphakanal zum Einsatz. Dadurch ist es möglich, Kanten zu glätten oder Schlagschatten darzustellen.

Animation

Animationen sind im PNG-Format nicht möglich.

Eignung

Bilder mit transparenten Bereichen, Text und Logos

GIF (Graphics Interchange Format)

Steve Wilhite entwickelte dieses Format im Jahre 1987. Ein GIF kann maximal 256 Farben darstellen.

Kompression

Beim GIF erfolgt die Kompression verlustfrei. Wegen dieser effizienten Komprimierung mittels LZW-Algorithmus wurde das GIF bekannt, da es deutlich weniger Speicherplatz brauchte, als die damals üblichen Formate.

Transparenz

Dieses Format kann Transparenz darstellen, doch nur alles oder nichts: Halbtransparenzen sind nicht möglich.

Animation

Quelle: http://www.freegifs.de/

Das GIF-Format ermöglicht Animationen. Mehrere Bilder werden gespeichert und von den Browsern zeitverzögert abgespielt, wie bei einem Daumenkino. Der niedliche Hund nebenan ist ein typisches Beispiel, welches auf modernen Websites allerdings nicht mehr so oft anzutreffen ist. Doch es geht auch modern und stylish: In diesem Artikel gibt es 16 animierte GIF-Logos zu sehen. Im Tumblr-Blog von IBM wird ebenfalls gerne mit GIF’s gearbeitet.

Eignung

Prinzipiell für Grafiken, Buttons, Logos und auch Strichzeichnungen. Doch wegen dem Siegeszug des PNG-Formates kommt es inzwischen meistens für Animationen zum Einsatz.

SVG (Scalable Vector Graphics)

Das SVG-Format macht es möglich, zweidimensionale Vektorgrafiken darzustellen. Es wurde vom World Wide Web Consortium (W3C) entwickelt und im Jahre 2001 eingeführt.

Kompression

Da es sich um ein Vektor-Format ohne Pixel handelt, können SVG-Grafiken verlustfrei skaliert werden. Die Dateigröße bleibt dennoch gering.

Transparenz

Wie auch beim PNG sind Alpha-Transparenzen bei SVG’s möglich.

Animation

SVG-Dateien können mit JavaScript animiert und verändert werden. Ein paar tolle Beispiele hierfür findet man in folgendem Artikel: The Seven Stages auf SVG von Chris Gannon und auf dieser Website: SVG Drawing Animation

Besonderheiten

Da das SVG-Format auf XML basiert, kann die Datei als Code eingefügt (und auch verändert) werden. Hier lässt sich eine bessere Ladezeit erzielen, da der Browser die Grafik darstellt und nicht erst noch eine Datei vom Server geladen werden muss. SVG’s kann man auch als Datei mit der Endung .svg oder .svgz abspeichern. In dem Falle behandelt man die Grafik wie eine .jpg- oder .png-Datei.

Alle modernen Browser (Internet Explorer erst ab Version 9) können das Format verarbeiten.

Eignung

Das SVG-Format eignet sich für alles, was geometrische Formen und Linien hat: Logos, Infografiken, Diagramme, mehrfarbige Icons, Text, u.s.w.

Fit für Responsive Webdesign

SVG-Grafiken eignen sich vor allem für Websites, die sich dem benutzten Endgerät anpassen. Durch die kleine Dateigröße müssen Smartphone-Nutzer mit geringer Bandbreite nicht lange warten. Zudem passt sich die Grafik gleich dem Endgerät an und verkleinert sich, wenn auf einem Tablet weniger Platz vorhanden ist als auf dem Desktop-PC.

Hier ist zu beachten, dass keine Höhen- und Breitenangaben mit abgespeichert werden dürfen, wenn die Grafik skalierbar sein soll. Soll Die Grafik als Code eingefügt werden, muss „height“ und „width“ entfernt werden. Kommt eine .svg-Datei zum Einsatz, muss schon beim Export aus dem Grafikprogramm darauf geachtet werden, sie als Interaktives oder responsives SVG abzuspeichern.

Kurzer Direktvergleich

Hier folgt eine Tabelle zum direkten Vergleich aller Formate:

JPG/JPEG PNG GIF SVG
Kompression verlustfrei
Transparenz
(Abstufungen)

(ja/nein)

(Abstufungen)
Animation
max. Farben 16,7 Mio. 16,7 Mio. 256 16,7 Mio.
Eignung Fotos Bilder mit Transparenzen, Text und Logos Animationen Logos, Infografiken, Diagramme, mehrfarbige Icons, Text, Animationen

Fazit:

Für detailreiche Bilder mit vielen Farben ist nach wie vor JPEG die erste Wahl, da bei der Kompression auf Farberhalt Wert gelegt wird. Das GIF ist größtenteils durch PNG abgelöst worden. Einzig wenn eine PNG-Datei zu groß werden würde oder für Animationen wird das GIF bevorzugt.

Das SVG-Format ist bisher nicht weit verbreitet. Doch das Potential ist vorhanden: Mit JavaScript lassen sich ebenfalls Animationen realisieren und es besticht durch geringe Dateigrößen und Skalierbarkeit. Das wird auch für die zunehmende Anzahl verschiedener mobiler Endgeräte immer wichtiger.

 

2 Kommentare

  1. GIF sieht beim identischen Bild von z.B. 50px Höhe schlechter aus.
    Und bei PNG ist der Unterschied von PNG8 zu PNG24 sichtbar.
    Sogar bei simplen Piktogrammen, speziell bei der geringem Höhe von 50px.
    Das macht dann seltsamerweise den Unterschied zwischen rauen Kanten, und deutlich kantigen Säulen hin zu sehr weichen Kanten.
    1 Farbe (weiss) und Transparenz, also zwei Farben.
    Dennoch ein Unterschied zwischen PNG8 und PNG24.
    Aber auch je nach Piktogramm ein Unterschied zwischen 2kb für PNG8 und 8kb für PNG24.

    Wenn man ein ganzes Forum mit xx Subforen mit jeweils einem kleinen Bildchen versorgen will, wäre es gut möglichst kleine Bilder erzeugen zu können.
    Ist jetzt die Frage, ob man es ein wenig unschärfer (eher am Rand zur Transparenz zu erkennen) akzeptiert und dafür evtl. bis zu einem Viertel weniger Platz braucht. Allerdings laden die Meisten es über eine schnelle Verbindung, und auch mobile Volumen sind nicht so gering. Und es muss evtl. nur einmal geladen werden (weiß jetzt nicht in wie weit mobile Browser einen Cache mit Bildern etc. nutzen).

    PNG hat keinerlei Komprimierung?
    Wäre es denn unmöglich ein modernes besseres Format zu entwickeln?!?

    Wenn PNG keinerlei Komprimierung hat, aber wegen der Transparenz bis auf GIF alternativlos ist (Safari kann scheinbar TIFF, aber das ist wohl eine Ausnahme) wäre eine Art „Web-Tiff“ gut.
    Mit Transparenz, der Möglichkeit einer Komprimierung, und wählbar mit Verlust oder ohne Verlust (LZW).

    Was ist mit „WebP“? Transparenz kann es scheinbar per „Alpha-Kanal“
    Bis zu 80% sind wohl nicht verlustfrei komprimiert, aber es kommt auf das Ergebnis an. Bei kleinen Symbolen, Forums-Bildern von xx Pixeln Höhe ist es evtl. egal.
    Vor einem Jahr hieß es noch der Internet-Explorer und Safari unterstützen es nicht.
    Wenn es heute unterstützt würde (Firefox hatte es vor einem Jahr angekündigt, sonst waren es Chrome und Opera), und es Software zur Erzeugung, Plugins für Bildbearbeitungen etc. gäbe, würde Ich die Symbole in WebP erzeugen und in die Webseite einbinden.

    1. Hallo Tobias,

      danke für Deinen Kommentar. Bei Transparenzen ist bisher immer noch PNG die beste Wahl. Es gibt auch Online-Tools, um PNG zu komprimieren. Vielleicht lässt sich so noch etwas herausholen. Ich benutze immer dieses hier: https://tinypng.com/

      WebP wäre auch eine Möglichkeit, zumindest bei detailarmem Bildmaterial. Aber leider ist die Unterstützung meines Erachtens noch nicht gut genug. Mozilla prüft wohl immer noch, ob es unterstützt werden soll. Es müsste vorerst eine Fallback-Lösung für Firefox, IE und Safari eingebaut werden. Für die gängigen Bildbearbeitungsprogramme gibt es aber schon Plugins, um WebP lesen und bearbeiten zu können.

      Viele Grüße
      Diana