Die Qual der Wahl: Setzen Sie Bildformate im Netz richtig ein

Wer visuellen Content einsetzt, sollte die gängigen Bildformate kennen. Schließlich macht nicht jede Dateiendung für jeden Anwendungsfall Sinn. Doch worauf kommt es eigentlich an und wann sollten Sie Ihr Bildmaterial als GIF, JPG oder PNG speichern? Wir geben Ihnen einen Überblick!

Die Bildformate endlich verstehen

Die richtigen Bildformate zu kennen, zahlt sich hinsichtlich Qualität und Ladezeit aus. (Foto: © photophonie | Adobe Stock)

Jedes pixelbasierte Bild auf einer Website ist in einem bestimmten Dateiformat gespeichert. Durchgesetzt haben sich insbesondere JPG und PNG. Aber auch das GIF erfreut sich wieder wachsender Beliebtheit. Warum aber werden unterschiedliche Bildformate auf Webseiten verwendet? Diese Frage lässt sich schnell beantworten: JPG, PNG und GIF haben allesamt ihre Stärken aber auch gewisse Schwächen. Zwar können Sie Ihre Bilder in der Regel in jedem Format speichern und auf Ihre Website stellen, bestimmte Kandidaten sind manchmal jedoch besser geeignet. Wer zudem mit Dateiendungen umgehen kann, zeigt Medienkompetenz und stellt sich von der richtigen (Web-)Seite dar!

Das JPG: Die Königin der Stockfotos

Das Bildformat JPGDas von der Joint Photographic Experts Group entwickelte JPG-Format sollte immer dann zum Einsatz kommen, wenn Bildmaterial mit vielen Farben und großflächigen Details vorliegt. Mit einer Darstellungsleistung von bis zu 16,7 Millionen Farben – sprich dem vollen RGB-Farbraum – ist das Format optimal für eigene Aufnahmen und Stockfotos geeignet. Ein weiterer Vorteil: JPG erlaubt es, deutlich höhere Kompressionsraten zu erzielen, als es mit PNG oder GIF möglich ist. Selbst für sehr große Bilder lassen sich schlanke Dateigrößen und optimale Ladezeiten erzielen. Eine Reduktion der Dateigröße um etwa 60 Prozent ohne wahrnehmbaren Qualitätsverlust ist möglich.

In der Kompression liegt jedoch auch ein Nachteil. Der Export als JPG erzeugt immer Verluste gegenüber dem Original und schwächelt bei der Darstellung von einfarbigen Flächen, scharfen Kanten und Verläufen. Hier kann JPG unschöne Rasterflächen, unscharfe Übergänge und Bildartefakte erzeugen. Außerdem kann das JPG-Bildformat keine Transparenzen darstellen und keine Animationen enthalten.

Die Vor- und Nachteile von JPG

  • sehr gute Darstellung von vielen Farben und großflächigen Details
  • kleine Dateigrößen bei guter Bildqualität
  • oft suboptimale Darstellung von einfarbigen Flächen, scharfen Kanten und Verläufen
  • keine Transparenzen
  • keine Animationen

PNG – die schärfste Lösung für Grafiken & Co.

Das Bildformat PNGPortable Network Graphics, kurz PNG, ist das jüngste Bildformat in der Runde. Genau wie JPG kann es alle Farben des RGB-Farbraums darstellen – das jedoch nahezu verlustfrei. Wer Bildmaterial in der bestmöglichen Qualität exportieren möchte, sollte zum PNG greifen. Das Format kann Verläufe, scharfe Kanten, Linien und einfarbige Flächen außerdem wesentlich besser darstellen als JPG. Das hat jedoch seinen Preis: Die PNG-Datei ist wesentlich größer und sorgt für deutlich längere Ladezeiten. Daher sollten Sie das Format nur dann einsetzen, wenn es seine Stärken richtig ausspielen kann. Das ist zum Beispiel bei Infografiken, Logos oder Navigationselementen der Fall. Für eigene Aufnahmen und Stockfotos ist das besser komprimierte JPG vorzuziehen. Noch ein Punkt für das PNG: Das Bildformat kann Transparenzen und Halbtransparenzen darstellen.

Die Vor- und Nachteile von PNG

  • bestmögliche Darstellung von Bildern und Grafiken
  • optimale Darstellung von einfarbigen Flächen, scharfen Kanten und Verläufen
  • sehr große Dateien, lange Ladezeiten
  • Transparenzen und Halbtransparenzen
Geheimtipp: Neben der üblichen 24-Bit-Version des PNGs existiert ein weiteres Format – das PNG-8. Es kann zwar nur 256 Farben und keine Halbtransparenzen ausgeben, ist dafür aber sehr klein. Infografiken und Strichzeichnungen mit nur wenigen Farben lassen sich mit dem PNG-8 bei geringen Dateigrößen optimal darstellen.

Bewegend: Das GIF-Format

Das Bildformat GIFEigentlich ist das Graphics Interchange Format veraltet und unbrauchbar. Es kann von der Leistung her weder mit JPG noch mit PNG mithalten. Trotzdem hat das gute alte GIF ein Ass im Ärmel: Die Animationsfähigkeit. GIF erlaubt es, eine Abfolge von mehreren Bildern in einer Bilddatei zu speichern. Lustige Memes, animierte Infografiken oder Ladezeiten-Symbole werden deshalb immer noch als GIF-Dateien umgesetzt. Darüber hinaus verfügt das Format über eine kleine Dateigröße und kann Transparenzen darstellen. Ein GIF kann jedoch nur bis zu 256 Farben enthalten.

Die Vor- und Nachteile von GIF

  • animierte Bilder möglich
  • geringe Dateigröße
  • Transparenzen (keine Halbtransparenzen)
  • Leistungsfähigkeit liegt ansonsten hinter JPG und PNG

Wann kommt welche Dateiendung für Bilddateien zum Einsatz?

Für animierte Dateien kommt GIF zum Einsatz. Detaillierte Infografiken und filigrane Bilder sollten Sie als PNG speichern. Sind im Bild keine Halbtransparenzen oder mehr als 256 Farben enthalten, bringt der Export als PNG-8 eine deutliche Dateireduktion mit sich. Eigene Aufnahmen und Stockfotos sollten Sie immer als komprimiertes JPG speichern.

Hier noch die Übersicht für die Hosentasche:
Infografik über die richtigen Bildformate im Web


Wir freuen uns natürlich über Feedback, Anregungen und Hinweise. Wer keinen Beitrag verpassen möchte, kann sich für unseren textbest-Newsletter anmelden und bekommt wöchentlich den neuen Artikel bequem ins virtuelle Postfach. Wenn Sie unseren Newsletter abonnieren, stimmen Sie unseren Datenschutzbestimmungen zu.

1 Stern2 Sterne3 Sterne4 Sterne5 Sterne (4 Stimmen, Durchschnitt: 5,00 von insgesamt 5)

geschrieben von: Sascha Kühn

Sascha Kühn

Sascha ist nicht nur Grafiker bei textbest, sondern auch Redakteur und Content-Controller. Für unseren Blog schreibt er über neue Tools, gestalterische Themen und das optimale Zusammenspiel von Text und Bild.

Teilen Sie diesen Beitrag, wenn er Ihnen gefällt!
  •  
  •  
  •  
  •  
  •  
  •  
  •