JPG, PNG, GIF – Bildformate im Web (2024)

Eines der Hauptelemente von Internetseiten sind Bilder, frei nach dem Motto „Ein Bild sagt mehr als tausend Worte“. Aufgrund der stetig wachsenden bzw. zur Verfügung stehenden Bandbreite und der sich ändernden technischen Gegebenheiten (z. B größere Bildschirme, höhere Monitorauflösung) hat sich der Einsatz von Bildern im Web vor allem dahin geändert, dass sie gerne auch viel und großflächig eingesetzt werden.

Aber auch wenn heutzutage Ladezeiten nicht mehr so den Fokus haben, wie noch vor einigen Jahren, macht es dennoch Sinn, das richtige Bildformat für den richtigen Einsatzzweck zu wählen. Dabei geht es nicht nur um den Aspekt der Dateigröße, sondern auch darum die Vor- und Nachteile des jeweiligen Bildformats zu nutzen.

In Sachen Dateiformate für Bilder im Web hat sich über die Jahre nicht all zu viel getan, sodass nach wie vor maßgeblich die drei Formate JPG, PNG und GIF beim Thema Webdesign relevant sind. Jedes dieser Formate hat seine Stärken und Schwächen, auf die hier kurz eingegangen werden soll.

JPG / JPEG – Der Klassiker für Bilder

Das JPG-Format ist eigentlich so gut wie jedem bekannt, der schon mal ein wenig mit der Nutzung eines PCs zu tun und z. B. Fotos mit seiner Kamera gemacht hat. Dabei steht „JPG“ oder besser „JPEG“ für „Joint Photografic Experts Group“ und bezeichnet ein sogenanntes verlustbehaftetes Dateiformat, dass bis zu 16,7 Millionen Farben darstellen kann.

Ein Vorteil beim JPG-Format ist die Möglichkeit der Kompression (von einer Skala von 0 – 100%), um somit Bilder von der Dateigröße entsprechend zu verkleinern. Je stärker ein JPG-Bild komprimiert wird, desto stärker wird dies auch sichtbar, aber desto kleiner wird auch die Dateigröße. Der Clou dabei ist, einen möglichst „optimalen Mittelweg“ zwischen Qualität und Kompressionsstärke zu finden.

Schwächen hat das JPG-Format allerdings bei der Darstellung von einfachen Farbflächen und Formen – so werden eigentlich scharfe Kanten z. B. eines Quadrats unscharf dargestellt. Außerdem kann das JPEG-Format nicht mit transparenten Hintergründen umgehen, die z. B. oft bei Button-Grafiken notwendig sind.

GIF – Für Formen und Animationen

Das GIF-Format („Graphics Interchange Format“) unterstützt im Gegensatz zum JPG-Format lediglich 256 Farben (8 Bit) und eignet sich somit vor allem für die Darstellung von Bildern mit wenigen Farben (z. B. Logos, Banner), Motiven mit einfachen bzw. wenigen Farbflächen oder auch für sich wiederholende Muster. Darüber hinaus zeichnet sich das Format durch eine extreme verlustfreie Kompression aus, sodass bei GIF-Bildern ein Minimum an Dateigröße erreicht wird. Nicht geeignet ist das GIF-Format aufgrund seiner Eigenschaften für Fotos oder Grafiken mit detaillierten Farbverläufen.

Ein zusätzlicher Vorteil, der für den Einsatz des GIF-Formats spricht, ist die Möglichkeit der Animation. Dabei können mehrere Grafiken in einer Datei zusammengefasst werden. Durch eine zeitliche Steuerung werden die Einzelgrafiken nacheinander angezeigt, woraus sich Bewegungseffekte ergeben (Stichwort: Daumenkino).

Ebenfalls möglich, ist der Einsatz von Transparenz, indem beispielsweise eine bestimmte Farbe als transparente Farbe definiert wird. Dadurch scheinen dann unterhalb der GIF-Grafik liegende Elemente wie z. B. der Website-Hintergrund durch.

Das GIF-Format kommt gerne bei einfachen animierten Bannern zum Einsatz, wobei mittlerweile die Bannererstellung mittels HTML5 immer mehr zunimmt. Auch sonst ist das GIF-Format einigermaßen vom Aussterben bedroht, da durch das PNG eigentlich eine adäquate Alternative zur Verfügung steht, die darüber hinaus insgesamt mehr Vorteile zu bieten hat.

PNG – Der Hybrid unter den Bildformaten

PNG steht für „Portable Network Graphics“ und wurde ursprünglich dafür entwickelt, das GIF-Format zu ersetzen. Das PNG-Format ist dabei im Prinzip ein Hybrid aus JPG- und GIF-Format und vereinigt die Vorteile dieser beiden Bildformate. Dabei unterscheidet man zwischen PNG-8 (8 Bit Farbtiefe) und PNG-24 (24 Bit Farbtiefe), wobei beim PNG-8 ähnlich wie beim GIF-Format nur 256 Farben möglich sind, während bei PNG-24 über 16 Millionen Farben unterstützt werden. Darüber hinaus ermöglicht das PNG-Format die Verwendung von Transparenz bzw. eines Alpha-Kanals.

Was die Dateigröße angeht, ist das PNG-Format als verlustfreies Format nicht ganz so stark und auch flexibel wie das JPG-Format. PNGs sind zwar von der Dateigröße ebenfalls relativ klein, erreichen dabei aber in dieser Hinsicht nicht die Möglichkeiten des JPG-Formats und es ist auch keine individuelle Kompressionsstärke wählbar. Allerdings ist insgesamt die Qualität besser als bei JPEG-Bildern und auch die Darstellung scharfer Kanten wird ermöglicht.

Das PNG-Format eignet sich also demnach vor allem für kleinere Bilder, Grafiken oder Formen wie z. B. Buttons und ist dann immer erste Wahl, wenn ein transparenter Hintergrund notwendig ist.

SVG – Für skalierbare Vektorgrafiken

Auch wenn primär die drei Grafikformate GIF, PNG und JPG das Web dominieren, soll ein weiteres interessantes Format nicht verschwiegen werden. Dabei handelt es sich um das SVG-Format („Scalable Vector Graphics“), dass auf den Einsatz zweidimensionaler Vektorgrafiken ausgelegt ist.

Dabei werden Grafiken in Form von Vektoren dargestellt, was eine verlustfreie Skalierung bei geringer Dateigröße ermöglicht, was es u. A. auch so interessant für das Thema responsive Webdesign macht. Das bedeutet SVG-Dateien können beliebig groß dargestellt werden, ohne das ein Qualitätsverlust entsteht bzw. die Grafiken „pixelig“ werden.

Im Printbereich kommen solche Vektor-Dateien z. B. bei Logos schon seit jeher zum Einsatz und ermöglichen den flexiblen Einsatz von Grafiken für unterschiedliche Anforderungen. Ein weiterer Pluspunkt für das SVG-Format ist die Möglichkeit der Animation mittels JavaScript. Für Fotos oder detailreiche Bilder eignet sich das SVG-Format allerdings nicht.

Einen guten Überblick über die Eigenheiten der gängigen Bildformate zeigt die Infografik von WhoIsHostingThis. Dort finden Sie Infos in komprimierter Form darüber, wann welches Dateiformat Sinn macht oder welches Dateiformat seit wann existiert oder von wem entwickelt wurde.

• Zur Infografik zum Thema Bildformate für das Web

Zusammenfassung der Eigenschaften

JPG

• bis zu 16,7 Millionen Farben
• verlustbehaftete Kompression
• optimal für große detailreiche Fotos mit vielen Farben
• keine Transparenz möglich
• scharfe Kanten werden unscharf dargestellt
• bei hoher Kompression Artefaktbildung

GIF

• nur bis 256 Farben möglich
• verlustfreie Kompression
• optimal für kleine Bilder, Motive mit großen Farbflächen
• Alpha- und Index-Transparenz möglich
• scharfe Kanten werden scharf dargestellt
• Animationen möglich
• sehr geringe Dateigröße möglich

PNG

• von 256 – 16,7 Millionen Farben möglich
• verlustfreie Kompression
• optimal für kleinere Bilder, Motive mit großen Farbflächen, Logos
• Transparenz möglich
• scharfe Kanten werden scharf dargestellt

SVG

• verlustfrei skalierbar
• Animationen möglich
• optimal für Logos und andere flächige vektorbasierte Motive
• kann mit Hilfe von JavaScript / jQuery manipuliert werden
• ideal für den Einsatz beim Thema responsive Webdesign oder fluiden Layouts

Zuletzt aktualisiert am: 30. Januar 2023 | Der Informationsdesigner – Werbeagentur Allgäu