Grafik-Dateitypen richtig einsetzen - JPEG, Gif und PNG optimal nutzen

2015-01-28 11:25 (Kommentare: 0)

JPP, PNG Tastatur
© Depositphotos.com/stuartmiles

Die unterschiedlichen Grafiktypen verfügen alle über spezifische Stärken und Schwächen. Wir verraten euch, wann und für was ihr welches Datenformat solltet.

JPEG, Gif und PNG unterscheiden sich durch weit mehr als nur durch Dateigröße und -endung. Die verschiedenen Formate nutzen jeweils eigene Algorithmen zum Komprimieren und Kodieren der Bilddaten. Bei Fotos bleibt zum Beispiel das durch das JPEG-Kodierungsverfahren erzeugte Rauschen meist unbemerkt. Im Fall von textlastigen Bildern wie Screenshots von Dialogboxen oder Webseiten mit viel Text mindert der auch als Noise bezeichnete Effekt schnell die subjektive Wahrnehmung der Qualität zum Negativen. Hier ist das menschliche Auge im Gegensatz zum Foto empfindlich. Gif und PNG liefern in der Regel günstigere Ergebnisse in Hinsicht auf die Qualität von Grafiken mit Text und textähnlichen Elementen. Die bei klaren Linien und in der Typografie üblichen scharfen Kanten werden durch diese Verfahren kaum verwaschen. Es sollte jedoch, insbesondere wenn Fotos und vergleichbare Elemente in der Grafik enthalten sind, mit größeren Dateien gerechnet werden.

JPEG

Um hohe Kompressionsraten zu erreichen, nutzt das JPEG-Verfahren beim Kodieren die verlustbehaftete Komprimierung. Als Parameter stehen dabei DPI und eine wählbare Kompressionsrate zu Verfügung. Für Webseiten reichen meist 70 bis 100 DPI. Der Kompressionsfaktor erlaubt in der Regel Spielraum für Experimente, die in Hinsicht auf den Rankingfaktor Ladezeit leicht lohnen können. Ein Farbraum mit bis zu 16,7 Millionen Farben erlaubt es - im Gegensatz zu Gif - das Farbspektrum umfangreich auszunutzen.

Warum die verlustbehaftete JPEG-Komprimierung in der Praxis erfolgreich ist

Das JPEG-Verfahren nutzt die Eigenart des menschlichen Gehirns, Informationen zu ergänzen und zu interpretieren, um gute Ergebnisse zu erzielen: Das menschliche Gehirn interpretiert Form, Farbe, Kontraste und Kanten situativ. Das zeigt sich bei Fotos und Grafiken, die vergleichbare Eigenschaften aufweisen. Dies sind insbesondere weiche Kanten und Farbverläufe. Bei diesen fallen dem menschlichen Auge ausgefranste Kanten und Bildrauschen in geringem Maße kaum auf. Dadurch erzielt JPEG hohe Kompressionsraten. Sogar bildschirmfüllende Grafiken können mit moderaten Datenmengen und Ladezeiten gespeichert werden.

Typische Anwendungen: Fotos, Grafiken mit weichen Farbverläufen und große Grafiken, deren Datenvolumen stark komprimiert werden soll. Screenshots von Spielen und grafiklastigen Anwendungen, mit Ausnahme von Grafiken wie Heatmaps und topografischen Karten, bei denen Rauschen oder unsaubere, verwaschene Kanten unter Umständen Fehlinterpretationen provozieren.

Gif

Gifs sind der Klassiker unter den Grafik-Dateitypen, das merkt man diesen auch an. Die Farbtiefe ist mit maximal 256 Farben gering. Zudem ist der Algorithmus zur Datenkompression im Vergleich zu JPEG schwach. Fotos und andere Grafiken mit weichen Farbübergängen leiden jedoch unter dem eng gesteckten Farbraum. Kleine Dateigrößen schafft der Algorithmus jedoch bei Bildern mit wenigen Farben, wie Logos oder bei Text. Weitere Anwendungsbeispiele für Gifs sind Buttons, Dots, Bars und Symbole. Heute ist es jedoch ratsam, in diesen Fällen auf das modernere und inzwischen gut durch Browser unterstützte PNG zu setzen. Soll hingegen eine einfache Animation erstellt werden, kann ein Gif-File das Mittel der Wahl sein.

Typische Anwendungen: Textdateien und animierte Grafiken, Buttons, Bars und ähnliches.

PNG

PNG ist ein speziell für das Web entwickelte Grafikformat. Neben einer unabhängigen Lizenz stand beim Entwurf des Formates auch die Verbindung der Vorteile von Gif und JPEG im Fokus. So verfügt PNG über einen Alphakanal, der Transparenz in unterschiedlichen Ausprägungen ermöglicht. Farbtiefen sind mit bis zu 16,7 Millionen Farben möglich. Animationen unterstützt das Grafikformat jedoch nicht.

Die Kodierung erfolgt wie bei Gif verlustfrei. In der Praxis sorgt dies für hohe Datenmengen bei Grafiken mit weichen Farbübergängen. De facto ist PNG Gif meist überlegen. Das gilt auch für die Kompressionsrate. Zusätzliche Datenblöcke und Metadaten erlauben das Einbinden von Zusatzinformationen in die Dateien. Jedoch unterstützen nicht alle Anwendungen diese umfangreichen Möglichkeiten.

Typische Anwendungen: Text sowie Buttons, Bars, Bullet-Points und Hintergründe mit scharfen Kanten und ohne umfangreiche Farbverläufe, Screenshots von Webseiten, von textlastigen Anwendungen und Elementen mit scharfen Kanten oder Landschaftskarten.

Datenmenge kein Garant für Qualität

Wer denkt, mit einer hohen Detailtreue – also einer hohen Auflösung und Farbtiefe zu punkten – der irrt. Das treibt in der Regel nur den Traffic und die Ladezeiten der eigenen Webseite nach oben. Bis zu einem gewissen Grad lässt sich das Auge betrügen. Häufig lassen sich hohe Auflösungen unter dem passenden Datenformat signifikant reduzieren, ohne dass Qualitätseinbußen wahrnehmbar werden. Mehr noch: Mit kaum zu bemerkenden Qualitätseinbußen sind oftmals Grafikdateien erzeugbar, die nur wenige Kilobyte Speicherplatz benötigen und somit die Usability der Website durch schnelle Ladezeiten steigern. Wichtiger als die quantitative Datenmenge bleibt der Einsatz des optimalen Datentyps.

 

Zurück

 
domainssaubillig © 2007-2022 Alle Rechte vorbehalten. | Support | AGB | Datenschutzerklärung | Impressum