Welches Bildformat ist das beste: JPG, GIF oder PNG?

Marketing, Content, E-Commerce, Tourismus – viele Bereiche leben von Bildern. Und immer mehr Bilder leben im Internet. Eine wichtige Frage im Alltag vieler Teams lautet deshalb: Welches Bildformat ist das beste: JPG, das GIF oder PNG? Dieser Artikel zeit, wie du das beste Format für deine Bedürfnisse findest und erläutert wichtige Unterschiede.

Bildformate sind vereinfacht gesagt digitale Komprimierungsverfahren, die bestimmte Eigenschaften eines Bildes erhalten und andere verwerfen. Das Ziel der Komprimierung ist es, die Datei für ihren jeweiligen Anwendungsbereich zu optimieren und die Dateigröße mehr oder weniger stark zu reduzieren. Grundvoraussetzung für die Wahl des richtigen Bildformats ist das Wissen darüber, wofür die Datei später verwendet werden soll.

Heutzutage gibt es dutzende Bildformate, wahre Klassiker sind die Formate JPG, GIF und PNG. Doch in den vergangenen Jahren sind für die Darstellung in Web weitere Formate, wie WEBP, SGV oder auch AVIF dazugekommen.

Daneben gibt es noch viele andere Dateitypen. Dazu gehören TIFF, PSD oder RAW. Diese Bildformate eignen sich hervorragend für die Bildbearbeitung oder den Druck. Auf deiner Website haben sie nichts verloren und werden dort auch meist nicht (korrekt) dargestellt. Um solche Formate musst du dir also keine Gedanken machen.

Los geht's – jetzt nehmen wir die gängigsten klassischen Web-Bildformate unter die Lupe und finden heraus, was sie unterscheidet.

JPG-Format: Für was wird JPG verwendet?

Das JPG oder JPEG (Joint Photographic Experts Group) ist das vermutlich bekannteste Bildformat. Das sind seine Besonderheiten:

• Nahezu alle gängigen Programme sind in der Lage, JPG zu öffnen und zu konvertieren.

• Auch die meisten Scanner und Digitalkameras verarbeiten deine Dateien in diesem Format problemlos.

• Aufgrund seines großen Farbspektrums von bis zu 16 Millionen Farben eignet sich das JPG-Format vor allem für Fotos und komplexere Bilddateien mit unterschiedlichen Farben und Farbtiefen.

Doch der Teufel steckt im Detail – im Fall des JPGs heißt der Teufel „Komprimierung“. Zwar lassen sich mit dem JPG-Verfahren Bilddateien mit nur wenigen Klicks um ein Vielfaches verkleinern. Allerdings bringt dieser Komprimierungsprozess immer einen Qualitätsverlust für das Bild mit sich.

Kleinere Dateien haben den Vorteil, weniger Speicherplatz auf einer Website oder in einer App zu verbrauchen und die Ladegeschwindigkeit einer Seite nicht zu beeinträchtigen. 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. Außerdem ist es nicht möglich, JPG-Dateien mit einem transparenten Hintergrund zu speichern.

GIF: Geeignet für Animationen und Grafiken

Willst du euren Corporate-Blog mit professionellen Fotos in hoher Brillanz und Schärfe schmücken, solltest du vom GIF-Format (Graphics Interchange Format) tunlichst die Finger lassen. Aufgrund seiner Beschränkung auf 256 Farben fällt die Darstellung von komplexen Fotos in diesem Format meist grobkörnig und wenig qualitativ aus.

Doch das Format hat auch Vorteile:

• Sind für einfache Farbflächen mit wenig Tiefe ausreichend, beispielsweise für Logos, Buttons und Infografiken, ist das GIF ein echter Fachmann.

• Die scharfen Kanten von Schriften oder grafischen Formen kann das GIF auch in komprimierter Form deutlich klarer und präziser darstellen als sein Format-Kollege JPG.

• Das GIF-Format beherrscht die Darstellung von Ebenen und Transparenz, was es gerade bei der Verwendung für Grafiken auf einer Website zu einem nützlichen Tool macht.

Was für ein Format ist PNG?

Das PNG (Portable Network Graphics) vereint die meisten Stärken von JPG und GIF, ohne ihre Schwächen zu übernehmen:

• 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 JPG lässt sich ein PNG nahezu verlustfrei komprimieren.

• Auch feinste Schattierungen und Farbnuancen eines Fotos bleiben nach der Komprimierung erhalten.

Ein Nachteil ist 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 wichtiger sind als Detailgrad und Qualität der Aufnahme, ist das JPG dem PNG also weiterhin vorzuziehen.

Anders verhält es sich bei Fotos, die zwingend einen transparenten Anteil benötigen. Wo das JPG an seine Grenzen stößt, hilft das vielseitige PNG weiter. Durch den sogenannten Alphakanal eines PNG lassen sich Farbanteile eines Fotos transparent oder teiltransparent darstellen. Gerade bei der freien und spielerischen Verwendung von Fotos beweist das PNG also Stärke.

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 GIFs, die Dateien sind also noch kleiner.

Aber bedeutet das automatisch den Todesstoß für das GIF? Ganz und gar nicht: Da das klassische PNG keine Animationen unterstützt, werden uns die lustigen beweglichen Bilder im GIF-Format weiter begleiten.

Ein Mediaspace erspart dir Formatchaos

Noch eine gute Nachricht gibt es für alle, die mit pixx.io arbeiten: Ihr müsst euch nicht merken, welches Format für welchen Einsatzzweck am besten passt. Warum? Ganz einfach: Es genügt, wenn ihr in eurem pixx.io Mediaspace einmal die wichtigsten Formate festlegt. Diese stehen euch dann als Vorlagen beim Download zur Verfügung.

Ihr speichert also immer die beste, am höchsten aufgelöste Version eures Bildes im Mediaspace ab und konvertiert dieses Bild dann je nach Bedarf in das passende Format. Benötigt ihr etwa ein Bild für die Website, wählt ihr beim Download das Format „Website“ aus. pixx.io gibt das Bild dann optimiert für die Verwendung im Web aus.

WebP: Das Bildformat für schnelle Ladezeiten 

Google entwickelte das WebP Format und stellte es erstmalig 2010 vor. Das Bildformat sollte klassische Formate, wie JPG und PNG ersetzen und wird heutzutage vor allem gerne im Bereich der Ladezeitoptimierung für SEO genutzt.

Die Vorteile von WebP sind: 

• Eine bessere Kompressionsrate mit einer schmaleren Dateigröße im Vergleich zu JPG und PNG. 

• Transparenzen mit einer besseren Qualität im Vergleich zu PNG

• Animierte Bilder mit besserer Kompressionsrate und  als GIF

SGV: Ein alter Newcomer für Vektorgrafiken

Das Scalable Vector Graphics (SVG-Format) wurde von W3C entwickelt, welche die Standards des Webs festlegt und bereits 2001 veröffentlicht. Durch die Zunahme von responsive Designs hat dieses Format einen erneuten Wachstumsschub erlebt. 

Vorteile von SGV sind:

• Skalierbarkeit durch Vektorbasierung. SGV-Bilder basieren auf mathematischen Formeln anstelle von Bildpunkten, wie bei klassischen Rasterbildern. 

• Geringe Dateigröße im Vergleich zu JPG und PNG und damit perfekt für Webseiten.

• Animationen & interaktive Darstellung von SGVs mithilfe von JavaScript und CSS möglich.
  

AVIF: Der Newcomer unter den Bildformaten

Das AVIF Format (AV1 Image File Format) wurde auf Basis eine Videokompressionsverfahrens (AV1) entwickelt und 2019 von der Alliance for Open Media veröffentlicht. 

Die Vorteile von AVIF sind:

• Hohe Kompressionsrate basierend auf AV--1 Video Codec, welches bessere Ladezeiten als JPG und PNG ermöglicht.

• High Dynamic Range Unterstützung, welches erlaubt Bilder mit einem höherem Kontrast- & Farbumfang abzuspeichern.

• Alphakanal-Unterstützung, die es ermöglicht transparente Bereiche in Bildern darzustellen. Das ist nützlich für Logos, Grafiken mit abgerundeten Kanten oder andere Elemente, die überlagert oder auf unterschiedlichen Hintergründen platziert werden sollen.

Entscheidungshilfe für das richtige Web-Format für deine Bilder.

Wie heißt es so schön: Das kommt ganz darauf an. Wie du wahrscheinlich jetzt schon ahnst, ist das Thema Bildformate recht komplex. Die Kollegen aus der Grafik würden dazu sicher liebend gern einen unglaublich spannenden und wertvollen PowerPoint-Vortrag für dich halten – drei Stunden lang!

Doch ohne die Bedeutung dieses Thema zu schmälern, lässt sich zusammenfassend festhalten:

• Die Wahl des richtigen Bildformats hängt in erster Linie von der geplanten Anwendung ab.

• Jeder der vorgestellten Kandidaten besitzt eindeutige Stärken und Schwächen.

• Echte Performance können die Bildformate aber nur dann liefern, wenn sie richtig eingesetzt werden.

• Grundsätzlich solltest du stets versuchen einen gesunden Mittelweg aus Qualität und Kompression zu finden.

Welches Bildformat ist das beste? Diese und weitere Fragen rund um deine Media Dateien beantworten dir unsere kompakten Infografiken. Sie zeigen dir auf einen Blick, für welche Einsatzzwecke du am besten welches Bildformat nutzt und geben wertvolle Tipps, wie du mit deinen Bildern dein SEO-Ranking verbesserst.

Wenn du im Arbeitsalltag immer das passende Bildformat zur Hand haben willst, empfiehlt sich der Einsatz einer Digital Asset Management Software (DAM) auch Media Management genannt. Bilder und andere Media Dateien werden hier zentral abgespeichert. Dein Team hat genau wie du jederzeit und von überall Zugriff darauf.

Beim Download lassen sich Dateien im gewünschten Format konvertieren und direkt an ihrem Zielort einsetzen. So ist es ganz einfach, Bilder, Grafiken, Videos und andere Dateien sicher intern und extern zu teilen.

Integrationen für alle gängigen Programme im Geschäftsalltag, wie Adobe Photoshop, InDesign, Microsoft Office, WordPress oder TYPO3, sorgen dafür, dass die DAM-Software deinen gesamten Workflow nahtlos unterstützt und dir bei der Organisation von Bildern, Videos und Dokumenten viel Zeit spart. 

Jetzt weißt du, welche Bildformate es gibt und welches Bildformat das beste für welche Anwendung ist. In Teil 2 dieses Beitrags erfährst du, wie deine Bilder dir dabei helfen, deine Website besser in den Google-Rankings zu platzieren.