Web: Farbprofile in Webgrafiken

Warum werden die Farben von JPEG- oder PNG-Grafiken nicht identisch dargestellt wie die farbigen Elemente, die mittels CSS definiert wurden?

Eingebettete Farbprofile in RGB-Bildern sind vor allem in der Bild­­be­arbeitung enorm wichtig. Die Profile sind der Schlüssel, damit Bilder auf ver­schie­denen, kali­brierten Monitoren nahe­zu identisch dargestellt werden. Aber wie sieht das in Web­­browsern aus?


Problem

Diese Profile werden je nach Webbrowser und ver­wendetem Monitor auch in Bildern und Grafiken im Web berücksichtigt. Eine Pixel­grafik mit dem Farb­wert von rgb(230,0,0) und einem ein­ge­betteten Farbprofil, wie zum Beispiel sRGB, wird im Web­browser nicht gleich behandelt wie das Element, welches via CSS mit dem Farb­wert definiert wurde. Sehr ausgeprägt sichtbar wird dies auf Bildschirmen, die für die Bildbearbeitung kalibriert sind.

Testseite

Den eigenen Bildschirm und das Verhalten von JPEGs und PNGs mit und ohne Profil kann mit der Testseite geprüft werden: www.color.sabu.ch

Farbprofil in Chrome (simuliert). Für tatsächliches Verhalten Testseite verwenden.
Farbprofil in Chrome (simuliert). Für tatsächliches Verhalten Testseite verwenden.

Lösung

Bilder oder Grafiken, die in den meisten Webbrowser 100% den Farbwert wiedergeben sollen, wie es ein Element via CSS umsetzt, sollten also ohne Farbprofil gesichert werden. Bei PNG-Grafiken muss ebenfalls das «gAMA chunk» entfernt werden, da z.B. Firefox (42) dieses ebenfalls auswertet und die Farben somit verändert darstellt. Die Erfolgsquote ist damit am grössten.

In diesen Fällen ist das sehr wichtig:

  • Das Corporate Design schreibt die Farben exakt vor (zum Beispiel Logos oder Flächen in Werbebannern).
  • Die Grafik muss nahtlos in ein via CSS definiertes HTML-Element übergehen.

Farbprofil in Grafikdateien

Bei Fotos kann das Profil ruhig mitgegeben werden. Dateien mit Profilen benötigen jedoch mehr Speicherplatz. Bei sehr kleinen Bilddaten kann das rasch ein Vielfaches an Speicherbedarf bedeuten.

Zum Beispiel:

  • ohne Profil 325 Byte
  • mit Profil jedoch 11’312 Byte

Grundsätzlich weniger Probleme und kleinere Datei­grössen hat man durch das Weg­lassen der Farb­profile für Webgrafiken.

Farbprofile, Web, JPEG, PNG, Monitore, Farbunterschiede, Falsche Farben, sRGB, RGB, CMYK