Farbprofile Browser/Photoshop/Gimp/Bildbetrachter/Windows-Fotoanzeige/CSS

[mark]

Guten Abend,

ich möchte gerne eine Grafik-Layout (.jpeg) einer Startseite in CSS Umsetzen und bin dabei auf folgendes Problem gestoßen, das mir Kopfschmerzen bereitet:

Öffne ich die Grafik im Browser (beliebig IE, FF, Chrome, Opera, Safari), so werden mir andere, leicht grellere Farben angezeigt als in Photoshop und der Windows Fotoanzeige.

Weise ich in Photoshop dem Bild das Farbprofil meines Monitors zu, so stellt mir Photoshop die Farben gleich dar, wie der Browser.

So weit, so gut. Das liegt an den unterschiedlichen Farbprofilen. Das habe ich verstanden. Nun möchte ich aber jene Farben, die Photoshop und die Windows Fotoanzeige per default verwenden in CSS umsetzen. Und genau da hakts.

Meine Fragen lauten daher:

• Wie komme ich an die CSS-Farbecodes ran, sodass mir der Browser die Farben gleich darstellt wie sie Photoshop und die Windows Fotoanzeige verwenden?
• wie kann ich Grafiken abspeichern, dass sie im Browser und in der Windows Fotoanzeige gleich dargestellt werden?

lg mark

Funfact bzw. was mich komplett verwirrt hat: Ich entwickle auf Linux und lustigerweise stellt mir dort GIMP die Farben per default gleich dar wie der Browser. Leider gefällt mir die Seite aber besser, wie sie in Photoshop und der Windows Fotoanzeige dargestellt wird ...

[Sara]

Hallo,

Öffne ich die Grafik im Browser (beliebig IE, FF, Chrome, Opera, Safari), so werden mir andere, leicht grellere Farben angezeigt als in Photoshop und der Windows Fotoanzeige.

dieses Problem habe ich öfters, wenn ich von einem Grafiker eine Grafik erhalte die allerdings mit 300pdi und im CMYK-Farbmodell erstellt wurde.

Meine Fragen lauten daher:

• Wie komme ich an die CSS-Farbecodes ran, sodass mir der Browser die Farben gleich darstellt wie sie Photoshop und die Windows Fotoanzeige verwenden?

Ganz einfach, öffne die Datei in einem Grafikprogramm wie z.B. Photoshop und verwende die Pipette.

• wie kann ich Grafiken abspeichern, dass sie im Browser und in der Windows Fotoanzeige gleich dargestellt werden?

Auch hier, öffne die Datei mit einem Grafikprogramm z.B. Photoshop, klicke auf Für Web speichern schon sollte das Problem gelöst sein.

[mark]

Hi Sara,

dieses Problem habe ich öfters, wenn ich von einem Grafiker eine Grafik erhalte die allerdings mit 300pdi und im CMYK-Farbmodell erstellt wurde.

Meine jpeg-Datei ist nicht mit CMYK-Farbmodell erstellt, sondern mit sRGB IEC61066-2.1 das müsste meines Wissens richtig sein.

Ganz einfach, öffne die Datei in einem Grafikprogramm wie z.B. Photoshop und verwende die Pipette.

Das ist gerade das Problem. Von der Pipette erhalte ich Werte, die zwar mit den Farben übereinstimmen, wenn ich die jpeg-Datei direkt im Browser öffne (Neuer Tab > Grafik direkt in's Browserfenster ziehen). Die Werte der Pipette stimmen jedoch NICHT damit überein, wie mir Photoshop/Windows Fotoanzeige die Grafik anzeigt. Ich möchte jedoch gerne die Farben haben, wie sie Photoshop anzeigt, NICHT, wie sie vom Browser angezeigt werden.

Auch hier, öffne die Datei mit einem Grafikprogramm z.B. Photoshop, klicke auf Für Web speichern schon sollte das Problem gelöst sein.

Das habe ich schon versucht, das Problem bleibt bestehen. Für mich bedeutet das, dass das Problem irgendwo anders liegen muss.

Ich habe jetzt das Farb-Profil der Datei (=sRGB IEC61066-2.1) umgewandelt in das Farb-Profil meines Monitors. Und es funktioniert! Ich habe jetzt auf meinem Windows PC die gleiche Farbdarstellung in Photoshop, der Windows Fotoanzeige und allen Browsern.

Nur verstehe ich nicht warum.? Das was ich nicht verstehe ist, dass es jetzt auf meinem Linux keine Übereinstimmung mehr zwischen Gimp, dem Bildbetrachter und dem Browser gibt ...

lg

[Sara]

Hallo,

Meine jpeg-Datei ist nicht mit CMYK-Farbmodell erstellt, sondern mit sRGB IEC61066-2.1 das müsste meines Wissens richtig sein.

ganze ehrlich von sRGB habe ich noch nie gehört und ich beschäftige mich schon eine ganze Weile mit Grafiken. Aber Dank WIKI bin ich schlauer https://de.wikipedia.org/wiki/SRGB. In meinen Augen ist sRGB nicht richtig, sondern RGB wie es von jedem vernünftigen Grafikprogramm auch verwendet wird.

Ich habe jetzt das Farb-Profil der Datei (=sRGB IEC61066-2.1) umgewandelt in das Farb-Profil meines Monitors. Und es funktioniert! Ich habe jetzt auf meinem Windows PC die gleiche Farbdarstellung in Photoshop, der Windows Fotoanzeige und allen Browsern.

Auch dieses kann ich nicht verstehen. Wie oben geschrieben beschäftige ich mich schon eine ganze Zeit lang mit Grafiken und Anzeigen. Bis jetzt musste ich noch nie meinen Bildschirm irgendwie ein- bzw. umstellen.

Richtig ist, wenn ich eine Grafik im Browser öffne die für den Druck erstellt wurde, kommen die Farben total grell rüber. Öffne ich diese anschließend mit Photoshop in der aktuellen CC Version sieht wieder alles schick aus.

Sorry da kann ich dir dann auch nicht weiterhelfen.

[Auge]

Hallo

Auch hier, öffne die Datei mit einem Grafikprogramm z.B. Photoshop, klicke auf Für Web speichern schon sollte das Problem gelöst sein.

Das habe ich schon versucht, das Problem bleibt bestehen. Für mich bedeutet das, dass das Problem irgendwo anders liegen muss.

Das Problem ist deine Erwartungshaltung. Die Grafikprogramme haben voreingestellte Farbprofile, denen sie bei der Darstellung der Bildschirminhalte folgen. Die Profile sind unabhängig von den RGB-Werten der Pixel eines Bildes.

Im Bild sind aber nur die RGB-Werte gespeichert oder, wenn das Profil denn mitgespeichert wird, muss es noch lange nicht von allen Ausgabeprogrammen beachtet werden. Womit wir bei Browsern wären. Wenn das Bild in einem Programm wie z.B. einem Browser dargestellt wird, das keine Farbprofile kennt, können diese auch nicht beachtet werden. Die Darstellung kann sich also nur nach den RGB-Werten richten und ist somit nicht zwangsläufig so, wie du das in Photoshop vorgesehen hast.

Ich habe jetzt das Farb-Profil der Datei (=sRGB IEC61066-2.1) umgewandelt in das Farb-Profil meines Monitors. Und es funktioniert! Ich habe jetzt auf meinem Windows PC die gleiche Farbdarstellung in Photoshop, der Windows Fotoanzeige und allen Browsern.

Nur verstehe ich nicht warum.? Das was ich nicht verstehe ist, dass es jetzt auf meinem Linux keine Übereinstimmung mehr zwischen Gimp, dem Bildbetrachter und dem Browser gibt ...

Folgt die Darstellung in Linux dem in Windows gewählten Profil?

Davon ausgehend, dass eine gewünschte Anzeige der Bilder im Browser bedeutet, dass die Bilder auch anderen zur Verfügung stehen sollen, folgende Frage. Was meinst du, wie das erst bei anderen Benutzern, die keine Ahnung von deinen Farbprofilen haben, sein wird?

Wenn du eine überall (zumindest einigermaßen) gleichmäßige Farbdarstellung haben willst, musst du die Farben mit einem Standardfarbraum aussuchen/anpassen. Da aber Monitore (und auch Drucker) unterschiedlich eingestellt sind, wirst du eine identische Darstellung auf allen Ausgabegeräten, die nicht in deinem Zugriff sind, eh' nie erreichen.

Tschö, Auge

[Gunnar Bittersmann]

@@mark

Leider gefällt mir die Seite aber besser, wie sie in Photoshop und der Windows Fotoanzeige dargestellt wird

Du gehst aber nicht davon aus, dass die Seite bei anderen auch in denselben Farben dargestellt wird wie auf deinem Bildschirm? Wollte nur zu bedenken geben, ob es sinnvoll ist, da zu versuchen zu optimieren.

LLAP 🖖