JPG, GIF und PNG: Welches Format für welchen Einsatz

Lesezeit: 7 Minuten Autor: Thomas Veröffentlicht: Zuletzt aktualisiert:
Inhalt

Grundsätzlich handelt es sich bei allen Bildformaten um digitale Komprimierungsverfahren, die bestimmte Eigenschaften eines Bildes erhalten und andere verwerfen. Ziel ist es dabei, die Datei für ihren jeweiligen Anwendungsbereich zu optimieren und die Dateigröße mehr oder weniger stark zu reduzieren. Die Grundvoraussetzung für die Wahl des richtigen Bildformats ist also das Wissen darüber, wofür die Datei später verwendet werden soll.

Welche Bildformate gibt es und welche eignen sich für welche Nutzung? Um dich handlungssicher im Umgang mit Bildformaten zu machen und die Erklärungen trotzdem pixx.io - gewohnt einfach zu halten, beschränken wir uns im Folgenden auf die für die Arbeit im Web optimierten Formate JPG, GIF und PNG. Andere Dateitypen wie TIFF, PSD oder RAW eignen sich zwar hervorragend für die Bildbearbeitung oder den Druck, haben aber auf einer Website nichts verloren und werden dort auch meist nicht (korrekt) dargestellt.

Eine Sorge können wir dir vorab nehmen: du musst dir nicht merken, welches Format für welchen Einsatzzweck am besten passt. Warum? Ganz einfach: ihr könnt in eurem pixx.io Mediaspace einmal die wichtigsten Formate festlegen und diese stehen euch dann als Vorlagen beim Download zur Verfügung. Ihr speichert also immer die beste, hochauflösendste Version eures Bildes im Mediaspace ab und konvertiert dieses dann je nach Bedarf in das passende Format. Braucht ihr ein Bild dann etwa für die Website wählt ihr beim Download das Format "Website" aus. pixx.io gibt euch dann das Bild optimiert für die Verwendung im Web aus. Du hast noch keinen pixx.io Account? Dann teste pixx.io jetzt 30 Tage kostenfrei! 

Blog-Störer_ Easy konvertieren 1JPG – das universelle Komprimierungswunder

Das JPG oder JPEG (Joint Photographic Experts Group) ist das vermutlich bekannteste Bildformat und lässt sich von nahezu allen gängigen Programmen öffnen und konvertieren. Auch die meisten Scanner und Digitalkameras verarbeiten deine Dateien in diesem Format. Aufgrund seines besonders großen Farbspektrums (bis zu 16 Millionen Farben) eignet sich das JPG vor allem für Fotos und komplexere Bilddateien mit unterschiedlichen Farben und Farbtiefen.

Doch der Teufel steckt hier im Detail – im Fall des JPGs in Form eines unschuldig grinsenden Eichhörnchens namens “Komprimierung”. Zwar lassen sich mit dem JPG-Verfahren Bilddateien mit nur wenigen Klicks um ein Vielfaches verkleinern, jedoch bedeutet dieser Komprimierungsprozess auch immer einen Qualitätsverlust für das Bild. Kleinere Dateien haben dabei den offensichtlichen Vorteil weniger Speicherplatz auf einer Website oder in einer App zu verbrauchen und den Ladevorgang einer Seite zu beschleunigen. Um jedoch den unschönen Effekt des “Verpixelns” zu vermeiden, sollte bei der Komprimierung ein Kompromiss aus Qualität und Dateigröße gewählt werden.

Weniger geeignet ist das JPG für die Darstellung einfacher Farbflächen wie Logos oder Infografiken. Bei der Komprimierung solcher Dateien mit dem JPG-Verfahren kommt es schnell zu unschönen “Artefakten”, also Bildstörungen die vor allem die Ränder der Farbflächen unsauber und schwammig wirken lassen können. Außerdem ist es nicht möglich JPG-Dateien mit einem transparenten Hintergrund zu speichern.

GIF – der schlanke Experte für Animationen und Grafiken

Wer seinen Food-Blog mit einem Foto des perfekten Cesar-Salad in all seiner Brillianz und Schärfe schmücken möchte, sollte von dem GIF-Format tunlichst die Finger lassen. Aufgrund seiner Beschränkung auf 256 Farben fällt die Darstellung von komplexen Fotos in diesem Format leider meist grobkörnig und wenig qualitativ aus. Geht es jedoch um einfache Farbflächen mit wenig Tiefe, wie beispielsweise Logos, Buttons und Infografiken, ist das GIF ein echter Fachmann. Die scharfen Kanten von Schriften oder grafischen Formen kann das GIF auch im komprimierter Form deutlich klarer und präziser darstellen als sein Format-Kollege das JPG.

Ein weitere Vorteil dieses Bildformats ist seine geringe Dateigröße. Damit lassen sich vor allem einfache Animationen besonders schnell und ohne lange Ladezeiten anzeigen. Zudem beherrscht das GIF-Format die Darstellung von Ebenen und Transparenz, was es gerade bei der Verwendung von Grafiken auf einer Homepage ein nützliches wie wichtiges Tool ist.

infografik-bilder-im-web-banner-pixxio-bildverwaltung-1Komplette Erklärgrafik „Bilder im Web“ inkl.  Quickcheck und SEO-Tipps hier kostenlos herunterladen.

PNG – verlustfrei und vielseitig

Das PNG (Portable Network Graphics) vereint die meisten Stärken von JPG und GIF und verzichtet dabei weitestgehend auf deren Schwächen. Genau wie das JPG kann auch das PNG-Format Bilder mit einem Farbspektrum von bis zu 16 Millionen Farben darstellen. Im Gegensatz zu seinem weiter verbreiteten Kollegen lässt sich ein PNG zudem aber nahezu verlustfrei komprimieren. Dies bedeutet, dass auch die feinsten Schattierungen und Farbnuancen eines Fotos nach der Komprimierung erhalten bleiben. Ein Nachteil ist dabei jedoch die Dateigröße des PNG. Auch im komprimierten Zustand kann ein solches Format bis zu zehn mal größer sein als ein vergleichbares JPG. Bei der Verwendung von kleineren Fotos und nicht grafischen Bildern auf einer Website, wo Speicherplatz und Ladezeiten eine größere Bedeutung zukommen als der Detailgrad und die Qualität der Aufnahme, ist das JPG dem PNG also weiterhin vorzuziehen.

Anders verhält es sich bei Fotos die zwingend einen transparenten Anteil beinhalten müssen. Wo das JPG an seine Grenzen stößt, kann das vielseitige PNG weiterhelfen. Durch den sogenannten “Alphakanal” eines PNG lassen sich Farbanteile eines Fotos transparent oder teiltransparent darstellen. Gerade bei der freien und spielerischen Verwendung von Fotos hat das PNG also seine Stärken.

Da sich ein PNG auch in 256 Farben speichern lässt, eignet es sich ebenfalls gut zur Darstellung von Grafiken und einfachen Farbflächen. Seine Komprimierung ist dabei sogar noch deutlich effizienter als die des GIF, die Dateien also noch kleiner. Aber bedeutet das automatisch den Todesstoß für das GIF? Keine Sorge, der kleine Kamerad darf seinen Kopf behalten! Da das klassische PNG keine Animationen unterstützt, werden wir die lustigen beweglichen Bilder auf 9GAG und in unseren Whatsapp-Gruppen auch weiterhin im GIF Format vorfinden.

Welches Format ist denn nun das richtige?

800 72dpi

Komplette Erklärgrafik „Bilder im Web“ inkl.  Quickcheck und SEO-Tipps hier kostenlos herunterladen.

Wie heißt es oft so schön: “Well, it depends…”.

Wie du wahrscheinlich schon nach diesem kurzen Blogbeitrag ahnen kannst, ist das Thema Bildformate recht komplex und wir sind uns sicher, dass dir die Kollegen aus der Grafik darüber einen unglaublich spannenden und wertvollen Powerpoint-Vortrag halten könnten – drei Stunden lang! Doch ohne die Bedeutung dieses Thema zu schmälern, können wir zusammengefasst festhalten: die Wahl des richtigen Bildformats ist in erster Linie von der geplanten Anwendung abhängig. Jeder der vorgestellten Kandidaten besitzt eindeutige Stärken und Schwächen – echte Performance können JPG, GIF und PNG aber nur dann liefern, wenn sie richtig eingesetzt werden. Grundsätzlich solltest du aber stets versuchen einen gesunden Mittelweg aus Qualität und Kompression zu finden.

Zur einfachen Orientierung haben wir für dich eine übersichtliche Infografik erstellt, die schnell erklärt, für welche Einsatzzwecke du am besten welches Bildformat nutzen. Die Erklärgrafik enthält außerdem wertvolle SEO-Tipps für deine Bildnutzung. Du kannst die Infografik hier kostenlos im PDF- oder PNG-Format herunterladen.

Bilder und Medien in Unternehmen: Mit Digital Asset Management unnötige Arbeit vermeiden

Du möchtest im Arbeitsalltag immer das passende Bildformat zur Hand haben? Und das ganz automatisch? Dann empfiehlt sich der Einsatz einer sogenannte  Digital Asset Management Software bzw. Bildverwaltung. Mediendateien werden hier zentral abgespeichert, Mitarbeiter können jederzeit und von überall darauf zugreifen und Dateien im gewünschten Format herunterladen und einfach und sicher mit anderen Mitarbeitern oder auch extern teilen. Integrationen für alle gängigen Programme (z.B. Adobe Photoshop, InDesign, Office und CMS wie WordPress oder TYPO3) sorgen dafür, dass die DAM-Software im gesamten Workflow nahtlos eingesetzt wird und Mitarbeiter bei der Organisation von Bildern, Videos und Dokumenten viel Zeit sparen und letztlich mehr Zeit fürs Wesentliche haben.

Blog-Störer_ pixx.io testen 5

Erfahre in Teil 2 von “Bilder im Web – alles über das mächtige Marketing-Tool” welche Rolle Bilder bei der Suchmaschinenoptimierung spielen und welche Tricks dir helfen können deine Website besser zu platzieren.

Thomas
Thomas

Als Games-Redakteur hat Thomas schon früh gelernt, spannende Texte SEO-konform zu schreiben. Das hat ihn letztlich auch zu pixx.io geführt, wo er schnell weitere Aufgaben im Digitalmarketing übernommen hat. Heute macht er Business Intelligence und kümmert sich um Prozesse. Privat ist er beim Zocken geblieben. Und wenn das Wetter schön und der Berg nicht zu groß ist, geht er auch mal wandern.

Deine Browsersprache ist Deutsch, möchtest Du zu der deutschen Website wechseln?