Toggle menu

Find By Date

#Webdesign

JPEG, GIF oder PNG?

Foto: pexels.com

Drei der Dateiformate, mit denen Sie am häufigsten in Berührung kommen, sind JPEGs, GIFs und PNGs. Da es sich dabei jeweils um Bildformate handelt, ist vielen Webdesignern und Entwicklern nicht klar, wann welches Format verwendet werden sollte. Grund genug für uns, die drei Bildformate im Web genauer unter die Lupe zu nehmen.

JPEG (Joint Photographic Experts Group)

Mit einem Farbumfang von bis zu 16 Millionen Farben wird das JPEG-Verfahren beinahe ausschließlich zur Komprimierung von Fotos oder komplexeren Bilddateien verwendet.

Es beherrscht eine Kompressionsskala von 0% bis 100% und erlaubt es, die Dateigröße – und somit die resultierende Ladezeit – auf einige Prozent des ursprünglichen Wertes zu reduzieren.

Mit zunehmender Kompression verliert das Bild jedoch immer mehr an Qualität: Artefakte entstehen, Farben werden nicht mehr wie gewünscht dargestellt und das Bild wird insgesamt unscharf. Für die Anwendung im Web empfehlen wir Kompressions-Werte zwischen 60% und 75%. Sie stellen einen guten Kompromiss zwischen Qualität und Dateigröße dar.

Vorteile:
Hoher Farbumfang, geringe Dateigröße

Nachteile:
Qualitätsverluste bei stärkerer Kompression, keine Transparenzen

Empfohlene Verwendung:
Fotos, Bilder mit Farbverläufen

GIF (Graphics Interchange Format)

Das GIF-Format wurde zu einer Zeit geboren, als Internet-Verbindungen noch sehr langsam waren. Ziel seiner Entwickler war es, die schleppende Übertragung von Bild-Dateien zu beschleunigen.

Im Gegensatz zum JPEG-Format kann es lediglich 256 Farben darstellen. Der reduzierte Farbumfang wirkt sich zwar positiv auf die Dateigröße aus, macht das Format für die Verwendung bei Fotos jedoch völlig unbrauchbar. Aber: mit GIFs lassen sich Transparenzen oder kurze Animationen (animated GIFs) realisieren.

Vorteile:
Animationen und Transparenzen möglich, geringe Dateigröße

Nachteile:
Geringer Farbumfang

Empfohlene Verwendung:
Web-Grafiken mit wenigen Farben, Icons, kurze Animationen

PNG (Portable Network Graphics)

PNGs sind das Schweizer Taschenmesser unter den Bildformaten. Sie vereinen die Stärken beider voriger Formate, kommen aber ohne ihre Schwächen aus. Man unterscheidet zwischen PNG-8, welches dem GIF sehr ähnlich ist, und PNG-24, welches sich an JPEGs anlehnt.

Obwohl das PNG-Format auf den ersten Blick nur Vorteile zu haben scheint, sollten Sie es nicht für jeden beliebigen Zweck einsetzen: Die Darstellung der Farben in Bildern ist nicht ganz so dynamisch wie bei vergleichbaren JPGs, außerdem sind die Dateien aufgrund der verlustfreien Kompression meist größer.

Vorteile:
Unterstützung von Alpha-Kanälen, verlustfreie Kompression

Nachteile:
Erhöhter Speicherbedarf bei PNG-24

Empfohlene Verwendung:
Bilder mit Transparenzen, Bilder, bei denen die Dateigröße eine untergeordnete Rolle spielt

Wann soll welches Format verwendet werden?

Für die meisten Anwendungen im Web ist das JPEG-Format die richtige Wahl. Wenn Sie die Stärke der Kompression richtig wählen, werden Sie speziell bei Fotos und Farbverläufen den besten Kompromiss aus Qualität und Ladezeit (Dateigröße) erzielen.

Der Einsatz von GIFs beschränkt sich im Wesentlichen auf kurze Animationen (animated GIFs). Für Grafiken oder Icons, die Transparenzen enthalten, eignen sich PNG-24-Dateien am besten.

 

 

Quellen:
http://theultralinx.com/2014/12/jpeg-gif-png/
http://t3n.de/news/bildformate-ueberblick-jpeg-gif-png-586476/
http://www.bild.de/digital/computer/grafik/grafikformat-unterschied-gif-jpeg-png-39158612.bild.html
https://pixelbar.be/blog/jpg-png-gif-bildformate-im-web-unterschiede-vorteile-eigenheiten/