Bildformate im Web und ihre Anwendungsfälle

Dieser Artikel befasst sich ausschließlich mit den wichtigen Bildformaten für digitale Medien. Grafikformate für digitale Medien unterliegen anderen Bedingungen als für den Druck. JPEG, PNG, GIF und SVG bilden zusammen die wichtigsten vier Vertreter. Andere Bildformate wie TIF, PSD, BMP, DNG, o.ä. vermeiden Sie bestenfalls auf Grund der Dateigröße oder ihrer Obsoleszenz im Web. Greifen Sie stattdessen lieber auf eines der gängigen Grafikformate zurück.

Viele Menschen machen sich über die Formatierung ihrer Bilder keine Gedanken. Ob das Bild als eine JPEG oder PNG-Datei abliegt, wird irrtümlicherweise als irrelevant verstanden. Dabei haben die Bildformate einen speziellen Verwendungszweck. Zugegebenermaßen ist das für einen Großteil, meistens nicht ausschlaggebend. Die ersten Probleme ergeben sich in Einzelfällen oder bei der professionellen Weiterverarbeitung. Gerade bei den Extremfällen wird das deutlich: Jeder Grafiker kennt die Situation eine Logo-Datei in einer Microsoft Word formatierten DOC-Datei zu erhalten. Erfahren Sie in diesem Artikel, warum eine Logo-Datei in einer DOC-Datei Probleme bereitet, was die wichtigen Bildformate für das Web bringen und wo jede von Ihnen Anwendung findet.

Die Joint Photographic Experts Group bezeichnet einen Zusammenschluss aus Firmen und Forschungsinstituten im Jahr 1992. Das Resultat ihrer Arbeit war das JPG bzw. JPEG-Format. Das JPEG-Format ist auf Grund der Darstellung von 16,7 Millionen Farben gut für Fotografien geeignet. Die Komprimierung funktioniert hier so: Anstatt der drei RGB-Kanäle für jedes Pixel, speichert das JPEG Format lediglich einen Informationswert. Dabei werden auch nahe liegende Farbwerte mit einberechnet. Allerdings verwaschen zuvor klare Konturen (siehe Beispiel) durch diesen Prozess. Den Stärkegrad dieser Komprimierung kann man dafür gezielt steuern. Eine starke Komprimierung sorgt für eine kleine Datenmenge. Durch diese Flexibilität in der Komprimierung ist das JPEG perfekt für Fotografien im Web geeignet.

Häufig werden JPEG und PNG-Dateien identisch angewendet. Beim PNG-Format unterscheidet man allerdings noch zwischen dem PNG-24 und PNG-8. Tatsächlich kann das PNG-24, wie das JPEG auch, 16,7 Millionen Farben darstellen. Allerdings funktioniert die Komprimierung anders als beim JPEG. Die Dateien des PNG-24 sind größer, weil sie verlustfrei komprimiert werden. Die Schwächen des JPEG ergeben sich deshalb nicht beim PNG. Das PNG findet deswegen Anwendung bei flächigen Grafiken, Schriftarten und kann außerdem Transparenzen darstellen.

Das PNG-8 hingegen, kann nur 256 Farben darstellen. Die Dateigröße ist folglich kleiner als beim PNG-24. Anwendung kann die kleinere Tochter dennoch finden: Zum Beispiel bei einem monochromen Logo oder einem transparenten Icon.

Ursprünglich wurde das Format durch seine minimale Dateigröße für die visuelle Gestaltung von Webseiten entwickelt. Es basiert auf einer 8 Bit-Codierung und kann 256 Farben darstellen. Vom Glasfasernetz noch weit entfernt, waren Ladezeiten wichtiger denn je. Durch das GIF konnte aber die Einführung von Grafiken im Web verschmerzt werden. Die Ladezeiten wurden nicht immens verlängert und der optische Eindruck einer Webseite konnte aufgefrischt werden. Die Netzinfrastruktur wurde mit der Zeit ausgebaut und somit konnten größere Bilddateien verwendet werden. Durch diesen Ausbau wurde das qualitativ schlechtere GIF durch das farbintensivere JPEG ersetzt.

Sei es durch 9GAG, WhatsApp oder Tinder: Das GIF-Format erlebt nun sein Revival. Das liegt insbesondere an einer weiteren Eigenschaft des Bildformats. Es kann kurze Animationen (bzw. Bildabfolgen) wiedergeben. Das macht es in einem Anwendungsfall wieder interessant: Bei dem kurzlebigen Datenverkehr im Messenger.

Neben dem GIF kann auch das SVG-Format Animationen wiedergeben. Das SVG ist besonders im zeitgenössischen Webdesign gefragt. Mit Hilfe des XML-basiertem SMIL können flüssige, grafische Animationen erstellt werden. Das führt uns zu einem weiteren Pluspunkt des SVG. Das Bildformat basiert auf XML und wird durch Vektoren dargestellt. Damit ist das SVG besonders für Logos und grafische Designelemente wie Icons ausgelegt. Durch die Vektorisierung erhalten Sie eine unendliche Skalierbarkeit bei gleichbleibender Qualität – perfekt für das Responsive Design.

Dieser Satz wird oft als Leitsatz für „gutes“ Design verstanden. Bei Designern ist die Haltung zu diesem Spruch oft zwiespältig. Design muss sich nicht immer einer Funktion unterordnen. In vielen Anwendungsfällen besitzt die Regelung „Form follows function“ aber trotzdem Bedeutung. Gerade auch beim Umgang mit Grafikformaten. Hier sollte man sich immer am dafür vorgesehenen Anwendungsbereich orientieren. Für weitere Tipps & Tricks empfehle ich Ihnen meinen anderen Artikel: 1. Bilder für Web & WordPress optimieren: Die Komprimierung.

Zur Veranschaulichung sehen Sie hier, wie sich ein laienhafter Umgang mit Grafikformaten im Web auswirkt. Achten Sie auf den Übergang zwischen Vektor und Hintergrund in den beiden Bildern. Durch die Kompressionsmethode beim JPEG werden klare Kanten unsauber und verschwommen dargestellt.

Mit diesem Artikel haben Sie einen Einblick in die aktuellen Grafikformate im Web erhalten. Für konstruktive Kritik und Ihre eigene Meinung bin ich selbstverständlich offen. Hinterlassen Sie mir in einem Kommentar, worauf Sie beim Umgang mit Grafikformaten im Web achten.