Anzeige
Anzeige
Ratgeber
Artikel merken

GIF, JPG, SVG, PNG oder doch lieber Webp? Wann du auf welches Bildformat setzen solltest

Welches Bildformat ist wofür am besten geeignet? Gerade im Web kommt es auf viele Faktoren an: Dateigröße, Farbspektrum, Transparenz und Skalierbarkeit. Wir machen den Vergleich.

Von Andreas Domin
6 Min. Lesezeit
Anzeige
Anzeige

Alle wichtigen Bildformate im Vergleich. (Grafik: Shutterstock/Lucky clover)

Bei den vielen verschiedenen Bildformaten kann schon mal die Übersicht verloren gehen. Einige unterstützen Transparenz, andere haben ein großes Farbspektrum und wieder andere lassen sich nur verlustbehaftet komprimieren. Manche sind gut fürs Web, andere können nicht in jedem Browser richtig angezeigt werden. Der folgende Vergleich soll dich bei der richtigen Wahl unterstützen:

JPG, PNG, GIF, SVG oder Webp – die Unterschiede

BildformatKompressionFarbspektrumTransparenzBesonderheiten
JPG/JPEGverlustbehaftetca. 16,8 Millionen FarbenNein-
GIFverlustfreiMaximal 256 FarbenEinfache Transparenz (Index)Einfache Animationen
PNG-8verlustfreiMaximal 256 Farben4-Bit-Transparenz mit 16 Stufen pro PixelKeine Animationen
PNG-24verlustfreica. 16,8 Millionen FarbenEinfache Transparenz (Index)-
PNG-32verlustfreica. 16,8 Millionen FarbenAlpha-Kanal-
SVGverlustfreica. 16,8 Millionen FarbenAlpha-KanalVektorgrafiken lassen sich verlustfrei hochskalieren. Auch Animationen sind möglich.
Webpverlustfreica. 16,8 Millionen Farben (YUV420)Alpha-KanalAnimationen möglich
Webpverlustbehaftetca. 16,8 Millionen Farben (RGBA)Alpha-KanalAnimationen möglich

Für Fotografien: JPG und JPEG

Anzeige
Anzeige

Neben dem JPG-Format spucken qualitativ hochwertigere Kameras (beispielsweise Spiegelreflexkameras) auch Bilder im RAW-Format aus. Das Rohdatenformat, welches ohne Bearbeitung der Kamera, das heißt mit allen Rohdaten gespeichert wird und dadurch dem Fotografen eine detailliertere Bildbearbeitung ermöglicht, soll hier aber nicht unser Thema sein. Die größte Verbreitung finden fertige Fotografien schlussendlich im JPG-Format. Ein 16-Bit-Farbraum pro Pixel ist das Mindeste, in der hochwertige Bilder digital dargestellt werden sollten. Deswegen bietet das Format auch keine Unterstützung für Transparenzen an, da bei realen Fotos dies nicht benötigt wird und somit die Dateigröße eingespeichert werden kann.

Was ist eigentlich der Unterschied zwischen JPG und JPEG?

Um es kurz zu machen: Die beiden Ausdrücke meinen absolut das Gleiche. Das von der Joint Photographic Experts Group ins Leben gerufene Bildformat hatte ursprünglich die Dateiendung .jpeg. In früheren Windows-Versionen waren jedoch nur dreistellige Dateiendungen zulässig, wodurch unter der gleichen Bedeutung die Endung .jpg eingeführt wurde. Da jedoch Macintosh-Nutzer die ursprüngliche vierstellige Endung .jpeg nutzen konnten, werden beide bis heute gebraucht. Inzwischen sind auch unter Windows die mehrstelligen Endungen zulässig, wodurch auf beiden Betriebssystemen alle zwei Endungen immer wieder auftauchen.

Die verlustbehaftete Komprimierung ermöglicht außerdem eine starke Reduzierung der Dateigröße. Jedoch sollte man dabei immer die Original-Datei behalten, da bei der Komprimierung nicht nur redundante Daten entfernt werden, weswegen die ursprüngliche Qualität aus dem komprimierten Bild nicht wiederhergestellt werden kann.

Anzeige
Anzeige

Dafür solltet ihr JPG nutzen:

Anzeige
Anzeige
  • Fotografien
  • Bilder mit hoher Farbtiefe und Dynamik
  • Mit Googles Webp (weiter unten) gibt es eine neue Alternative zu dem älteren JPG-Format

Das im Web verbreitete Bildformat GIF

Dank Social Media sind animierte GIF-Bildchen im Web sehr verbreitet. Genau das ist aktuell auch die einzig sinnvolle Verwendungsmöglichkeit des Formats: kleine Logos und Icons mit geringer Farbtiefe. Für andere Zwecke ist das Format aber nur bedingt empfehlenswert. Auf der einen Seite habt ihr nur die Möglichkeit einer Index-Transparenz, auf der anderen Seite ist euer Farbspektrum mit 256 Farben sehr eingeschränkt. Je nach Anwendung sind für Logos und Icons eher Vektorgrafiken zu empfehlen, da diese beliebig skaliert werden können, wodurch Responsive Design möglich ist.

Was ist eigentlich der Unterschied zwischen Index-Transparenz und einem Alpha-Kanal?

Ist von Index-Transparenz die Rede, dann wird pro Pixel nur ein Bit mit der Information Transparenz „ja“ oder „nein“ gespeichert. Schatten beispielsweise können damit also nur bedingt dargestellt werden, da ein realistischer Schatten in einem Logo zum Teil schwarz und nach außen hin immer transparenter wird. Genau diese Information kann mit einem Alpha-Kanal visualisiert werden. Ein typisches Farbmodell dafür ist RGBA (Rot, Grün, Blau und Alpha). Für jeden Bereich werden dann acht Bit pro Pixel gespeichert.

Dafür solltet ihr GIF nutzen:

Anzeige
Anzeige
  • Kleine Animationen im Web (zum Beispiel für Social Media)
  • Bedingt kleine Logos und Icons, häufig ist PNG oder SVG sinnvoller

PNG: Für mehr Transparenz

PNG-8 lässt sich mit GIF, die anderen Versionen mit JPG vergleichen. Der wesentliche Unterschied liegt in der besseren Transparenz und gegenüber dem JPG-Format in einer verlustfreien Komprimierung.

PNG-8: Die GIF-Alternative ohne Animationen

PNG-8 stellt pro Pixel, wie der Name schon sagt, acht Bit plus vier Bit für die Transparenz (also 16 Stufen) zur Verfügung. Dadurch werden einerseits so viele Farben wie beim GIF-Format unterstützt, auf der anderen Seite aber eine bessere Transparenz ermöglicht. Durch die fehlenden Animationen ist PNG-8 nur für einfache Logos, Icons sowie Grafiken mit kleinem Farbspektrum eine sinnvolle Alternative.

Die Bildformate PNG-24 und PNG-32

Beide Versionen des PNG-Formats verwenden den gleichen Farbraum mit je acht Bit pro Kanal, wodurch pro Pixel über 16 Millionen Farben dargestellt werden können. Während PNG-24 eine einfache Index-Transparenz unterstützt, verwendet PNG-32 die weiteren acht Bit für einen Alpha-Kanal und somit 256 Transparenz-Stufen. Der im Web häufig verbreitete Glaube, PNG-24 hätte einen Alpha-Kanal ist falsch. Bekannheit erlangte er durch Adobe, da in Photoshop und Illustrator nur von PNG-8 oder PNG-24 die Rede ist. Nutzt ihr aber mit PNG-24 einen Alpha-Kanal muss auch Adobe eine PNG-32 produzieren, um die weiteren acht Bit unterbringen zu können. Informiert werdet ihr darüber jedoch nicht.

Anzeige
Anzeige

Insgesamt wird das PNG-Format mit RGB-Farbraum häufig mit einer relativ großen Dateigröße in Verbindung gebracht. Das hängt unter anderem mit der Unterstützung von Transparenz und der verlustfreien Komprimierung zusammen. Sinnvoll ist das Format deswegen bei Grafiken mit vielen verschiedenen Farben und einer benötigten Transparenz. Bei wirklich notwendiger mehrstufiger Transparenz muss sogar auf das größere 32-Bit-Format zugegriffen werden.

Dafür ist das PNG-Format ideal:

  • Die 8-Bit-Variante kann für Logos, Icons und einfache Grafiken verwendet werden
  • Die beiden größeren Varianten sind für Grafiken mit benötigten Transparenzen und großem Farbraum
  • Neben JPG im Web weit verbreitet und dafür auch sinnvoll
  • Wenn erneutes Bearbeiten oder Exportieren benötigt wird (ermöglicht durch verlustfreie Komprimierung)

SVG: Vektorgrafiken

Die bisherigen Formate JPG, PNG und GIF waren alles Bitmapgrafiken (auch Pixelgrafiken genannt). SVG ist das einzige Vektorgrafiken-Format in unserem Vergleich. Es wurde extra für das Web entworfen und erlangt dort auch eine immer größere Verbreitung.

Anzeige
Anzeige

Was ist eigentlich der Unterschied zwischen Vektor- und Bitmapgrafiken?

Pixelgrafiken speichern für jeden Bildpunkt die Farbwerte. Die Kombination aller Punkte und Farben ergibt dann letztlich ein ganzes Bild. Die vielen Farbwerte sorgen aber auch für einen großen Speicherbedarf (bei FullHD-Auflösung müssen über zwei Millionen Farbwerte gespeichert werden, was beim RGB-Farbraum ohne Komprimierung über sechs Megabyte sind). Außerdem können Pixelgrafiken nicht verlustfrei hochskaliert werden. Logisch, da bei einer höheren Auflösung Farbwerte fehlen.

Dem gegenüber stehen Vektorgrafiken, bei denen Vektorinformationen gespeichert werden. Also beispielsweise starte in Punkt X und male einen Kreis bis Punkt Y mit dem Radius 100. Die entstandene Linie soll zehn Pixel dick sein und die Farbe Blau haben. Derartige Grafiken sind zwar in der Farb- und Schattendarstellung sowie im Detaillierungsgrad stark eingeschränkt, müssen aber nicht so viele Informationen speichern und können außerdem beliebig hochskaliert werden.

Das Format erlaubt das bedingungslose Skalieren der Grafiken. Somit ist es sehr gut für Logos, Icons und einfache Grafiken im Web geeignet: perfekt für das Responsive Design. Aber nicht nur im Web sind Vektorgrafiken sinnvoll. Unternehmen sollten ihre Logos immer als Vektorgrafik vorliegen haben. So kann die Größe des Logos ohne Verluste beliebig angepasst werden. Egal ob für einen Flyer oder ein großes Werbeplakat.

Der Nachteil ist leider, dass nicht jede Person, jedes Content-Management-System oder Social-Media-Plattform mit Vektorgrafiken so einfach umgehen kann. Wer seine Grafik aber als SVG erstellt hat, kann es ohne Probleme in eine handelsübliche Pixelgrafik der passenden Größe konvertieren. Inzwischen nimmt die Verbreitung von SVG stark zu, sodass jeder moderne Webbrowser das Format bereits unterstützt. Mögliche Grafiksoftware für das Format sind Inkscape, Illustrator oder auch Sketch.

Dafür ist das SVG-Format ideal:

Anzeige
Anzeige
  • Logos, Icons und einfache Grafiken im Responsive Design oder die in verschiedenen Größen, Farben und Formen benötigt werden
  • Grafiken, die im Nachhinein bearbeitet werden müssen

Webp – Das neue Format fürs Web

Der Name des vergleichsweise noch sehr jungen Bildformat ist Programm. Webp soll das Bildformat fürs Web werden, zumindest wenn es nach dem Entwickler Google geht. Es spricht aber auch einiges dafür. Webp gibt es in zwei Varianten: mit verlustfreier und verlustbehafteter Kompression. Gegenüber PNG spart das verlustfreie Format laut Googles Angaben rund 26 Prozent seiner Dateigröße bei gleichbleibender Qualität ein. Im Vergleich zu JPG sind es bei der verlustbehafteten Variante sogar bis zu 34 Prozent. Beide Versionen unterstützen auch einen Alpha-Kanal, welcher ebenfalls deutlich weniger Speicherplatz benötigt als beispielsweise PNG. Außerdem unterstützt Webp Animationen und steht damit in direkter Konkurrenz zu GIF. Vorteile: bessere Transparenz und RGB-Farbpalette. Konvertiert man GIF-Bilder in das Webp-Format spart man sogar bis zu 64 Prozent Speicherplatz ein.

Der große Nachteil des Formats ist die Unterstützung. Während jeder handelsübliche Browser und eine breite Sparte an Software mit GIF, JPG und PNG umgehen kann, sieht das Ganze bei Webp eher mau aus. Unterstützen kann Webp bislang hauptsächlich Google Chrome für den Desktop und Android, Opera und der native Android-Webbrowser. Solange die Unterstützung weiterer großer Webbrowser wie Firefox, Safari und Edge fehlt, dürfte das „Bildformat fürs Web“ jedoch ein Format für Chrome, Android und Opera bleiben. Wer jedoch eine Website betreibt, sollte stets darauf achten, dass jeder aktuelle Browser die eigene Seite richtig darstellen kann.

Dafür könnt ihr Webp verwenden:

Anzeige
Anzeige
  • Fotografien und weitere Bilder mit großem Farbraum
  • Grafiken, auch mit Transparenz
  • Alternative zu Animationen mit GIF
  • Kurz: fürs Web
  • Aktuell durch fehlenden Support von Firefox, Safari und Edge jedoch noch nicht empfehlenswert

Mehr Details zu Webp findet ihr in unserem Überblick.

Mehr zu diesem Thema
GIF
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
2 Kommentare
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

E.

Warum hast du nach der Studie der Infografik Bilder mit 2 und 6 Farben als JPEG eingebunden? Hier wäre PNG die bessere Lösung gewesen.

Antworten
Tim

schöne Gegenüberstellung mit Vor und Nachteilen.. Da wir immer mal wieder Schulpraktikanten bei uns haben, ist das eine super Grafik um auf einen Blick alle unterschiede zu erklären. Besten Dank
Gruß Tim

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige