{"id":678,"date":"2022-02-02T14:45:28","date_gmt":"2022-02-02T13:45:28","guid":{"rendered":"http:\/\/www.der-informationsdesigner.de\/agentur-blog\/?p=678"},"modified":"2023-01-30T11:06:07","modified_gmt":"2023-01-30T10:06:07","slug":"jpg-png-gif-bildformate-im-web","status":"publish","type":"post","link":"https:\/\/www.der-informationsdesigner.de\/agentur-blog\/webdesign\/jpg-png-gif-bildformate-im-web\/","title":{"rendered":"JPG, PNG, GIF \u2013 Bildformate im Web"},"content":{"rendered":"

Eines der Hauptelemente von Internetseiten sind Bilder<\/strong>, frei nach dem Motto „Ein Bild sagt mehr als tausend Worte“<\/em>. Aufgrund der stetig wachsenden bzw. zur Verf\u00fcgung stehenden Bandbreite und der sich \u00e4ndernden technischen Gegebenheiten (z. B gr\u00f6\u00dfere Bildschirme, h\u00f6here Monitoraufl\u00f6sung) hat sich der Einsatz von Bildern im Web vor allem dahin ge\u00e4ndert, dass sie gerne auch viel und gro\u00dffl\u00e4chig eingesetzt werden. <\/p>\n

Aber auch wenn heutzutage Ladezeiten nicht mehr so den Fokus haben, wie noch vor einigen Jahren, macht es dennoch Sinn, das richtige Bildformat f\u00fcr den richtigen Einsatzzweck<\/strong> zu w\u00e4hlen. Dabei geht es nicht nur um den Aspekt der Dateigr\u00f6\u00dfe, sondern auch darum die Vor- und Nachteile des jeweiligen Bildformats zu nutzen.<\/p>\n

In Sachen Dateiformate f\u00fcr Bilder im Web hat sich \u00fcber die Jahre nicht all zu viel getan, sodass nach wie vor ma\u00dfgeblich die drei Formate JPG, PNG und GIF beim Thema Webdesign<\/a> relevant sind. Jedes dieser Formate hat seine St\u00e4rken und Schw\u00e4chen, auf die hier kurz eingegangen werden soll.<\/p>\n

JPG \/ JPEG – Der Klassiker f\u00fcr Bilder<\/h2>\n

Das JPG-Format<\/strong> 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\u00fcr „Joint Photografic Experts Group“ und bezeichnet ein sogenanntes verlustbehaftetes Dateiformat, dass bis zu 16,7 Millionen Farben<\/strong> darstellen kann.<\/p>\n

Ein Vorteil beim JPG-Format ist die M\u00f6glichkeit der Kompression<\/strong> (von einer Skala von 0 – 100%), um somit Bilder von der Dateigr\u00f6\u00dfe entsprechend zu verkleinern. Je st\u00e4rker ein JPG-Bild komprimiert wird, desto st\u00e4rker wird dies auch sichtbar, aber desto kleiner wird auch die Dateigr\u00f6\u00dfe. Der Clou dabei ist, einen m\u00f6glichst „optimalen Mittelweg“ zwischen Qualit\u00e4t und Kompressionsst\u00e4rke<\/strong> zu finden.<\/p>\n

Schw\u00e4chen hat das JPG-Format allerdings bei der Darstellung von einfachen Farbfl\u00e4chen und Formen – so werden eigentlich scharfe Kanten z. B. eines Quadrats unscharf dargestellt. Au\u00dferdem kann das JPEG-Format nicht mit transparenten Hintergr\u00fcnden umgehen, die z. B. oft bei Button-Grafiken notwendig sind.<\/p>\n

GIF – F\u00fcr Formen und Animationen<\/h2>\n

Das GIF-Format<\/strong> („Graphics Interchange Format“) unterst\u00fctzt im Gegensatz zum JPG-Format lediglich 256 Farben<\/strong> (8 Bit) und eignet sich somit vor allem f\u00fcr die Darstellung von Bildern mit wenigen Farben (z. B. Logos, Banner), Motiven mit einfachen bzw. wenigen Farbfl\u00e4chen oder auch f\u00fcr sich wiederholende Muster. Dar\u00fcber hinaus zeichnet sich das Format durch eine extreme verlustfreie Kompression<\/strong> aus, sodass bei GIF-Bildern ein Minimum an Dateigr\u00f6\u00dfe<\/strong> erreicht wird. Nicht geeignet ist das GIF-Format aufgrund seiner Eigenschaften f\u00fcr Fotos oder Grafiken mit detaillierten Farbverl\u00e4ufen.<\/p>\n

Ein zus\u00e4tzlicher Vorteil, der f\u00fcr den Einsatz des GIF-Formats spricht, ist die M\u00f6glichkeit der Animation<\/strong>. Dabei k\u00f6nnen mehrere Grafiken in einer Datei zusammengefasst werden. Durch eine zeitliche Steuerung werden die Einzelgrafiken nacheinander angezeigt, woraus sich Bewegungseffekte ergeben (Stichwort: Daumenkino).<\/p>\n

Ebenfalls m\u00f6glich, ist der Einsatz von Transparenz<\/strong>, 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.<\/p>\n

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\u00dfen vom Aussterben bedroht, da durch das PNG eigentlich eine ad\u00e4quate Alternative zur Verf\u00fcgung steht, die dar\u00fcber hinaus insgesamt mehr Vorteile zu bieten hat.<\/p>\n

PNG – Der Hybrid unter den Bildformaten<\/h2>\n

PNG<\/strong> steht f\u00fcr „Portable Network Graphics“ und wurde urspr\u00fcnglich daf\u00fcr entwickelt, das GIF-Format zu ersetzen. Das PNG-Format ist dabei im Prinzip ein Hybrid aus JPG- und GIF-Format<\/strong> 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 \u00e4hnlich wie beim GIF-Format nur 256 Farben m\u00f6glich sind, w\u00e4hrend bei PNG-24 \u00fcber 16 Millionen Farben unterst\u00fctzt werden. Dar\u00fcber hinaus erm\u00f6glicht das PNG-Format die Verwendung von Transparenz<\/strong> bzw. eines Alpha-Kanals.<\/p>\n

Was die Dateigr\u00f6\u00dfe angeht, ist das PNG-Format als verlustfreies Format<\/strong> nicht ganz so stark und auch flexibel wie das JPG-Format. PNGs sind zwar von der Dateigr\u00f6\u00dfe ebenfalls relativ klein, erreichen dabei aber in dieser Hinsicht nicht die M\u00f6glichkeiten des JPG-Formats und es ist auch keine individuelle Kompressionsst\u00e4rke w\u00e4hlbar. Allerdings ist insgesamt die Qualit\u00e4t besser als bei JPEG-Bildern und auch die Darstellung scharfer Kanten wird erm\u00f6glicht.<\/p>\n

Das PNG-Format eignet sich also demnach vor allem f\u00fcr kleinere Bilder, Grafiken oder Formen wie z. B. Buttons und ist dann immer erste Wahl, wenn ein transparenter Hintergrund notwendig ist.<\/p>\n

SVG – F\u00fcr skalierbare Vektorgrafiken<\/h2>\n

Auch wenn prim\u00e4r 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<\/strong> („Scalable Vector Graphics“), dass auf den Einsatz zweidimensionaler Vektorgrafiken<\/strong> ausgelegt ist.<\/p>\n

Dabei werden Grafiken in Form von Vektoren dargestellt, was eine verlustfreie Skalierung bei geringer Dateigr\u00f6\u00dfe<\/strong> erm\u00f6glicht, was es u. A. auch so interessant f\u00fcr das Thema responsive Webdesign<\/a> macht. Das bedeutet SVG-Dateien k\u00f6nnen beliebig gro\u00df dargestellt werden, ohne das ein Qualit\u00e4tsverlust entsteht bzw. die Grafiken „pixelig“ werden.<\/p>\n

Im Printbereich kommen solche Vektor-Dateien z. B. bei Logos schon seit jeher zum Einsatz und erm\u00f6glichen den flexiblen Einsatz von Grafiken f\u00fcr unterschiedliche Anforderungen. Ein weiterer Pluspunkt f\u00fcr das SVG-Format ist die M\u00f6glichkeit der Animation mittels JavaScript<\/strong>. F\u00fcr Fotos oder detailreiche Bilder eignet sich das SVG-Format allerdings nicht.<\/p>\n

\"Infografik<\/a><\/p>\n

Einen guten \u00dcberblick \u00fcber die Eigenheiten der g\u00e4ngigen Bildformate zeigt die Infografik von WhoIsHostingThis. Dort finden Sie Infos in komprimierter Form dar\u00fcber, wann welches Dateiformat Sinn macht oder welches Dateiformat seit wann existiert oder von wem entwickelt wurde.<\/em><\/p>\n